CSS: positioning absolute divs in a relative div container (IE bug)

Question

Hi guys, i have the following markup (i have stripped out the content by the way)

<div id="playArea" style="position: relative">
    <div class="widget" id="widget2" style="position: absolute;width:153px;top:282px;left:243px;" ></div>           
    <div class="widget" id="widget8" style="position: absolute;width:278px;top:-2px;left:446px;" ></div>            
    <div class="widget" id="widget24" style="position: absolute;width:363px;top:-1px;left:16px;" ></div>
    <div class="widget" id="widget30" style="position: absolute;width:200px;top:-1px;left:233px;" ></div>
    <div class="clear">&nbsp;</div>
</div>

This markup is about half way down my page in firefox 3, displaying how i want it to but in IE 6 and 7, everything is fine apart from the last div (widget30) which is showing at the top of the playArea container. Any ideas about how i can fix this in IE?

Thanks

Answer 1

It works the same for me in IE 6 and 8 and Firefox. Sure you aren't leaving something out?

Answer 2

You have "top:-1px"

Which means it's going to be positioned 1 pixel ABOVE the TOP of the positioned parent, which is your playArea div.

So, it sounds like it's doing what it should be doing.