Position absolute for rounded corners and problems in IE6
- by danit
Im using position absolute to give the top left corner of a DIV a rounded corner.
HTML:
<div id="MyDiv">
Some content
<div class="topLeft"> </div>
</div>
CSS:
#MyDiv {
position: relative;
padding: 12px;
background: #fff url('graident.png') repeat-x top left;
}
.topLeft {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: transparent url('corner.png') no-repeat top right;
}
This works fine in all browsers expcept IE6.
In IE6 the corner.png image seems to be about 1px out at the top corner, essentially not top: 0; and right: 0; but more like top: 1px; right: 1px;
Can anyone explain why this might be happening only in IE6?
