[Solved] Popup Menu Appears Under IMG in IE6/IE7

[Will Fastie]

Reference Site: http://www.fastie.com/z/clf/panoramas
CSS File: http://www.fastie.com/z/clf/panoramas/css/sp.css (relevant classes are town-map, top-nav)
jQuery Code: http://www.fastie.com/z/clf/panoramas/code/behaviors.js (see the last item in the file)

I’ve bumped into something I don’t understand. I have a simple dropdown menu that appears when the "Home" link at the top of the site is hovered. The hover is created by jQuery so that it will work with IE6. In IE8/Safari/FireFox/Chrome the menu works as expected. In IE7 and IE6 the menu appears beneath an image below. Here’s what that looks like:

[img]http://www.fastie.com/z/temp/menu-behind-img.jpg[/img]

The image is contained in a div of class town-map that has position:relative. If I remove the position attribute, the menu works as expected. With position:relative, it does not. Unfortunately, I must keep position:relative because navigation icons are positioned absolutely on the image in the container.

I have tried various experiements with overflow and z-index, to no avail. I also tried setting position attributes on the image itself and again no help. I am considering the possibility that jQuery hover is contributing to the problem but I have not yet taken the time to test that.

What have I missed?

Thanks.
Will

[dmor71]

I’m getting a 404 message trying to view your css file…however have you tried giving your image a Z class and send it to the back? Just a suggestion and not sure that would even work.

[Will Fastie]

I’m very sorry about that. I’ve corrected the links above.

As for z-index, yes, I tried putting z-index on everything that had position and that did not work. I’m not suggesting that I tried every possible combination, but I sure tried a lot.

Will

[Will Fastie]

Well, I said I had tried z-index on "everything" but not all combinations. Turns out I had not tried one particular class.

The page layout is basically a top banner (position:relative) and a content area. The top banner comes before the content area, so by rule it is on a lower layer. That means anything in it is on a lower layer as well. The popup is part of the top banner.

So I gave the top banner a z-index of 100 and bingo – the popup overlays the image.

The actual site using this is my brother’s and can be found at http://conservation.townofsalisbury.org/panoramas/.

[Author]

Posts