This had bugged me for a while. A lot of sites (including some of the ones I develop) tend to have a fixed width layout these days and some browsers (IE particularly) ‘always’ has a visible scrollbar. This means that the available screen width is constant whether the page scrolls or not.
Firefox on the other hand (and Chrome/Opera/Safari) seem to have this off by default. This of course seems reasonable until you have a fixed width, centred layout that ‘shifts’ when you switch from a non-scrolling to a scrolling page. It’s just a bit off-putting.
Fortunately Firefox is configurable and the following will fix that up for you. (I’m sure the other browsers are capable of something similar but I’m not using them much 🙂 )
- Find your profile directory (it’s bound to be the ‘default’ one unless you’re developing Firefox addons. You’ll normally find it in c:\documents and settings\username\application data\Mozilla\Profiles\xxxxx.default\
- Go to the ‘chrome’ subfolder and create a file called userContent.css (you’ll probably find there’s a couple of ‘example’ files there already.
- Add the following (Firefox-specfic) line to the file:
html { overflow: -moz-scrollbars-vertical !important; }
- Save the file, exit Firefox and start her up again. You should now have a permanent scrollbar which eliminates the page shift.