Grow your CSS skills. Land your dream job.

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

  • # December 2, 2009 at 11:51 am

    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

    # December 2, 2009 at 2:07 pm

    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.

    # December 2, 2009 at 2:26 pm

    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

    # December 3, 2009 at 1:31 pm

    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/.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".