A few weeks ago I was working on a company’s site before we launched their new design. I was asked to prep the drop-down menu in so it would work in Internet Explorer. It worked fine in IE8, but there were severe issues with IE6 and IE7. I don’t normally support IE6, unless I the client is paying a substantial amount, but I do support it to the point where at least all of the information is accessible even if it doesn’t look right.
Anyway, in both IE6 and IE7, I found that the main banner image was covering the dropdown menu. I could not figure out what the problem was for quite sometime, and after doing some extensive searching on Google, I was able to learn what the problem was through a variety of sources.
Because Internet Explorer 6 and 7 render absolutely positioned elements different than any other browser, they cause for elements to be overlapped in a different order. Then on top of that, if you use a z-index on the element, nothing is fixed. So, in an effort to make it easier for anyone else with this problem, I will try to explain how to hack this IE bug.
The first thing you need to pay attention to is what positioning you are using. My problem was caused because I was using absolute positioning throughout the header. Now this shouldn’t be a problem, but I had multiple relative positioned elements within that same header.
After a couple hours of testing various methods, I finally found something that works, and I believe I may understand it as well.
Instead of setting the z-index on the absolutely positioned element itself, it needs to be set on a specific parent element. The way to find the which parent element is to look in the structure and find both elements that are overlapping incorrectly.
For our example, we will use html > #wrapper > #header > .navigation > .drop-down and html > #wrapper > #content > .banner. What you need to do is continue backing up each parent element until you find where the parents are siblings. Using our example, it would be html > #wrapper > #header and html > #wrapper > #content
Next, you just need to give each of those parent elements a relative positioning and then set the z-indexes accordingly.
It’s a whole lot more simple than reorganizing your entire structure, and it accomplishes the task of using z-indexes on relatively positioned elements, and their absolutely positioned children, with no side effects.
