Comments on: 1px Background Image Shift

By: C

Tue, 27 Jan 2009 19:11:13 +0000

This was driving me nuts tonight too – I'm so glad I found this article! I had FF shifting one pixel to the left on a background image, yet Safari was fine. The trick of adding the negative .1px margin as mentioned by Brad solved it for me.

By: Atom

Atom — Thu, 04 Dec 2008 00:17:13 +0000

Found this hack that seems to solve the problem: http://developedtraffic.com/2005/09/23/css-ie-one-pixel-image-offset-hack/ It involves giving IE one margin and all other browsers a different margin. Any non-hack method that anyone finds would be appreciated.

By: Atom

Atom — Wed, 03 Dec 2008 23:53:15 +0000

I have been trying to solve this bug all morning! I'm glad it wasn't just me or any sub-par CSS skills I may have.

The same exact issue: I have a background image and a centered div with a background image. Now make the two line up pixel perfect in both IE6 and Firefox/Chrome…on one browser it is perfect, the other is shifted by one pixel.

If anyone comes across a solution, please post!

Atom

By: Nathaniel

Nathaniel — Mon, 06 Oct 2008 18:36:28 +0000

I have a problem with a site I'm developing which maybe related. For such a small issue it is VERY annoying…especially as I cannot pinpoint what is causing the issue.

I have a centered horizontal background slice which repeats (y-axis) underneath my main wrapper for all of my content (header, menu, content , footer etc).

IE6 and 7 behave the same, Firefox does it's own thing and so does Safari.

URL
http://www.cleancuisine.co.uk/index.asp

CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
color: #333333;
background-color: #f6921e;
margin: 0px;
background-image: url(../media/gfx/clean_cuisine_slice.gif);
background-repeat: repeat-y;
background-position: center;
text-align: center;
}
#wrapper {
width: 960px;
margin-right: auto;
margin-left: auto;
height: 100%;
text-align: left;
}

The slice is 1040px wide with a 960px wide white area to give the shadow effect on the outside.

EI6/EI7
Looks like the background has moved over to the RIGHT by 1px.

Firefox
All pages okay except "http://www.cleancuisine.co.uk/services_pricing/index.asp" where the background has moved LEFT by 1px.

Safari
All pages okay except "http://www.cleancuisine.co.uk/services_pricing/index.asp" entire page shifts slightly – probably another issue.

If anyone has the time I would appreciate some advice?

Thanks

By: Brad

Brad — Fri, 12 Sep 2008 17:04:15 +0000

I had the same problem when updating our website.

To prevent this 1 pixel shift in Firefox I added margin-left: -.1px to the content div (thats a negative 0.1 px). This fixed the shift in Firefox 2 and 3 while still working for IE7. Of course this is not ideal, but it works.

This did not fix the problem for Internet Explorer 6 (IE6). I minimized it by color choice in my centered background image.

By: Ryan

Ryan — Thu, 31 Jan 2008 00:43:17 +0000

From what I gather, it has to do with simple math. There's no such thing as a half pixel in web development. So when the view port decreases or increases by 1px, the rendering engine has a choice. Whether to move the bg image over one pixel or wait till the next 1px respective change. Seems IE rounds either up or down, while FF rounds either down or up.

With conditional comments, I created two background images, one is 1px wider than the other, otherwise identical. But served the wider to IE and the slimmer to FF, both browsers now properly calculate the background position now.

By: Jackie Bese

Jackie Bese — Sat, 13 Oct 2007 01:47:18 +0000

I ran into this same problem… it seems to work in IE but your page linked above does not work in Firefox. Has the browser potentially been upgraded and this no longer works?

I looked at the page:http://www.scriptygoddess.com/resources/1441test/test2.html

in both IE & Firefox. IE it was okay, little black line down the side in Firefox.