CSS - Absolutely positioned divs are not sticking to right edge when "right:0px" in IE6

Question

I found an example here of using rounded corners using a single image. I've got this working perfectly in IE7+ and FireFox.

The following is an example tab layout:

<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test 1</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 2</p></div>
</div>
<div class="tab"><div class="corner TL"></div><div class="corner TR"></div>
    <div class="inner"><p>Test - 3</p></div>
</div>

The following is my CSS Style:

.corner
{
        background:url(../Images/LightCorner.gif);
        position:absolute;
        width:13px;
        height:13px;
        overflow:hidden; 
}

.inner
{
        position:relative;
        padding:13px;
        margin:0px;
}

.inner p
{
        padding:0px;
}

.tab
{
        color:#FFF;
        float:left;
        font-weight:bold;
        margin-right:5px;
        position:relative;
        text-align:center;
}

.tab p
{
        margin:0px;
        padding:0px;
}

.tab
{
        background:#B5B5B5;
}


.TL
{
        top:0px;
        left:0px;
        background-position:0px 0px;
}
.TR
{
        top:0px;
        right:0px;
        background-position:-13px 0px;
}

.TL, .TR
{
        margin:0px;
        padding:0px;
        position:absolute;
}

The issue is that when my div's width is an even number, I end up with a 1px right-hand border, as though the top right div is actually being positioned as right:1px. When the width is an odd number I do not see the right hand grey colour of the tab and the div is displayed as expected.

The image I am using can be found here. A full example can be found here.

Why is the top right div not being positioned correctly at right:0px? Why do I end up with a 1px gap in IE6 when the tab width is an even number?

Answer 1

Have you tried

body { margin: 0; }

Answer 2

Try with:

right:-1px;

for IE6

Answer 3

The issue is that when my div's width is an even number, I end up with a 1px right-hand border, as though the top right div is actually being positioned as right:1px. When the width is an odd number I do not see the right hand grey colour of the tab and the div is displayed as expected.

There is nothing with your code, it is a bug in Internet Explorer 6. When absolute-positioning things to the right or to the bottom, the actual position will be rounded to 2px, giving 1px "margin" when the total width/height is even (or odd). Unfortunately, you need JavaScript to fix that.

You can check this example (written by me) and slowly resize the IE6 window, pixel-by-pixel. You will notice that the position of bottom and right boxes will be updated only once every two pixels. Another guy has also found and documented this bug on his site.

I've already written one to fix height-calculation when positioning top and bottom, and leaving height as auto. I use this script on this site. In your cause, this script can be modified to calculate the left-offset based on available_width-(right+width).