What might cause this CSS margin sharing(?) bug in Firefox to occur?

StackOverflow https://stackoverflow.com/questions/5087419

  •  04-12-2019
  •  | 
  •  

Question

I ran into this unusual Firefox-only (as far as I know - I only checked against Safari and Chrome, and was using Firefox 3.6) CSS bug today at work, and managed to reproduce the problem with a much smaller snippet of code, here:

<!DOCTYPE html>
<head>
    <style>
    /*
     * A small snippet of some CSS resets code from html5doctor and YUI fonts and resets
     * added just to make sure it's not from weird browser padding/margin. Still happens
     * if this is removed though
     */
    html, body, div, span, p, ul, li {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        background: transparent;
    }

    body {
        line-height: 1;
    }

    li {
        list-style: none;
    }

    body {
        color: #333;
        font-family: Helvetica, Arial, Verdana, Geneva, sans-serif;
        line-height: 1.3;
    }

    /* Some clearfix code from HTML5 Boilerplate */
    .clearfix:before, .clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        visibility: hidden;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        zoom: 1;
    }
    </style>
</head>
<body>
    <div style="padding: 20px; border: solid thin black;">Hello!</div>
    <div>
        <ul class="clearfix">
            <li style="float: left; padding: 5px; border: solid thin black;">There</li>
            <li style="float: left; padding: 5px; border: solid thin black;">should</li>
            <li style="float: left; padding: 5px; border: solid thin black;">be no</li>
            <li style="float: left; padding: 5px; border: solid thin black;">margin</li>
            <li style="float: left; padding: 5px; border: solid thin black;">above</li>
            <li style="float: left; padding: 5px; border: solid thin black;">this</li>
            <li style="float: left; padding: 5px; border: solid thin black;">list</li>
        </ul>
        <p style="margin-top: 30px">Yet for some reason the 30px margin-top on this p applies to both this p as well as the above list</p>
    </div>
</body>
</html>

Here's a screenshot of what the problem looks like screenshot

So what I'd normally expect to happen here is that there's no margin between the two <div>s, or above the <ul>, and indeed, hovering over elements in Firebug will show no margin/padding coloring. But for some reason, the 30px margin-top from the <p> is being applied to both the <p>, as well as its containing <div>. My guess is that something's buggy with the clearfix (and indeed, if you use a clearing <br/>, this problem goes away), but I'm curious if anyone has insight into what exactly the problem here is. Thanks!

Was it helpful?

Solution

That's correct, you are not using the right clearfix ;-)

This one should fix the issue:

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

See: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

OTHER TIPS

BUT - the elephant in the room that isn't being mentioned is a Firefox float bug which affects at least 3.6-6 (tested). A float container styled with ':after { content:"" }' (where content is empty or any type or whitespace) will duplicate the margin-top of the following element! This only appears to affect Firefox and is clearly a bug.

Simple test case:

<div class="container cf">
    <div class="floater"></div>
</div>
<div class="next">
    <p>Some content here!</p>
</div>

<style>
body { padding: 0; margin: 0; }
.cf:after { content:""; display:block; clear:both; *zoom:1; }
.container { background:gray; }
.floater { float:left; width:46%; height:200px; margin:0 10px; background:#ddd; }
.next { background: yellow; margin: 30px 0px; }
</style>

http://jsfiddle.net/TjW6c/394/

You're not using the clearfix right. Using positioniseverything's clearfix(a.k.a. pie-clearfix) is usually my solution to all clearfixes:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

You can check it out here: http://jsfiddle.net/WVtYd/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top