Forum Moderators: open
If any of this rings a bell, see this thread for more information:
[webmasterworld.com...]
(I was beaten to the answer by tedster!)
I'm curious about this issue you pinned down - can you give us just enough HTML mark-up to duplicate the problem?
..collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
see this thread [webmasterworld.com] for more details.
The (debugging) test, which imo isn't really debugging as I've tried to dissect the specs and can't say for sure which one of Moz, IE or Opera have implemented recommendations more thoroughly!.. would be to put * {margin: 0; padding: 0;} at the start of a stylesheet, if that cures the "gap" then it's a pretty safe bet that there is a margin in your code which is not collapsing how you expect it to.
The "problem" is becoming more noticeable these days because of the increased use of floats and therefore the different browsers handling of clearance [w3.org] (The
clear
Clearance is introduced as spacing above the margin-top of an element. It is used to push the element vertically (typically downward), past the float.
The clearance pushes the cleared item (typically a footer div) vertically so that the top margin property of the "footer" is cleared. But even if there are zero margins on the actual footer div the "collapsed margin" of elements inside the footer may be the cause of the gap.
A border is sometimes used as a "cure" for this behaviour. as they stop margins of adjacent elements coming into contact with each other.
I have all the words "cure" bug etc.. in quotes, because this is not a bug it's a feature and all my research so far suggests that Moz is most correct in it's interpretation.
It's very difficult to demonstrate margin rendering but try this code:
html, body {margin: 0; padding: 0;}
#header {background: #ddd;}
#left, #right {
width: 40%;
background: #ffc;
border: 1px solid #000;
}#left {float: left;}
#right {float: right;}#footer {
clear: both;
background: #ddd;
border: 1px solid #000;
}h1, p {background: #0f0;}
h1 {margin: 0;}
/* p {margin: 0;} */</style>
</head>
<body>
<div id ="header"><h1>header text</h1></div>
<div id="left"><p>left text</p></div>
<div id="right"><p>right text</p><p>more right text</p></div>
<div id="footer"><p>footer text</p></div>
This code is set up with borders (bold) so that it demonstrates where the margins of the internal elements are actually rendering. The borders prevent the margins (the default ones on the <h1>,<p> and the divs ) from touching each other so you can see that they're actually there.
Firstly this example demonstrates differences between IE and Moz. There are two things going on in IE.
One: Shown because I removed the default margin from the <h1> only. Note that although there is now no gap between the header and the floats there is also no top margin on the first <p> element in the floated divs either! PS: I don't know where they've gone either, but it happens with the bottom margin too ;)
Two: The default <p> top margin (from the footer} is rendering outside the footer div, which is wrong, the border on the footer should act to contain the <p>: try adding this:
#footer p {margin: 2em;}So the different picture given between the browsers is a compounding error. IE clearly is still wrong.. although you probably don't notice the error the same ;)
Now for Moz...the rules of collapsing margins state that "Vertical margins between a floated box and any other box do not collapse." Therefore (as demonstrated) by the borders in Moz you now have two margins in play, the botttom <p> in the right float and the top <p> in the footer and because of the rule stated above they shouldn't collapse so you will get a larger gap (both margins) in Moz than you will in IE..
You stated that you were getting the gap in Moz even if there was no content in the footer, in that case it's only the right float's bottom <p> margin that you're seeing in Moz. IE's unusual bug (item one above) means there is no margin present.. :o
It's quite hard to demonstrate all interpretations in one go as margins can start collapsing through each other and it could be a deeply nested element that causes a gap at either the bottom or the top of divs, but this simple example hopefully at least demonstrates the differences between the basic interpretation.
Opera, which I haven't got available today but if I remember used to act very like IE in this scenario, but V7.5 may very well now act more like Moz? I know it also does have bottom margin collapsing issues but cannot offer more details just now..
Also in your case, and this is just a guess as you yourself say tweaking code prevents you from reproducing the original error, I think that by removing a border this actually caused margins to collapse through each other to the point were they were no longer causing a problem .. (perhaps to the bottom of the footer div and then to the bottom of the body)
Suzy
p.s. in my opinion, this whole collapsing thing is rediculus, if a designer puts two margins side by side he/she WANTS both those margins... not one margin that is half the size. just plain silly. let the language do what it's supposed to.
I don't even fully understand all this so I apologise if my explanation makes things sound worse than they are ;)
however
p.s. in my opinion, this whole collapsing thing is rediculus, if a designer puts two margins side by side he/she WANTS both those margins... not one margin that is half the size. just plain silly. let the language do what it's supposed to.
actually most times you don't even realise it's happening ;) take an essay with lots of <p>aragraphs of text if you have margins on those paragraphs (even if you don't the default will do it's job) are you sure you want double spacing? or if you've a header element that is immediately followed by a <p> do you want both margins visible?
Like I said it's been there for a long time but it's only now with clearance (of floats) that the interpretation of recs has come under the spotlight..
What I actually do (but it's not right) is to negate, set to zero, all margins on all elements then control any required spacing with padding. This get's rid of any "collapsing margins" issues but of course it gives me double padding between multiple <p>aragraphs..
Oh boy! one thing is sure this isn't as easy as it used to be ;)
Suzy
Sure, it's not as easy as it used to be, but hey, if it were easy, everybody'd be doing it and we wouldn't feel as special anymore ;).
