Home/ Questions/Q 8917263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T05:26:33+00:00

Possible Duplicate: Firefox body margin bug? I have previously gotten stuck with vertical padding

  • 0

Possible Duplicate:
Firefox body margin bug?

I have previously gotten stuck with vertical padding issues and thought I understood it all when I resolved it. But again, I am stuck…

I am playing around with some existing themes to see how they work and have come to an issue where there is a major inconsistency between Firefox 17 and Google Chrome 23, both on Win7.

I have narrowed down the code to the small snippet below. (I inlined some styles to save space).

<!DOCTYPE html >
<head>
    <style type="text/css">
        .container:after{
            content: "\0020";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
  <div class="container" style="background:#0f0;">
    <div style="float: left;" >Words</div>
  </div>
  <div style="background:#f00; margin-top: 100px;">Words</div>
</body>
</html>

If I try the above in Google Chrome (or in IE 8), it behaves as I would expect. The first top-level div is at the top of the page and the second top-level div is below it, spaced due to its margin-top style.

However, when I try it in Firefox, the first div has now been spaced down the page. This is in direct relation to the 2nd divs margin-top parameter. Increasing the value will increase the top margin spacing for the entire <body> element, even though its style has not been altered.

Now I understand the :after and content: "\0020" parts are part of a clearfix, and I admit to not being 100% clued up on clearfixes and floats yet, but I am perturbed that the above code would behave so differently in 2 major browsers.

Can someone enlighten me as to what I am missing here and why the behaviour is different?

Edit: As pointed out by BoltClock, this looks to be a duplicate of a long standing (Since FF2) FireFox bug –

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I can’t really explain why there is difference, but I can give you the fix that may help you figure this out.
    Add overflow:hidden; to the float’s container.

    <div class="container" style="background:#0f0; overflow: hidden;">

    this will work to

    .container:after{
            content: "\0020";
            display: block;
            clear: both;
            overflow: hidden;
}

    http://jsfiddle.net/g3Avj/1/

    • 0