I'm having issues with centered items in Firefox 3. (I searched and couldn't find this answered -- hopefully not a re-post)
I stripped the code down to just two elements to demonstrate this -- you can see it here: http://prwmusic.com/misc/csstest/home-sample-fix.html
Now slowly make the browser window wider and narrower. Assuming you are using Firefox 3, do you see how the white background is popping in and out on the left side of the blue DIV with every other pixel you are dragging wider or narrower? Yet IE6, IE7, Safari, and even FF2 are fine.
What I have done is created one DIV and added a "white page with shadow background" to that DIV so that visitors can make the browser as narrow as possible before the horizontal scroll bars show up. Then there is one nested DIV that has a blue background. The white area in the background and the blue-colored div are both 970 pixels wide so they should both always match up since they are both centered.
What appears to be happening is that when the window size is an odd number, Firefox adds 1 to the right side of the background image, but it adds 1 to the LEFT side of the foreground which throws everything off.
The first thought might be "just include the blue in the background image". But the actual design of the project I am working on is rather complex and this oddity happens throughout the site, all up and down parts of the pages -- it's not an option for me to have the blue be part of the background. I'm only using this simple example to demonstrate.
Is there any way to keep the items always aligned in Firefox 3 to ensure that if someone's browser is at an odd width there are no display oddities? (obviously, without breaking it in all the other browsers)