Browser Compatibility Issues – Part IV

z-index has its issues with IE7. I tried going over many forums to see how to have it solved.
One of the forums exceptionally useful is: Squish the Internet Explorer Z-Index Bug
which actually discussed the problem I was having at that time.
I know there are more issues to z-index with IE7 than this one mentioned in this post.

So basically that forum explained something that I’m still trying to understand since it is the way IE7 is interpreting it:

There’s a hover effect of a dropdown menu in the page, the dropdown has a position absolute.

<!doctype html>
<style>
    ul.main > li {float:left;}
</style>
<ul class="main" style="position: relative;">
	<li>main1</li>
	<li>main2
<ul style="position: absolute; top: 10px; left: 10px; z-index: 125;">
	<li>sub1</li>
	<li>sub2</li>
</ul>
</li>
</ul>
<div id="cont" style="position: relative; z-index: 10;"><img src="image source" alt="" width="" height="" /></div>

Problem
The problem with this code is that no matter the z-index of the cont div is, it still would show above the hovered menu which is hovered over it, even though the hovered menu has a higher z-index.

Solution
add a z-index in the parent ul.main to be less than the contained ul’s z-index
i.e.

ul.main, ul.main > li {z-index:50;}
Advertisements