Featuredimagezoomer overlays dropdown-navigation

[MarkiMarika]

1) Script Title: featured image zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem:

Hi,

I have an image on a page with featured image zoomer. Above this image is a navigation with a dropdown menu. The last point of the dropdown goes over the image, but when I drive with my mouse over the last point where the border across the image, the image zoom appears. I tried some css things, but this was not very success.

Had someone a similar problem in the past and a solution for it?

Thanks,
Markus

[jscheuer1]

You have to boost the z-index of the menu. The zoomer has default z-index, but comes after all other elements on the page. So unless the menu has at least a z-index of 2, the zoomer will cover it.

To give the menu a z-index of 2 or more might require making all of its parent elements positioned and also having a z-index of 2 or more.

How this is done with a particular menu varies.

And there might be other problems.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[MarkiMarika]

Hi John,

thanks for your help! I'll try it today evening (here in germany it is 6 a.m. and I must go to work )
I will send you the link with the required access data. The page is in work and still protected against public.

Thanks,
Markus


****EDIT****

Okay, I can not send private messages..the access is [sensitive data removed]
Please go there to an arcticle. There you can see my "problem"

[jscheuer1]

I see there's already a lot of positioning and z-index used on those pages.

At the end of the http://www.refereeworld.com/test_msu/css/stylesheet.css file, change:

		.magnifyarea, .zoomtracker, .zoomstatus, .cursorshade {
			z-index: 600;
		}

to:

		.magnifyarea, .zoomtracker, .zoomstatus, .cursorshade {
			z-index: 591;
		}

Works here, at least for:

UNDER ARMOUR WOMEN'S ACTIVE SHORTS, black

Should work for all of them.

The browser cache may need to be cleared and/or the page refreshed to see changes.

[MarkiMarika]

I tried all, but not this...thanks a lot, but I don't understand why it works with 591, but not with 600...?

[jscheuer1]

Items with a higher z-index cover those with a lower z-index. The z-index of the menu or it's significant parent for determining its z-index in relation to the zoomer elements is between 591 and 600. The zoomer elements need to be at least 591 (possibly 590 because they're the last elements on the page - didn't check that) to be seen over other elements on the the page that would otherwise cover them.