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 -

Community
  • 1
  • 1
Tom17
  • 406
  • 5
  • 18

2 Answers2

1

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/

Alvarez
  • 1,303
  • 1
  • 10
  • 28
  • Well I tried that fix 'upstream' and also removed the developers 'hack' to make it work properly in FF and break in Chrome. Now it works correctly and I haven't seen any other artifacts yet. Thanks for your help. Now I just need to understand more about what you did ;) – Tom17 Nov 29 '12 at 18:55
0

I think the simplest solution, although not sure where you will go with this is to remove the float left on the div with words. It will stay left aligned and isn't necessary.

SpktrmDesign
  • 1
  • 1
  • Well, this simplified version is stripped down from a theme with a lot more CSS. The origin of that float left is deep in a part of the CSS for that theme, I can try ripping it out I suppose to see if it breaks anything else. – Tom17 Nov 29 '12 at 18:36
  • I always use normalize reset. I tested your code with the following reset and it works, add clearfix as class to container (class="container clearfix"): .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } – SpktrmDesign Nov 29 '12 at 19:12