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 paired 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: http://tinyurl.com/r9njq8
<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>