This is one of those situation i think most developers find themselves running into somewhere down the line. You’ve created you CSS template using margin:0 auto and everything looks great in the different versions of IE, Firefox, Oprea, Safari etc but for some reason your centering starts to jump all over the place when you click between various pages in Firefox. What’s going on here then?…
The answer is quite simply, some browsers like Firefox don’t display vertical scroll bars unless required and as a result your template’s centering begins to jump around (16px to be exact) when you navigate between a page that has a height that requires scrollbars and one that doesn’t. Its obvious now, i hear you cry! Don’t worry, i did the same… Doh!
The Solution to Firefox Centering Issue
Don’t worry there’s a simple solution to this centering and as usual, CSS comes to the rescue. The solution is to force vertical scrollbars.
There’s actually a few different ways to fix this scrollbar issue but here’s my favourite:
html {
overflow-y: scroll;
}
Last time i checked this centering fix worked in Firefox, Safari, IE6 and Opera.
