Wolf’s Little Store

(Make sure you read the follow-up to this post if you decide to use this technique)

Here’s an example of something IE does right and the other browsers do wrong. IE has greyed out vertical scrollbars by default, which activate when the page you’re visiting is longer than your browser windows’ height.

Firefox, Safari and Opera have no scrollbars by default, and activate them when needed. Now, this might seem like the logical better solution: less clutter. However, because the width of the scrollbar gets added to the browser window, there’s a 20px (or the width of your scrollbar) shift of your content when you browser from a long page to a short one, or from a short one to a long one.

Mozilla has a browser-specific rule that adds a greyed-out scrollbar by default. Add this to your CSS to activate it:

@-moz-document url-prefix() {
/* enforce scrollbar */
body {
overflow: -moz-scrollbars-vertical;
}
}

The usual scrollbar hacks (think body { height: 100.1%; }) add an active scrollbar, which is a usability problem. Now I hope the Webkit team and the Opera Developers tackle this problem too - either by adding a proprietary rule or good defaults in their browser.

• Category: tips 'n tricks
• Back to the overview