Z-Index Issues in Internet Exploder

I have a really bad habit of getting too far along before I take a look at my site in Internet Explorer. I think it might have to do with the fact that I hate IE with all my heart and soul. I just wish that it would go away and everyone would use 1. Chrome, 2. Safari or 3. Firefox. Anyhow, the reason for my anti-IE rant tonight is based on a 3 day struggle (okay not 3 full days) with what turned out to be a z-index issue.

I am currently redesigning my employer’s web site. I use Dreamweaver so creating drop-down menus is a snap using Spry. After previewing the index page in the browser I noticed a familiar problem. The index page has a flash animation as it’s main content and the items from the drop-down menu were appearing behind the flash window. Simple fix as I had been through this before. Just change the wmode parameter of the flash file to transparent and pat myself on the back for a job well done. Well, it didn’t work. The first day and a half was spent trying to figure out why changing the wmode worked on another site I had built in the past but not this one. I was about to pull my hair out, such as it is, when I realized that the menu was not just appearing behind the flash animation but any content in the div below it. That’s when it hit me that it was a z-index issue. Once again, simple fix. Just assign the div containing the navigation a higher z-index than the div that appears below it. Didn’t work. The second day and a half was spent searching for a solution and then blindly applying position and z-index attributes to various divs in the header element and the content element. I was about to pull my hair out (such as it is) when I stumbled upon the answer found at http://verens.com/archives/2005/07/15/ie-z-index-bug.

In Internet Explorer z-index values are relative to the containing div. The only way that a div with a higher z-depth will appear over one with a lower z-depth when relatively positioned is if they share the same parent. What this meant was that the z-index value given to the navigation div which inside the header div had no relation to the z-index of the content div. The content div would always appear on top of the navigation div as it came later in the document flow. The fix was indeed simple but I just didn’t see it. I simply applied the z-index value to the entire header div instead of the navigation div. Since the header div and the content div shared the same parent div the z-index values were applied in the same context and any content in the header, such as the drop downs from the navigation, would appear on top of any content in the div with the id of content.

So, to review -

• Each relatively positioned div in IE starts a whole new z-index context.
• Content in divs that appear later in the document flow will appear above those appearing earlier
• To layer content of relatively positioned divs in IE the divs must share the same parent div

A problem that had me baffled for 3 days (okay, okay, not 3 actually days) took less than 60 seconds to fix once the solution presented itself. Ah, the wonderful world of web design. I wouldn’t trade it for the world.

Posted in Web Design and Development | 2 Comments »