The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

1px problem at ie

hi all,
i really really need your help. i got a weird problem with css and ie at a page i'm doing for my diploma.
you can visit the page here.
everything works fine with mozilla, firefox, opera, konqueror and safari. but with ie i'm getting a weird problem.
on the right i have an absolute positioned element with the pic and the elements "Hilfsmittel für Barrierefreiheit" and "Weitere Links". it ends here, the rest of the grey column is the background-color of another element.
in ie6 it seems as if this absolute positioned element is moved 1px to the left and overlaps the darkblue border (the border is from the content-element). when you resize the window slowly you'll see that the absolute positioned element is moving 1px to the left and right in turn.
i'm searching for a solution since a few days now...but found noone with the same problem. i'd be so happy if i got this problem solved....!!
thanks for your help!!
jule

This is a big problem in ie when trying to line elements up exactly. Ie has a rounding bug that as you see goes up and down by 1px depensing on the size of the screen. This is also noticable on background images in the body that need to line up with other images.

The same rounding problem occurs when you add to or three elements together to make 100% and Ie makes them bigger than 100% resulting in the layout breaking.

The solution is usually to place things that need to line up in the same stacking context so that the co-ordinats are taken from the element that is being rounded incorrectly. In your case this would mean lining up your right column based on the co-ordinates of the centre content .

One way to do this would be to float the right column inside your centre content and then drag it outside the centre content with 145px negative margin.

There may be other ways to do this with absolutely placing the right content in respect of a stacking context on the centre content and again dragging it wise.

The example above renders correctly in ie and firefox but I understan if you didn't want to make that big a change.

The only other answer would be to make your right content 1px smaller so that there is a space of 1px and the border will not disappear but a small gap in the right content would appear which isn't so noticable.

This is very old topic, but I found another solution on this issue and I'd love to share it!

If you're dealing with background images which are to be lined up exactly, you can extend a background image to 1px with exactly the same colors on 2px right corner.
set absolute positionning to -1px so other user agents will show only 1px of the corner. ie6 will show 1px or 2 px. This is gonna work out if only backgrounds transform one into another smoothly.

PS: This is not a 100% solution comparing to Paul O'B's but this does'n involve changes into the code.