I have a problem with bottom rounded corners of a box in IE... example (open in IE to see the problem)
So If I remove header div than bottom corners (only in IE) will be positioned incorrect. Where could be the problem? And is it IE bag or my own bag? :)


HERE IS A CODE

<div class="block">
<!-- TOP CORNERS --><div class="btl"></div><div class="btr"></div> <!-- END OF TOP CORNERS -->

<div class="header">some text</div> IF I REMOVE THIS LINE BOTTOM CORNERS WILL BE POSITIONED INCORRECT
<div class="box">
test<br />
test<br />
tes<br />
</div>

<!-- BOTTOM CORNERS --><div class="bbl"></div><div class="bbr"></div><!-- END OF BOTTOM CORNERS -->
</div>

<style>
.block
{
width: 500px;
border: 1px solid #3871a7;
position: relative;
margin: 5px 0;
}

.block .btl
{
position: absolute;
left: -1px;
top: -1px;
background: transparent url(/img/b2b/new/tl.gif) no-repeat;
width: 3px;
height: 3px;
line-height: 0;
font-size: 0px;
}
.block .btr
{
position: absolute;
right: -1px;
top: -1px;
background: transparent url(/img/b2b/new/tr.gif) no-repeat;
width: 3px;
height: 3px;
line-height: 0;
font-size: 0px;
}
.block .bbl
{
position: absolute;
left: -1px;
bottom: -1px;
background: transparent url(/img/b2b/new/bl.gif) no-repeat bottom;
width: 3px;
height: 3px;
line-height: 0;
font-size: 0px;
}
.block .bbr
{
position: absolute;
right: -1px;
bottom: -1px;
background: transparent url(/img/b2b/new/br.gif) no-repeat bottom;
width: 3px;
height: 3px;
line-height: 0;
font-size: 0px;
}
.box
{
clear: both;
}
.block .header
{
background: transparent url(/img/b2b/new/back.gif) repeat-x;
height: 17px;
font: bold 11px Verdana;
padding: 0 0 0 5px;
color: #FFF;
}
</style>

mochikit has an ajax implementation of rounded corners, havnt tried it but looks to be unobtrusive, give it a shot. It's not perfect, but it is unobtrusive and a new approach to an old problem

http://mochikit.org/examples/rounded_corners/index.html