Sandwich div between two other divs in separate container in IE6

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

Answers


Why can't you just move the #top element so it's not within bottom?


Need Your Help

how to use results from database in jquery

javascript php jquery sql

HOW TO LOAD THE CONTENT FROM '.$user['Content'].' in text field?

awk : if >=4 lines in a row begin with + or - don't print record

bash shell awk gawk

I'm trying to use awk to read a file and only display lines that do no begin with a + or - 4 or more times in a row. gawk would be fine too. Each grouping is separated by a blank line.