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.