[css-d] Margin collapse around float
According to the CSS2.1 spec Vertical margins between a floated box and any other box do not collapse, yet my testing reveals that, in the following arrangement: 1. a normal paragraph 2. a floated paragraph 3. a cleared paragraph margins collapse between 2 and 3, but not between 1 and 2. At least, this is the case for FF2 and Opera9, whilst IE7 does not collapse either set of margins. Who is right, have I misunderstood this part of the spec., or is something else coming into play? Example at: http://www.fiveminuteargument.com/collapsing-margins-after-float Cheers, - Bobby __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin collapse around float
I don't have anything to offer to the solution other then the fact that Safari 3.1.2 seems to be doing what you said.To try and represent it in my ASCII art: | Normal Paragraph | | | Floated Paragraph | | cleared Paragraph | Which I believe is what you are saying? On Aug 22, 2008, at 7:27 AM, Bobby Jack wrote: According to the CSS2.1 spec Vertical margins between a floated box and any other box do not collapse, yet my testing reveals that, in the following arrangement: 1. a normal paragraph 2. a floated paragraph 3. a cleared paragraph margins collapse between 2 and 3, but not between 1 and 2. At least, this is the case for FF2 and Opera9, whilst IE7 does not collapse either set of margins. Who is right, have I misunderstood this part of the spec., or is something else coming into play? Example at: http://www.fiveminuteargument.com/collapsing-margins-after-float Cheers, - Bobby __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Jason Pruim Raoset Inc. Technology Manager MQC Specialist 11287 James St Holland, MI 49424 www.raoset.com [EMAIL PROTECTED] __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin collapse around float
--- On Fri, 8/22/08, Jason Pruim [EMAIL PROTECTED] wrote: ... Safari 3.1.2 seems to be doing what you said ...: | Normal Paragraph | | | Floated Paragraph | | cleared Paragraph Spot on. And now that IE is the only one of the big 4 to display the behaviour that seems to be described in the spec, I'm more confused than ever. There MUST be something I'm missing ... - Bobby __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin collapse around float
On Aug 22, 2008, at 8:27 PM, Bobby Jack wrote: According to the CSS2.1 spec Vertical margins between a floated box and any other box do not collapse, yet my testing reveals that, in the following arrangement: 1. a normal paragraph 2. a floated paragraph 3. a cleared paragraph margins collapse between 2 and 3, but not between 1 and 2. At least, this is the case for FF2 and Opera9, whilst IE7 does not collapse either set of margins. Who is right, have I misunderstood this part of the spec., or is something else coming into play? Example at: http://www.fiveminuteargument.com/collapsing-margins-after-float There is indeed something else: the margin-bottom between the floated paragraph (10px) does not collapse with the margin-top of the next paragraph. What happens here is 'clearance' (specified on paragraph 3 in the test case). That 'clearing' can be understood as 'extend the margin-top of the clearing element (parag 3) enough to get it past the floated element'. The margin-top of paragraph 3 actually collapses with the margin- bottom of paragraph 1, but is then extended by the used height + margins of paragraph 2. http://www.w3.org/TR/CSS21/visuren.html#flow-control Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Margin collapse around float
--- On Fri, 8/22/08, Philippe Wittenbergh [EMAIL PROTECTED] wrote: The margin-top of paragraph 3 actually collapses with the margin- bottom of paragraph 1, but is then extended by the used height + margins of paragraph 2. http://www.w3.org/TR/CSS21/visuren.html#flow-control Of course! I'm sure I was subconsciously aware of this one, and it's why I always see extraneous whitespace after floats in IE. Another obscure CSS detail, causing yet another IE bug, and my faith in the world order is restored :) Thanks, Philippe. - Bobby __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
