IE not respecting z-index

[Historical Forums User]

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

[Chris Coyier]

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?

[Historical Forums User]

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.

[SgtLegend]

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.

[Historical Forums User]

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

[SgtLegend]

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.

[Historical Forums User]

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

[Jozsef K.]

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/

[greenrobo]

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.

[Anonymous]

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.

[Paulie_D]

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

[Anonymous]

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

Thanks man.

[Paulie_D]

W7, IE10 in IE9 & 8 mode.

[Anonymous]

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.

[Paulie_D]

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

[Author]

Posts