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’.
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:
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.
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.
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.
Would you screencap that for me? Could be my VM is the issue.
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.
You must be logged in to reply to this topic.