Gunlaug_Sørtun wrote:
> Mike Smith wrote:
>
>> Temp site: http://www.grum.com/temp/j/index.html
>>
>> I have a div floated left and it's supposed to line up vertically
>> with the div in the content area. It does just that in FF and
>> Netscape9, but IE6 and IE7 have the left floated div a little higher
>> than the content one.
>
> It is a "collapsing margins"[1] case, where the original 20px margin-top
> on #spotlight escapes the #content div in non-IE browsers, while IE/win
> contains that margin within the #content div and thereby pushes
> #spotlight that much down relative to the left div.
>
> One way to fix the line-up across browser-land, is therefore to zero out
> the "escaping" margin...
>
> #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.
>
> regards
> Georg
Adding padding-top to the #content div will actually accentuate the gap though
this will even things out across browser-land. To achieve the line up in IE
like the other browsers it's better to allow for greater margin collapse [1].
This will work as long as the #content div doesn't have layout caused by a
hasLayout trigger [2].
#content {
margin: 10px;
margin-top: 20px; /* add, same as height of top margin of heading */
}
This is the first IE bug (browser-land variation) I ever noticed. Now I know
why it happens.
[1] <http://css-class.com/test/bugs/ie/floatsandblockelements.htm>
[2] <http://www.satzansatz.de/cssd/onhavinglayout.html>
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/
