Firefox body margin bug?

Question

I have this simple example:

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li class="clear"></li>
    </ul>
</header>
<section>section</section>

And this piece of css:

BODY, HTML{
    margin: 0;
}
header{
    margin-bottom: 100px; /* section goes down */
}
UL{
    list-style-type: none;
}
UL LI{
    float: left;
    background: green;
}
.clear{
    clear: both;
    float: none;
}
section{
    background: red;
}

So I expecting to "header" goes straight to top-left corner, then 100px margin, then "section". In all major browsers that works as expected, but in Firefox (version 16) "header" get extra margin-top for some reason.

Is this a bug?

Here an jsfiddle example: http://jsfiddle.net/AvZek/2/

BTW If I used clearfix instead of "clear" class than it's working just fine.

I am not looking for workarounds, I am interested whenever this is a bug, or just behaviour that I don't understand. — Andrew Terentyev, Oct 25 '12 at 14:34

score 5 · Accepted Answer · answered Oct 25 '12 at 14:53

This is, without a doubt, a bug. The margin is definitely not supposed to be there.

According to Firebug, the only non-zero margin that is computed that I can see is the same margin-bottom: 100px on your header element as in your CSS. Everything else is zero.
Even Firebug's DOM inspector has trouble identifying it; it never highlights that region, with the obvious exception of when you're inspecting html itself (which it highlights as part of its content area).

I found tons of bug reports which were closed as duplicates of this one, with numerous more test cases. Plus, it looks like it has been around since at least Firefox 2.

Thank you very much for your answer. That is exactly what I wanted to know. — Andrew Terentyev, Oct 25 '12 at 15:20

score 4 · Answer 2 · answered Oct 25 '12 at 14:25

Instead of polluting your code with non-semantic and unnecessary empty <li>-s just add overflow: hidden to your <ul>

HTML

<header>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</header>
<section>section</section>

CSS

ul {
    list-style-type: none;
    overflow: hidden;
}

DEMO

score 0 · Answer 3 · answered Oct 25 '12 at 14:23

0

you can use {padding-bottom:100px;} instead of margin to achieve this ..

answered Oct 25 '12 at 14:23

Abdul Malik

2,632
1
18
31

1

Thanks for your answer. I know how to avoid this issue. I am interested whenever this is a bug, or just behaviour that I don't understand. – Andrew Terentyev Oct 25 '12 at 14:28

Firefox body margin bug?

3 Answers3

Linked

Related