title: Firefox absolute position bug
body: <p>I'm having problem with absolute position in firefox. It works different than Chrome, IE or Opera.</p>
  
  <p>I'm talking about navigation here <a href="http://mapylasky.xdiv.cz/" rel="nofollow">http://mapylasky.xdiv.cz/</a></p>
  
  <p>In all browsers expect Firefox they are in one line. In Firefox they are not in place.</p>
  
  <pre><code>.menu-item{
       position: absolute;
       color: #000;
   }
  
   .menu-item .icon{
       position: absolute;
       background-image: url('&lt;?php echo get_template_directory_uri(); ?&gt;/img/menu/menu-icons.png');
    }
  
    .menu-item .desc{
        position: absolute;
        font-size: 16px;
     }
  
  .container{
      width: 1100px;
      margin: 0 auto;
      position: relative;
  }
  
   .menu-item .icon{
     height: 56px;
    }
  
  .menu-item.prvni{
      left: 11px;
      top: 21px;
  }
  
  .menu-item.prvni .icon{
      width: 193px;
      height: 92px;
      background-position-x: 452px;
  }
  
  .menu-item.prvni .desc{
      left: 0px;
      top: 0px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <p></p>
  
  <pre><code>        &lt;div class="navigation-background"&gt;
              &lt;div class="container"&gt;
  
  
                      &lt;a href="javascript: void(0)" onclick="scrollToAnchor('uvod');"&gt;
                          &lt;div class="menu-item prvni active" id="home-menu"&gt;
                              &lt;div class="icon"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
  
  
               &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>What am I doing wrong?</p>
  
  <p>JSFiffle: <a href="https://jsfiddle.net/2cne0fnc/" rel="nofollow">https://jsfiddle.net/2cne0fnc/</a></p>