Menu
This is giving me such a headache. I am having problems in IE (6/7) with the code below.
I have a number of container items on a page which are relatively positioned. Inside one of them is a absolutely positioned item. This inside item should appear OVER any of the container items. This appears correctly in Safari and Firefox but not in IE.
I have included a very pared down example of this for you to see. I can not remove the position: relative; on container or position: absolute; on the inside item because this will eventually be an html dropdown item.
Thanks so much for your help.
Preview here.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link href="http://www.louiswalch.com/common/css/reset.css" type="text/css" rel="stylesheet">
<style type="text/css">
BODY { padding: 20px; }
.item {
margin-bottom: 5px;
padding: 5px;
background-color: orange;
position: relative;
float: left;
width: 300px;
}
.item .display {
background-color: red;
}
.item .inside {
padding: 5px;
background-color: yellow;
position: absolute;
top: 23px;
left: 10px;
width: 100%;
z-index: 5000;
}
.clear { clear: both; }
</style>
</head>
<body>
<div class="item">
<div class="display">Item</div>
</div>
<div class="clear"></div>
<div class="item">
<div class="display">Item (Open)</div>
<div class="inside">This is inside<br/>more<br/>more</div>
</div>
<div class="clear"></div>
<div class="item">
<div class="display">Item</div>
</div>
</body>
</html>
606
In IE, you can't have a div with a higher z-index than its container so if you want to make the "inside" element pop out above other divs then its container must be above those elements as well (not sure what the standard is, but the IE way does seem to make more sense, logically speaking).
In your example, do this...
<div class="item" style="z-index:5000">
<div class="display">Item (Open)</div>
<div class="inside">This is inside<br/>more<br/>more</div>
</div>
....and your menu will now be above the bottom item like it does in FF.
Ideally, you'll want to just create a style called "itemOpen" or something that has that z-index property set up like this but even the style attribute will do the trick.
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
