Clever Geek Handbook

Firefox and CSS padding and margin differences

I am having problems with my CSS. There is a space under my icons in Firefox but not Chrome. I am really confused as to where the problem is coming from.

Screenshot from Firefox footer: http://puu.sh/dqkrp/1ca27fd502.png
Screenshot from 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;
}
+3


source to share


4 answers


I don't know what the exact problem was due to 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.



+1


source


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

The most popular way to overcome this is to use a css reset stylesheet, which will override all browser default styles. Then we can no longer worry about different add-ons and fields in different browsers.

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

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



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

When looking at your css, I think there is another problem that I think could be causing this problem: change the padding: auto; padding: 0px; as below

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


source


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


source


The browser has its own default properties as sometimes images have a border in IE like chrome and mozila apply margin and padding there to make it 0

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


source






More articles:


All Articles