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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s