- This topic is empty.
January 21, 2013 at 3:39 pm #42152
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’.
AaronJanuary 21, 2013 at 4:56 pm #121766Chris CoyierKeymaster
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 #121783
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
ThanksJanuary 22, 2013 at 6:02 am #121838SgtLegendMember
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 #121936
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 thanksJanuary 22, 2013 at 6:33 pm #121942Jozsef K.Participant
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:January 23, 2013 at 9:33 pm #122077greenroboMember
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 #123033AnonymousInactive
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.February 1, 2013 at 11:12 am #123040
Actually it seems to be fine for me in IE9 & 8.February 1, 2013 at 11:14 am #123042AnonymousInactive
Would you screencap that for me? Could be my VM is the issue.
Thanks man.February 1, 2013 at 11:21 am #123045
W7, IE10 in IE9 & 8 mode.February 1, 2013 at 11:31 am #123044AnonymousInactive
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 #123050
Frankly, it probably all stems from absolute positioning being used somewhere…which is never a good place to start with IE
- The forum ‘CSS’ is closed to new topics and replies.