As we all know Internet Exploder (Explorer) does not play well with others. I spent the last couple hours pounding my head against the keyboard fighting the Z-Index Bug.

The Setup

Thanks to Simon over at webdemar.com for pointing me in the right direction. His solution envolved forcing the parent of the menu (in our example div.site-nav-content) to a higher z-index level than the content being served up. In my specific instance it wasn’t quite enough so i had to take it one step further.

The Solution

In my IE7 specific Screen style-sheet I created a couple entries:

1. Create a default z-index for everything *{z-index:1;}
2. Set a high z-index for my menu container .site-nav-content{z-index:900;}
3. Set a high z-index for everything within my menu container .site-nav-content *{z-index:900;}

Final Source

Delicious Digg This Post Reddit Stumble This Post