I'm working on a tricky design with several layers, and it requires me to layer a div between two other overlapping divs in a separate container. Here's my simplified example which works in Firefox, but not IE6 (which is of course the client's browser of choice): http://dawnup.com/sandwich
Source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div {
width:200px;
height:200px;
position:absolute;
}
#middle {
background-color:#aaa;
left:30px;
top:30px;
z-index:1;
}
#bottom {
height:200px;
background-color:#777;
left:0px;
}
#top {
background-color:#ccc;
left:40px;
top:40px;
z-index:2;
}
</style>
</head>
<body>
<div id="middle">MIDDLE</div>
<div id="container">
<div id="bottom">BOTTOM
<div id="top">TOP</div>
</div>
</div>
</body>
</html>
Is there a trick to getting this to work in IE6? Or is this kind of overlapping impossible?
Thanks in advance