CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Soubriquet
Soubriquet

Reputation: 3330

Firefox vs Chrome CSS padding and margin difference

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

Upvotes: 3

Views: 19042

Answers (4)

Umamaheswaran
Umamaheswaran

Reputation: 3878

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

Upvotes: 4

Soubriquet
Soubriquet

Reputation: 3330

I don't know what the exact issue was with the difference between the footer in Chrome and Firefox, but I set the height of the footer to exactly 27px, which is the height of the icons, to fix the problem.

Upvotes: 2

nikita
nikita

Reputation: 277

Browser have there own properties by default as sometimes images have border in IE like that chrome and mozila applies there margin and padding try to make it 0

ul,li{
margin:0px;
padding:0px;
}

Upvotes: -1

calyxofheld
calyxofheld

Reputation: 2128

Each browser has its own default styles. Reset them by putting this at the very top of your css file:

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, em, img, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, footer, header, hgroup, 
menu, nav, output, section, time {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

Upvotes: 0

Related Questions