IE6 1px gap on absolute elements

I get a number of requests for help with rounded corners each week and the common problem is that ie is one pixel out on the bottom corners and on the right corners. The user then applies a hack for ie to offset the 1px gap only to find that on other elements its fine.

The actual problem is that IE6 and under (ie7 seems to be ok) has a nasty bug and it gets "bottom" and "right" positioning wrong but only when the parent has a pixel height or width that is an odd number. To demonstrate the problem I have constructed a number of elements with heights and widths ranging from 199px to 205px where a little square block is placed absolutely at the bottom and right of each. The only change in the code is the height and width of each block.

In case you are another browser at the moment here is a picture of the problem.

You can see that the odd size container exhibits the 1px gap but the even sized container is fine.

What can be done?

The truth is that there is not a lot that can be done. In a fixed height container you can specify the exact top position of the element and then it will be exact e.g. top:166px. Of course you would have to change that for every example that I did above. In a fluid height container it would not be much use as the height changes as the page is resized and the elements pops in and out of position.

One way to get around this problem is not to use absolute positioning at all and to place the corner element after the main element and then drag it into position with a negative margin. As the example above uses floats then the corner element must be floated also because margins will slide under the float otherwise and appear as though they are not working. We can also float the top right corner into position as well.

Here is the above demo using the method I outlined above.

As you can see the corners are now exact and there is no pixel gap at odd height sizes.

Of course if you have a single image that is for decoration like a corner then you can simply place the image in the background of the parent and the background-position of bottom gets rendered correctly by IE which is very strange.( If it can get the background position of bottom correct then why can't it get the absolute position of bottom correct? Answers on a postcard please.)

However most times people would be applying 4 corners and would still try to absolutely place the bottom and right images. Again the answer is to use existing static elements to place the corners or to wrap extra static or floated divs around the element and use them for the backgrounds. However the point of this exercise was top show the 1px gap on absolutely positioned elements and if the image is important to content then a background solution is not the most semantic and the method I have described should work nicely.