Two vertical scrollbars in Firefox when using overflow-x: hidden

Question

I just created a website for the client, and I had a strange problem that only occurs in the Firefox browser.

At the top of the page there is a navigation bar that fills the width of the browser. Ive used the http://css-tricks.com/full-browser-width-bars/ technique described here to achieve the effect as semantically as possible. Then Ive had to put overflow-x: hide the html and body tags so that the user could not scroll the right side of the screen.

This works fine in every browser I tested on Safari on Mac / PC, Opera, Chrome and the sky, but even IE7, 8, and 9 wanted to play well. But no Firefox just wants to agree with him.

Although Ive don't have horizontal scrollbars, which are the desired effect, Firefox decided to double the number of vertical scrollbars. I cannot scroll horizontally if I use a mouse, but when I use the trackpad on a Mac, vertical movement is limited, which means that I cannot scroll down the page, and if I do two fingers, the page scrolls horizontally into oblivion.

The only thing I found on Google and elsewhere is that this behavior is a bug in Firefox?

Any help with this annoyance is greatly appreciated, thanks.

Update: code added

Basically, code is something that everyone shows too much. I would point you to the site, but the client does not want him to be still alive. Here we go:

<nav id="menu"> <ul> <li>Menu Item 1</li> <li>Menu Item 2</li> <li>Menu Item 3</li> </ul> </nav> 

Then css is for the full width browser bar as the link above:

 html,body{ overflow-x: hidden; /*This prevents the user from scrolling horizontally*/ } #menu{ position: relative; background: blue; } #menu:before, #menu:after{ content:''; position: absolute; background: inherit; top: 0; bottom: 0; width: 9999px; /*huge width to ensure bar fills browser*/ } #menu:before{ right: 100%; } #menu:after{ left: 100%; } 

Answer 1

Ok, I figured it out. Against my best judgment, I just copied and pasted the clearfix fix from any old site on the network. After hours of troubleshooting, Ive found that everything is clearfix to failure, that the bandwidth is not working properly. I narrowed it down to the css content tag for the clearfix hacker. For some reason he had a ".". inserted as content. I deleted this and then added

 * html .clearfix { height: 1%; } 

to the end of the clearfix css block, and it worked. No more horizontal scrolling, no more x2 vertical scroll bars in Firefox.

Answer 2

Just a similar problem arose; my solution was just to add:

 html, body {height:100%;} 

And that decided. I just wanted to post it here because it continued to appear in search results.