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>
    ul.main > li {float:left;}
<ul class="main" style="position: relative;">
<ul style="position: absolute; top: 10px; left: 10px; z-index: 125;">
<div id="cont" style="position: relative; z-index: 10;"><img src="image source" alt="" width="" height="" /></div>

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.

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

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

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s