Vertical scroll bar in Firefox

The vertical scroll bar in Firefox is a menace. Internet Explorer just grays it out when there is no need for scrolling. Firefox removes it, making the design “jump” from side to side when swiching pages. I have customers calling me, claiming there is an error with the design because it jumps from side to side.

Is there a solution for this? Yes. There are 2, a good and a better one.

You can add the Mozilla specific -moz-scrollbars-vertical to the HTML tag in your css:

html {
  overflow: -moz-scrollbars-vertical;

Unfortunately this eliminates the horizontal scroll bar so users can’t scroll horizontally if need be.
Another solution is to use the overflow-y on the HTML tag in the css:

html {
  overflow-y: scroll;

This solution has the disadvantage that the CSS will not validate, as the overflow-y does not exist i CSS 2 but only in CSS3.

There is a 3rd solution which is to modify your local C:\Program Files\Mozilla Firefox\res\html.css file with one of the 2 solutions above. This only works on your machine though.

About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in General .NET and tagged , , . Bookmark the permalink.

3 Responses to Vertical scroll bar in Firefox

  1. Niklas Koskela says:

    I think this works also and without any side effects, at least on my website :-)

    html {
    height: 100%;

  2. Tim Witham says:

    I think you can also achieve the same thing by adding the following to sitecore\shell\Themes\Standard\Firefox\Content Manager.css

    HTML {
    overflow: scroll;

    This enables scrolling where applicable within firefox for the content editor.

  3. Aureli says:

    Thanks for that tip. The second option works very well in my version of Firefox.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s