title: Firefox vs Chrome CSS padding and margin difference
body: <p>I'm having issues with my CSS. There's a gap under my icons in Firefox, but not in Chrome. I'm really confused about where the issue is coming from.</p>
  
  <p>Screenshot of Firefox footer: <a href="http://puu.sh/dqkrp/1ca27fd502.png" rel="nofollow">http://puu.sh/dqkrp/1ca27fd502.png</a><br> 
  Screenshot of Chrome footer: <a href="http://puu.sh/dqkOw/ea7749b56c.png" rel="nofollow">http://puu.sh/dqkOw/ea7749b56c.png</a></p>
  
  <pre><code>&lt;footer&gt;
    &lt;div id="contact-bar"&gt;
     ...
    &lt;/div&gt;
  &lt;/footer&gt;
  
  #contact-bar {
      width:100%;
      height:auto;
      float:right;
      margin-bottom: auto;
      bottom: 0px;
      background-color: #000000;
  }
  
  #contact-bar ul {
      margin:auto;
      display: inline-block;
      list-style-type: none;
      padding: auto;
      float:right;
  }
  
  #contact-bar ul li{
      float:right;
  }
  
  #contact-bar ul li a {
      text-decoration: none;
  }   
  
  footer {
          position: fixed;
          z-index: 9999;
          clear:both;
          bottom:0;
          left:0;
          width:100%;
          margin:0px;
          padding:0px;
  }
  </code></pre>