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

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

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.

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