Why is the rendering of this CSS such a problem for IE 6?

Question

I am rendering a small menu in the upper right-hand corner of a web site. There will always be a "Banner" graphic across the top of the page (1024x80 pixels) and the menu must render on top of it. In IE 7, IE 8, FireFox and Safari, the menu looks fine. In IE 6, however, the menu does appear sometimes and fails to appear at other times with no discernable pattern. In the CSS shown below, I placed the "z-index" in the class definitions after reading that this was a fix for some CSS problems of this type in IE 6. However, there is still no joy in Renderville. ANY help will be appreciated!

Here is the CSS defined for the page, the header and the menu:

Div.XPage { background-color: White; position:relative; width:1024px; border-left:1px solid #a4a4b1; border-right:1px solid #a4a4b1; margin:auto; text-align:left; z-index:10; }
Div.XHeader { background-color: White; clear:both; padding:0px; margin:0px; z-index:2; }
Div.XTopMenu { position:absolute; left:810px; top: 0px; width:214px; height:16px; background-color:#333333; z-index:3; }
Div.XTopMenuItem { width:70px; height:14px; margin-bottom:3px; text-align:center; float:left; }
Div.XTopMenuItem a { color: White; font-size:smaller; }

Here is the HTML that uses these CSS classes:

<div class="XPage">
    <div class="XHeader">
        <a href='/Home.aspx'><img src="/images/Header.png" alt="Banner Graphic" border="0" width="1024" height="80" /></a>
    </div>
    <div class="XTopMenu">
        <div class='XTopMenuItem'><a href='/Home.aspx'>Home</a></div>
        <div class='XTopMenuItem'><a href='/Calendar.aspx'>Calendar</a></div>
        <div class='XTopMenuItem'><a href='/Logout.aspx'>Log Out</a></div>
    </div>
    ...
</div>

Answer 1

Why z-index 10 for the Page? It's supposed to be way in the background, right? Could you try setting its index to 0 or 1?

Answer 2

IE6 has issues with z-indexing. In IE6 z-index is only respected for siblings.

Things I'd try:

• Reverse the order of menu and header in the html
• Give the header a negative z-index
• Give the menu a more significant lead on z-index than the header, say z-index:999.

Failing those you could try giving IE6 a different header image that didn't cover up where you want the menu to go. In many cases I've strived for IE6 to have degraded support, it's an ancient browser and has way too many problems. So if it's an option I'd consider letting it have a slightly different appearance. Of course that may not be up to you.

Answer 3

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

You do not have these on Div.XHeader thus that z-index is being ignored completely.

Read more about z-index on w3schools

Answer 4

No directly useful info, I'm afraid, just another suggestion in case you're sufficiently desparate:

Google has managed to solve this problem, and many more, in GWT. Hold off on the downvotes, please - I'm not sugesting rewriting the app in GWT. I am, however, recommending to look at their code. In their implementation of various components, they have sections, sometimes whole classes, dedicated to working around particular quirks in WebKit, Opera, IE6... Their code is very clear and well commented, often including not just "what" but also "why".

How effective this approach is will depend on how good you are at zeroing in on relevant code (in Java), understanding it and moving the implementation of the essentials to your own code.