CSSKarma

display your <style>

designing the web since 2002

Dummy (inactive) Scrollbar: The Firefox Wiggle

This is a method I came up with some time ago to remove, what I call, the Firefox Wiggle.

When viewing a small (height-wise) webpage Internet Explorer will insert a faded out (inactive) scrollbar that takes up...let's say, around 40 pixels or so and when you navigate to a longer page the scrollbar becomes active, still taking up around 40 pixels. It's a good thing; this keeps a center aligned website centered as you move from short pages to long ones.

The problem lies in Firefox (insert a web developer gasp here). Putting Firefox in the same sitution described above, trouble ocurrs.
FF doesn't insert a dummy scrollbar so when a vertical scroll is needed the page shifts 40 pixels (ish) to the left to accomodate space for the scrollbar, which is extremely irritating.

This is how you insert a dummy scrollbar in Firefox via CSS, it's pretty simple. There are 2 ways...

Method 1: html {overflow-y:scroll;} 
Method 2: html {min-height: 100%; margin-bottom: 1px;}

Of course there are positives and negatives in each method.
Method 1 will create the dummy scrollbar exactly as IE does, works great. However, "overflow-y" is not valid CSS markup. So, if you care about having valid markup, this isn't the answer. Otherwise, it's outstanding.

Method 2 is perfectly valid CSS, but, as you can see by looking at it, it creates an active scrollbar by inserting 1px of margin to the bottom of the page. This means your page will have atleast 1px of scroll at all times. This is the method I use now mainly because it validates. But they both work pretty well.

No forced scrollbar: Alpha Road
Look at this page in IE and FF to see what I mean by the dummy scrollbar IE inserts and FF omits

Forced Scrollbar: DELTA
You can see here what happens when using method 2

I hope that helps some

Featured writing