Sent by Gunlaug_Sørtun on 29 December 2007 13:01 > Mark Henderson wrote: >> Alan Gresley wrote: >>> Adding padding-top to the #content div will actually accentuate the >>> gap though this will even things out across browser-land.
> >>> [...] >> ...but that wasn't an intended solution. I'm pretty sure that >> recommendation was made so Mike could see the full margins in effect >> and what exactly is going on. > That's right. Since "collapsing margins" is an often misunderstood or > totally lost standard behavior made partly useless by IE/win bugs, the > easiest way to demonstrate and *test* for what's happening is to make > the involved margin visible by preventing it from escaping its own > container and collapse into other margins in standard compliant browsers. > > The 1px padding is interpreted the same way by all browsers, and once > all involved vertical margins are uncollapsed and visible in the actual > case, one can decide which ones to keep and which ones to change to > achieve the intended line-up across browser-land. > For more on the subject, check the linked-in articles/demos in the > relevant 'hasLayout' subsection... > <http://www.satzansatz.de/cssd/onhavinglayout.html#uncollapse> > regards > Georg The part in the article about how hasLayout affects the collapsing of margins between a box and its descendants does not apply in the case. I see no connection between this bug case and hasLayout. This bug could still be present in IE8. The bug is setup (see below markup) when you have a container div for a static content div and floated side bar. Any top margin on the content div or descendant element of this div will only fully collapse into the top margin of the container itself when this top margin is equal or greater then any of the descendant top margins. The collapsing margin between the container and content div are controlled by the width of the container top margin and are alway equal to it. So a top margin of 1px on the container will allow margin collapsing of only 1px. For this case once 20px is reached then full margin collapsing occurred equally across browser-land. <div class="wrapper"> <!-- outer wrapper --> <div class="floatleft">div floated left</div> <h1>Heading</h1> </div> Apart from knowing that the trigger for this bug is a float in the source, I am at a lost to explain why it happens. I also at a lost to explain why there is a difference between the browsers that show the bug. Opera 9.1~9.2, IE7, and IE5.5~6 all show the bug in their own individual way [1]. The original case by the original poster had an additional container (inner wrapper). <div class="wrapper"> <!-- outer wrapper --> <div class="floatleft">div floated left</div> <div class="wrapper"> <!-- inner wrapper --> <h1>Heading</h1> </div> </div> And what you suggested was. -------------------- #spotlight { margin: 0 40px 0 230px; } For testing-purposes, adding... #content { padding-top: 1px; } ....without zeroing out the margin-top on #spotlight, will make all browsers contain the margin and push #spotlight down. --------------------- Firstly, zeroing out the the top margin of the #spotlight div will make no difference across browser-land [2] see example 1a and 1b. Secondly, testing with a 1px padding to show the collapsing margin(s) in compliant browsers shows no change regardless of if the top margin on the #spotlight div is zero or`20px [2] see example 2a and 2b. Thirdly, this make no apparent difference for IE since the bug as seen in IE shows a behavior that only happens if padding or a border were actually present. This leaves just this. ----------------------- For testing-purposes, adding... #content { padding-top: 1px; } will make all browsers contain the margin and push #spotlight down. ----------------------- This will work for the compliant browsers at least, not IE or Opera 9.1~9.2. I have done further test that includes an inner wrapper with various methods of containing all involved margins. Compliant browsers will show consistently. Opera 9.1~9.2, IE7, and IE5.5~6 all show particular examples in their own individual way. 1 <http://css-class.com/test/bugs/ie/floatsandblockelements.htm> 2 <http://css-class.com/test/bugs/ie/floatsandblockelements2.htm> Alan http://css-class.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/
