IE6 absolute positioning in parent with odd width
One of the guys I work with found an interesting browser issue this week. He was using absolute positioning to position an element to the right of a box which was an odd number of pixels across. He noticed that in IE6 the child element was one pixel away from where it was in other browsers.
In IE6
In IE7
Simple test case
Here’s a simple example of the HTML:
-
<div id="container">
-
<div id="inside">
-
</div>
-
</div>
Here’s a simple example of the CSS:
-
#container
-
{
-
position: relative;
-
width: 301px;
-
height: 200px;
-
background-color: pink;
-
}
-
#inside
-
{
-
position: absolute;
-
width: 20px;
-
height: 20px;
-
right: 0px;
-
_right: -1px;
-
background-color: yellow;
-
}
Workaround
If you can’t use an even number of pixels for the width of the parent box, just to use the underscore IE6 hack to provide an adjusted right value just for IE6 that all the other browsers will ignore:
-
#inside
-
{
-
position: absolute;
-
width: 20px;
-
height: 20px;
-
right: 0px;
-
_right: -1px; /* for IE6 */
-
background-color: yellow;
-
}