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

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

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!

score 6 · Accepted Answer · answered Feb 23 '11 at 20:33

6

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/

answered Feb 23 '11 at 20:33

Thierry Koblentz

201
1
4

Hey Thierry, thanks! I actually made a reference to your post in the comment to the answer below - it seems Boilerplate clearfix is some amalgam of your clearfix and the perishablepress clearfix. Am I understanding correctly that your version of clearfix still retains the margin, but just makes it consistent for both top and bottom, across all browsers? – Johnny Feb 23 '11 at 21:13
Hi Johnny, you're correct. I found out that the clearfix technique in Boilerplate is supposed to be mine (it links to my YUIBlog post). My guess is that when they edited the rules they had before, the content value and visibility property were not updated. The Boilerplate team knows about this and should do the update soon. Regarding margins, yes, they will **not** collapse - for both first and last child of the box - and this across browsers. – Thierry Koblentz Feb 24 '11 at 05:16

score 2 · Answer 2 · answered Aug 28 '11 at 20:33

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/

score 1 · Answer 3 · answered Feb 23 '11 at 05:53

1

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/

answered Feb 23 '11 at 05:53

corroded

21,406
19
83
132

1

Hmm, that points out something interesting. So I'm using the HTML5 Boilerplate clearfix, which seems to be a combination of the perishablepress and tjkdesign clearfixes (described here: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/) with the difference that Boilerplate uses a space for the content, rather than a period. If you swap out the space for a period in the Boilerplate clearfix, this problem goes away, but I'm unsure what effects that has on vertical margin collapsing – Johnny Feb 23 '11 at 19:44

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

3 Answers3