Question

Ive just built a website for a client, and Ive got an odd problem that only occurs in Firefox browser.

At the top of the page I have a navigation bar that fills the width of the browser. Ive used the technique described here http://css-tricks.com/full-browser-width-bars/ to achieve the effect as semantically as possible. Then Ive had to place overflow-x:hidden on the html and body tags to prevent the user from being able to scroll off the right side of the screen.

This works great in every browser I’ve tested it in from Safari on Mac/PC, Opera, Chrome and heaven forbid, but even IE7, 8 & 9 wanted to play nice. But oh no Firefox just doesn’t want to go along with it.

Although Ive no horizontal scroll bars which is the desired effect, Firefox has decided to double up on the amount of vertical scrollbars. I can’t scroll horizontally if using a mouse, but when I use the trackpad on the Mac, the vertical movement is restricted, meaning I cant scroll down the page and if I do a two finger swipe the page scrolls off horizontally into oblivion.

The only thing I have found on google and elsewhere is that this behaviour is a bug in Firefox?

Any help with this annoyance is greatly appreciated, Many Thanks.

Update: Added Code

Basically the code is this as theres too much show it all. I would point you to the site but the client doesn’t want it live yet. 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 the css is this for a fullwidth 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 sorted it out. Against my better judgement, I just copied and pasted a clearfix hack from any old site on the net. After many hours troubleshooting, Ive found that it was all down to clearfix that the fullwidth bars weren’t working as expected. I narrowed it down to the css content tag of the clearfix hack. For some reason it had had a ‘.’ inserted as the content. I removed this and then added

* html .clearfix { height: 1%; }

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