Grow your CSS skills. Land your dream job.

IE not respecting z-index

  • # January 21, 2013 at 3:39 pm

    Hi guys,

    I’m making a site with a drop down menu, using pretty much the same code I’ve used before with success. But this time I’m racking my brains trying to figure out why IE is not respecting the z-index and not showing my sub-menu correctly (weirdly only the borders). The sub-menu is under ‘About’.

    http://mercantilecredit.com/

    Any help?

    Many thanks,

    Aaron

    # January 21, 2013 at 4:56 pm

    Hey Aaron,

    I’m not sure this is a z-index issue. In looking in IE 8 on Windows 7, it looks like the ul.sub-menu-wrap is staying display: none; even when the mouse is over it. So maybe it’s a JavaScript issue?

    # January 21, 2013 at 5:24 pm

    Hi Chris, I can confirm it’s not down to the javascript because I tried disabling javascript and removing the display: none. It still presented me with the same problem.

    # January 21, 2013 at 5:33 pm

    I had a look at your site in IE 7-10 and it was consistent between each browser, could you please post a screenshot of what you see to clarify the issue you’re having.

    # January 21, 2013 at 6:04 pm

    For me in windows 7 it’s not working in 7-9 (haven’t tried 10 yet). Here is a screenshot of how it looks in IE and how it should look: http://aaronjpitts.com/ieproblem.jpg

    Thanks

    # January 22, 2013 at 6:02 am

    Ok I think I found the issue, in your stylesheet remove your z-index from the `header` selector and it should then work perfectly in IE.

    # January 22, 2013 at 4:35 pm

    Hi, thanks for your suggestion but if I remove the header z-index then it doesn’t work in any browser as the header needs the z-index.

    Any other suggestions?

    Many thanks

    # January 22, 2013 at 6:33 pm

    the highest parent of the navigation(in this case the header tag) get’s a big z-index and position:relative and the next div(#slider) which has the slider inside get’s position and a smaller z-index.

    Here is a nice note for you:

    http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

    # January 23, 2013 at 9:33 pm

    Hi Aaron,

    I’ve looked into the markup and found that you had too many dom elements with position: relative and position: absolute that will result in unwanted overlapping. You are using z-index to control the overlapping. From my experience, this will lead to a lot of problems. Here is what I suggest.

    These are the elements causing problem (I think).

    div#header-img > h1.right (position: relative > position: absolute)
    li.top-level > div.sub-menu-wrap (position: relative > position: absolute)

    Try to style them in a different way, so that you will get the same effect. Or adjust the markup so that there will not be any overlapping.

    Hope this helps you.

    # February 1, 2013 at 10:59 am

    Is there any other solution to this? I need to use z-index in my layout to get the desired effect and in IE9 and below my sub menu does not display outside my header.

    http://69.195.124.81/~marinali/

    The site is responsive, so if you’re using IE9 resize the window to below 680px and hover over the nav icon to more clearly see what’s really happening.

    # February 1, 2013 at 11:12 am

    Actually it seems to be fine for me in IE9 & 8.

    # February 1, 2013 at 11:14 am

    Would you screencap that for me? Could be my VM is the issue.

    Thanks man.

    # February 1, 2013 at 11:21 am

    W7, IE10 in IE9 & 8 mode.

    # February 1, 2013 at 11:31 am

    Ah! It must be the IE10 engine that solves this. I just tried this from my PC at home via a screen share and I can replicate your findings in IE10 after setting the browser mode as well.

    Users without IE10 will still see the issue however, which will of course be the larger portion of IE users for a great deal of time I imagine.

    Just when I thought I wouldn’t need to worry about IE9 support anymore too… what an irritating quirk.

    # February 1, 2013 at 11:45 am

    Frankly, it probably all stems from absolute positioning being used somewhere…which is never a good place to start with IE

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.

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