Sent by Alan Gresley on 29 December 2007 15:03
Mark Henderson wrote:
>> Temp site: http://www.grum.com/temp/j/index.html
> Alan Gresley wrote:
>> Adding padding-top to the #content div will actually accentuate the gap
>> though this will even things out across browser-land.
>
> Hi Alan,
>
> Well, that is exactly what Georg already said
> >To achieve the line up in IE like the other browsers it's better to allow for greater margin
> collapse [1].
>
> I am curious - why is that better than the alternatively proposed
> zeroing out of the top margin on the offending #spotlight div? To my
> mind, zeroing the margin is as clean and simple as it gets, since that
> *was* causing the problem in the first instance.
>
> Mark
Hi Mark
I would actually blame it on the float.... So why is it better? Because it adding something to the
CSS that has no impact on Gecko, Opera 9.5 (alpha) and Safari (beta). Mike was aiming for IE to
follow these other browsers. Opera 9.24 or earlier also shows the same bug. Zeroing out the margins
on the #spotlight div will do nothing since the problematic margins in question belongs to the the
first heading in the #spotlight div which is approximately 20px and the #content div. What Gecko,
Opera 9.5 (alpha) and Safari (beta) are doing is collapsing the top margin of the heading (approx.
20px) into the top margin of the #spotlight div (20px) which in turn collapses in the top margin of
the Content div of 10 pixels which now becomes 20px. Collapsing margins [1].
In IE though, the top margin of the heading has fully collapsed into the top margin of the
#spotlight div which in turn has only partially collapsed into the top margin of the #content of by
10px. By increasing this top margin of the #content to 20px will allow the full collapsing on the
margins for IE and Opera 9.24 earlier .. and bye bye bug. [2] example 5a.
I think Georg may have be baffled by the bug and suggested testing with padding to debug. Georg may
even been checking in Opera 2.24 or earlier.... Zeroing out the margin on the heading also works
around the bug but this requires changing the CSS so the good browsers will follow IE which I would
say isn't Georg general approach when working with IE. ;-).
#spotlight h1 {
margin-top: 0;
}
or
#content {
margin: 10px;
margin-top: 20px; /* add, same as height of top margin of heading */
}
[1] <http://www.w3.org/TR/CSS21/box.html#collapsing-margins>
[2] <http://css-class.com/test/bugs/ie/floatsandblockelements.htm>
Alan
http://css-class.com/
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
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/
