Page 1 of 1 One of the most popular types of web designs today is the centered, fixed-width layout, seen across the web on a plethora of blogs and sites such as A List Apart, SimpleBits, and even MSN. This sort of design is likely so popular because it is so easy to create — plop a div on the page called #wrapper or something similar, assign it your chosen width and auto left and right margins in the style sheet, and start dropping in your subdivisions and content. But this layout does have one sinister side effect in many browsers — the dreaded page shift!
Many web developers will have happily developed a centered, fixed-width site and be clicking through the completed pages only to notice a strange jump between certain pages that occurs in Firefox and other Gecko browsers, Opera, and Safari. The content will shift slightly to the left or the right when moving between pages, and it appears to be at random.
There's actually a very simple explanation for this. When you move from a short page, where no vertical scrollbar is needed, to a long page, you all of a sudden have a 16-pixel-wide scrollbar taking up space in the viewport. The long page has 16 pixels worth less width in which to center your layout, so everything shifts to the left. In Internet Explorer (IE) (and older versions of Opera), space is reserved for the vertical scrollbar even when it is not needed, so this shift never occurs.
Whether or not the vertical scrollbar should always show (as it does in IE) or only show when it's needed is a matter of intense debate that no one can agree on. Either option may disrupt certain types of designs. I personally don't mind the shift at all, and most users aren't going to notice it, since it rarely occurs unless they run their browser windows very large. But, if you're one of those people who is driven crazy by it, or have a client who is, there is something you can do about it.
You can add some simple styles to your site's style sheet to force a vertical scrollbar to always show and thus get rid of the page shift. The most obvious solution is to add an overflow: scroll rule to the html element. However, this rule adds a horizontal scrollbar as well, which web users definitely don't like. Here's an easy and valid way to force only the vertical scrollbar to appear, no matter what size the viewport is:
html { min-height: 100%; margin-bottom: 1px; }
This adds a tiny amount of vertical scroll — one pixel, to be exact — so users will not think they are missing any content that they need to scroll down to. Before implementing this, however, make sure that the pointless scrollbar is not more annoying to your client than the page shift — everyone has their own preferences, and some people can't stand persistent and unneeded scrollbars.
Some people are so bothered by the page shift that they will not use Firefox to browse the web, and wish it gave you the ability to stop the auto-hiding behavior of the vertical scrollbar. Well guess what — it does. Every browser has a default style sheet that is applied to all pages and is responsible for the default margins, link colors, bullet types, and other standard formatting you see across the web. Firefox lets you customize its default style sheet to your liking.
To do so, just create a file called userContent.css in the chrome subfolder of your Firefox profile folder. There will already be a file in there called userContent-example.css that you can just rename and add your rules to. If you don't know where your profile folder is located, you can either find out from the knowledge base on mozillaZine, or take the easy way out, like I did, and install the ChromEdit extension. This extension adds a "Edit User Files" option to the Tools menu on Firefox that allows you to edit userContent.css and other configuration files without having to find and go into your profile folder.
No matter how you go about accessing userContent.css, you can add the above styles to it to force the vertical scrollbar to always show, or use this proprietary Mozilla property:
html { overflow: -moz-scrollbars-vertical !important; }
Because this is simply a user style sheet for Mozilla only, it doesn't matter if you use proprietary properties such as -moz-scrollbars-vertical to achieve what you are after. After adding this line and restarting Firefox, the vertical scrollbar will now always show on every site you visit, so even if its web developer did not account for the page shift, you've taken care of it from your end.
What about Opera and Safari, you ask? Since they aren't open source, they aren't as forthcoming about how to customize their browsers, so at this time it looks like such customization is not possible. If the page shift bugs you that much, I recommend just browsing with a customized version of Firefox!
Another option to cure the page shift for all sites is simply to disable the vertical scrollbar altogether and just use the scroll wheel on your mouse. Opera lets you turn off scrollbars by going to Tools > Preferences, clicking on the Advanced tab, clicking on the Browsing section, and unchecking "Show scroll bars." To turn off the vertical scrollbar in Firefox, add this line to userContent.css:
scrollbar[orient="vertical"] { display: none !important; }
After restarting Firefox, you will now never see a vertical scrollbar on any sites, and thus will not see the page shift on any sites.
Page 1 of 1 1
Keywords
short pages, long pages, short content, scroll bars, shift, jump, force, show, persistant, userContent.css
