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 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/
