Position absolute for rounded corners and problems in IE6
Posted
by danit
on Stack Overflow
See other posts from Stack Overflow
or by danit
Published on 2010-06-09T18:27:18Z
Indexed on
2010/06/09
19:22 UTC
Read the original article
Hit count: 285
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?
© Stack Overflow or respective owner