Giving height to absolutely positioned DIVs in IE6

Question

It's almost 2010 and I'm still dealing with IE6 bugs. sigh.

So, here's a new one (to me) that I'm having trouble finding a answer to via google. I'm creating a DIV with an inner-shadow. The div needs to be flexible in width and height. To accomplish this, I'm giving the DIV a background image of the inner-shadow. I then add 3 additional absolutely positioned divs within for the other 3 corners (top right, bottom right, bottom left) and give them each heights so they overlap.

This works great in every browser except (no surprise) IE6. In IE6, the absolutely positioned divs don't have any height. I've tried using zoom: 1 to trigger has layout, but that didn't do it. Anyone know of a fix for this?

<div class="rounded" style="
    width: 80%;
    max-width: 950px;
    margin: 10%;
    height: auto;
    background: url('images/bgnd-shadowbox-dark.gif');
    position: relative;
">

    <div class="rounded" style="
        width: 50%;
        height: 75%;
        position: absolute;
        top: 0px;
        right: 0px;
        background: yellow url('images/bgnd-shadowbox-dark.gif') top right;
        ">
    </div>
    <div class="rounded" style="
        width: 60%;
        height: 30%;
        position: absolute;
        bottom: 0px;
        right: 0px;
        background: orange url('images/bgnd-shadowbox-dark.gif') bottom right;
        ">
    </div>
    <div class="rounded" style="
        width: 50%;
        height: 25%;
        position: absolute;
        bottom: 0px;
        left: 0px;
        background: red url('images/bgnd-shadowbox-dark.gif') bottom left;
        ">
    </div>


    <div style="
            position: relative;
            border: 3px solid green;
            margin: 3em;
            "> 

        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>

    </div>
</div>

UPDATE: To clarify the issue (since I think the corner issue is a red herring): How can one have an absolutely positioned DIV inside a relatively positioned div and have that nested DIV adhere to a percentage height attribute in IE6?

UPDATE 2: More info: If the container div is given an explicit height, this works. The problem is when you want the container div's height to be based on the relatively positioned div's height. It appears that IE6 just can't figure that out.

Answer 1

Maybe im missing something abotu your image construction but why not just use positioning on the 3 corners.

.corners .right-top {top: 0px; right: 0px;}
.corners .bottom-top {bottom: 0px; right: 0px;}
.corners .bottom-left {bottom: 0px; left: 0px;}

Answer 2

this worked for me, I did have an &nbsp inside the empty div. in the css I used the following

*height:1px;
*padding:2px 0px;
*line-height:4px;

' * ' says its only recognized by IE6 the div height is 4px.