Firefox vs Chrome CSS padding and margin difference <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>