IE yet again is proving to be the bane of my existence. The top of a site I'm working on has a horizontal
menu, an item of which triggers a pure-CSS
menu that is positioned absolute within the parent
menu DIV (positioned relative). This places the
menu perfectly in both IE and the W3C compliant browsers.
The problem arises when I have more positioned elements further down on the page. These are also positioned relative, because there is data inside them that needs to be positioned absolute... again, this displays properly in all browsers I've tested it on.
The problem is, that then the top
menu is opened, part is obscured by the positioned elements further down the page - in effect, it's positioned BELOW these elements even though there are z-index properties defined on all. (in both the CSS file and inline).
The only way to get IE to display this properly is to place the actual HTML for the
menu at the bottom of the page, below (in DOM terms) the positioned elements elsewhere on the page. I would only do this as an absolute last resort.
All Elements are the same type (div). Here is the relevant HTML:
<div id='
menu'>
<div id='cat_menu' style='display:none;z-index:10000;'>
<table cellspacing='0' cellpadding='0' class='brmenu' width='100%'>
[data]
</table>
</div>
<div class='product_new' style='z-index:20;'>[data]</div>
<div class='product_listing' style='background-color:#FFFFFF;'>[data]</div>
And the relevant CSS:
div#menu {
height: 26px;
padding: 0;
position: relative;
}
div#cat_menu {
position: absolute;
top: 25px;
left: 115px;
width: 300px;
z-index: 1000;
}
div.product_new {
background-image: url("/images/sp_images.png");
background-position: 0 -108px;
background-repeat: no-repeat;
padding 0px;
height: 40px;
font-size: 9pt;
margin-top: 5px;
position: relative;
z-index: 20;
}
