fix 1 px shift to left error IE?

[digitalecartoon]

Read that IE can sometimes have a 1px rounding error shifting centered backgrounds 1 pixel to the left? Is there a fix for this?

What would one have to fix in below code to also make it work in IE (it works in FF)? The background image is 1000 px wide.

<style>

{
margin:0px;
padding:0px;
}
body {
background:url(backgroundimage.jpg);
background-repeat:repeat-y;
background-position:center;
margin:0px;
}
#c {
width:800px;
height:auto;
margin:0px auto;
background:#0000CC;
overflow:hidden;
float:none;
}

</style>

[WebJoel]

{
margin:0px;
padding:0px;
}

Is meaningless with a Selector. I assume, you want the "universal selector", so:

* {
margin:0px;
padding:0px;
}

[digitalecartoon]

You're right but that didn't fix the error in IE. It has something to to with how IE centers the background. Or the c-container of 800 px, but it displays 1 pixel to the left of the background image.

And it only does that in IE. In FF both the c-container and background image are centered perfectly. Why? And how to fix it?

[WebJoel]

Is there a URL, or can you post the entire code?

[digitalecartoon]

Enclosed the html page and the backgroundimage. As you can see it works ok in FF, but in IE it shifts 1 pixel to the left, showing a 1 pixel white line at the right.

[Centauri]

This is a well known problem and a left padding of 1px on the body will resolve it in most cases.

[digitalecartoon]

That fixed it ;-) At least when the browser window is maximised. Otherwise the 1 pixel shift is on the other side.

But can you also explain why this extra left padding works? And why it doesn't make FF shift everything 1 px to the right?

[Centauri]

This is due to maths rounding errors in IE, where it tends to round up when calculating the centre position of the body background. Firefox will still round down when calculating the auto margins, effectively cancelling the extra pixel until the screen width gets down close to the div width.

A slightly better way is to shave 1 pixel off the left edge of the background graphic, so that the graphic is an odd number of pixels wide and the site divs are an even number - this does not produce any offset at all in FF and behaves a bit better at smaller screen sizes in IE.

[WebJoel]

I can't say as though I have ever encountered this pixel-rounding error in my own builds, -wondering though, -if using a background-color and a background-image, -wouldn't this 1-px error be painted-in and thus, not an issue? I always include background-color (it's an Accessibility thing) and haven't ever had any issue with this well-known IE error.

[Centauri]

The problem occurs only when using a vertically repeated body background to provide a fixed width site's boundaries, usually done so that a shadow/gradient effect can be used either side. When the central section is white, as in this case, a dark item intended to be full width of the site will show it up quite markedly. The problem does not occur if the background is on another element, only the body. Adding another wrapper div is quite often not an option as this means the minimum width of the site will include the shadows/gradient.

Whilst the left body padding is the usual fix, I discovered some time back that odd/even background/site widths works a bit better.