Position absolute for rounded corners and problems in IE6

Question

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">&nbsp</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?

Answer 1

The only way I could find the make this work for IE6 is to add
margin-top: -1px;
margin-right: -1px;
to the topLeft class, but unfortunately that will mess up the display in other browsers