Firefox vs Chrome CSS padding and margin difference

Question

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.

Screenshot of Firefox footer: http://puu.sh/dqkrp/1ca27fd502.png
Screenshot of Chrome footer: http://puu.sh/dqkOw/ea7749b56c.png

<footer>
  <div id="contact-bar">
   ...
  </div>
</footer>

#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;
}

Answer 1

Every browser has its own predefined styling for the HTML tags. Because of this if we have not specified a style for an element it is possible that different browser will have different style for that element.

The most popular way of overcoming this is to use css reset style sheet which will override all the default styling of the browser. Then we can no longer worry about different padding and margins in various browsers.

As far I know Eric Meyers reset styling is the most popular among the reset styles

Below is the url for the css code http://meyerweb.com/eric/tools/css/reset/

Just copy the content in this page and add it in to your css. This should resolve your problem.

On looking closely at your css i think there is one more problem which i think could cause this issue: Please change padding :auto; padding:0px; like below

#contact-bar ul {
    margin:auto;
    display: inline-block;
    list-style-type: none;
    padding:0px !important;
    float:right;
}