No Horizontal Scroll Bars in Firefox

overflow and margin to force scrollbars

[jimh009]

Hello,

Since the problem I'm having is likely a CSS problem, I thought I'd post this issue here despite being a "Firefox only" problem.

Anyways, I recently designed a new template for my site. Everything works just fine but, I just noticed tonight that the new template (which has a fixed width of around 830px) will not horizontally scroll if the browser window is made smaller.

This happens in Firefox only and only with this new template I designed. Other pages on my site, which use an older template, do not have this problem and will horizontally scroll just fine, if needed.

Any suggestions?

[alt131]

Hi Jim, does overflow-x:auto on the html work for your template?

[jimh009]

Hi alt131,

Your suggestion made me hunt around in my CSS file. I found some CSS I put in to prevent the Firefox browser from "shifting left" when the contents of a full page can be displayed in the browser window (thus, no vertical scrolling is needed to see all of the page).

The code I had in was:

html { min-height: 100%; margin-bottom: 1px; }

html { overflow: -moz-scrollbars-vertical !important; }

By removing those two lines, the horizontal scroll bars now appear if needed in Firefox.

However, the problem I have with real short pages has appeared again. If a page is short and all the content can be displayed in full in the browser window, without needing to vertically scroll, the page again "shifts left." [the template has everything centered on the page]

Is there a way to allow the horizontal scroll bars to appear in Firefox, if needed, while still preventing the page from "shifting left" in Firefox when real short pages are shown?

[alt131]

hey JIm, thanks for posting the code.

The first rule forces a vertical scrollbar by making the html 100% high plus 1px, so the content is always larger than the viewport and so ff thinks a scrollbar is necessary.

The second tells ff to always display a vertcail scrollbar. However-moz-scrollbars-vertical is deprecated, so best use overflow-y instead.

By removing both those rules you have removed the rules that directed ff to draw a vertical scrollbar regardless of the actual content height. So I wonder if the page "shift" is caused by ff not drawing in a vertical scrollbar when the content is shorter than the vieport.

[edit] -Ignore this bit
So, ways to trigger a vertical scrollbar are overflow-y:auto, or a bottom margin or border of 1px - whichever one doesn't interfere with the horizontal scroll ;)
[/edit]

I've always had problems with ff scrollbars so just did a quick test and for some reason the border/margin trick is disabling the horizontal scrolling in my test page, so not much help.
But this
html {overflow-x:auto; min-height: 101%; }
did reliably force a vertical bar, plus trigger a horizontal scroll when the viewport was re-sized.

[jimh009]

Thanks alt131,

Your code did the trick. I get the horizontal scroll bar when needed, while "short pages" have the scroll bar forced so as to prevent the page from shifting around. Works well in both IE and Firefox.

In Firefox, when the entire page is shorter than the viewport, if you have a "centered layout", the entire page noticeably shifts over by the width of the now missing scroll bar (which is like 20pixels or so). But then if you reach a page that needs a scroll bar, the entire page then "jumps left" again. Although few pages have that "short problem," it was quite annoying in Firefox to have the site constantly shifting around by about 20px, depending on the page length. Internet Explorer doesn't have that problem - it's a Firefox and Safari thing.

The code I was using to workaround that problem was found "somewhere" on the net - not sure where! The code seemed to work just fine - until tonight when I realized there was no horizontal scroll bar. But your trick does the job quite nicely, so thanks.

[alt131]

Glad the solution worked - and thanks for highlighting this occurs in safari as well.