1px Background Image Shift
I'm still fighting my way to understand CSS - so if there's a better way to do this, feel free to let me know.
I wanted a black center column, that I would put content boxes with a white background over it. So I created my background with the centered black column, used CSS to center it and repeat the background vertically. Then I created my content box, centered that using "margin: 0 auto;". As per usual, looks great in Firefox, but IE has the box shifted over to the left by 1px.
Poked around online. First I found this article which was talking about a different kind of shifting. They wanted you to add "html { min-height: 100%; margin-bottom: 1px; }" to your styles so that the page doesn't shift suddenly when scrollbars appear on one page and not the other. (what they have you add forces scrollbars to show on every page)
Then I found this article which explains what's happening. Because I'm centering the background via one method, and the content via another - this is the reason why it's different. They suggest using a wrapper div to center the background - thus centering everything via the same method. The only problem with this is that I wanted that black column to extend the full height of the browser window. (below the content). Just doing "height: 100%" didn't seem to work.
So I happened to have still put the code in for the scrollbar thing, and just for kicks added a 1px margin to the left side… and strangely it works. (At least on IE and Firefox on the PC. I don't have access to a mac anymore, so no idea what happens there).
I'm happy I got it to work.. but I'm not sure why it does.
October 12th, 2007 at 6:47 pm
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.
January 30th, 2008 at 5:43 pm
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.
September 12th, 2008 at 10:04 am
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.
October 6th, 2008 at 11:36 am
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