Home/ Questions/Q 462449
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T23:04:32+00:00

I am rendering a small menu in the upper right-hand corner of a web

  • 0

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 (1024×80 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0