title: Two vertical scrollbars in Firefox when using overflow-x:hidden
body: <p>Ive just built a website for a client, and Ive got an odd problem that only occurs in Firefox browser. </p>
  
  <p>At the top of the page I have a navigation bar that fills the width of the browser. Ive used the technique described here <a href="http://css-tricks.com/full-browser-width-bars/">http://css-tricks.com/full-browser-width-bars/</a> 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. </p>
  
  <p>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 &amp; 9 wanted to play nice. But oh no Firefox just doesn't want to go along with it. </p>
  
  <p>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. </p>
  
  <p>The only thing I have found on google and elsewhere is that this behaviour is a bug in Firefox? </p>
  
  <p>Any help with this annoyance is greatly appreciated, Many Thanks.</p>
  
  <p><strong>Update: Added Code</strong></p>
  
  <p>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:</p>
  
  <pre><code>&lt;nav id="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;Menu Item 1&lt;/li&gt;
          &lt;li&gt;Menu Item 2&lt;/li&gt;
          &lt;li&gt;Menu Item 3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Then the css is this for a fullwidth browser bar as the link above:</p>
  
  <pre><code>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%;
  }
  </code></pre>