Sent by Bryce Fields on 23 August 2004 13:01
Thanks Phillipe, Big John, and Donna for taking a look at this. If someone
has a reference to the W3 specs on where I can read up on this behavior
further, I'd greatly appreciate it.
Bryce Fields, Web Developer
Kentucky Council on Postseconary Education
Kentucky Virtual University
"Do or do not. There is no try." -- Yoda
-----Original Message-----
From: Philippe Wittenbergh [EMAIL-REMOVED]]
Sent: Sunday, August 22, 2004 12:18 AM
To: css-discuss
Cc: [EMAIL-REMOVED]; Big John
Subject: Re: [css-d] Floated elements receiving nonfloated element's
margin in Firefox .
On Aug 22, 2004, at 12:12 pm, Big John wrote:
> Bryce Fields wrote:
>
>> First the preliminaries. The page I'm working on is located at
>> http://cpe.ky.gov/temp_docs/kyvl/. The CSS is at
>> http://cpe.ky.gov/temp_docs/kyvl/styles/layout.css. Both validate.
>>
>> Now the issue. The page essentially has five basic independent
>> structural
>> elements, an h1 and h2 "header", a left nav div, a main content div,
>> and a
>> footer div. The h1 and h2 are floated left and right respectively.
>> The
>> left nav div is floated left. The main content div and footer div
>> are not
>> floated. None of these items are contained w/in another.
>>
>> My problem occurs when I apply the top margin to the content div
>> (5em).
>> IE6, IE5.5, IE5, and Opera 7.11 render the page as I'd expect (the top
>> margin has no affect on the floated elements). However, in Firefox
>> 0.9 and
>> Mozilla 1.7 (and by extrapolation I'm assuming Gecko in general), the
>> the
>> floating elements are "pushed down" 5em also.
>
> Very odd. Op7.5 also behaves like Firefox, and my offhand
> opinion is that this is incorrect. The floats come first,
> and are followed by the page's first static element having
> a top margin. The floats ought to be at the top in that case,
> but seem unable to display higher than the top edge of that
> first static element.
>
> To fix you could have a "dummy" block element and have
> the content element margin off of that, or substitute
> top padding in place of the top margin. I seem to recall
> having had to do the dummy fix once.
>
> Moz is known to have trouble with such first top margins,
> but now it appears that Opera has drifted into that same
> behavior. Gee, I sure hope I'm not all wet on this opinion.
>
> Well, if that is the case, then at
> least IE will be wrong again! :D
It is a case of collapsing-margins, or not collapsing in this case.
#content is not clearing the previous floated blocks, hence its top
margin is 'leaking' upwards into the body margins (correct behaviour,
but IE gets that one wrong [1]).
Just add this
body {border-top:1px solid lime}
and watch the floated blocks go back upwards.
Happens in Safari, Opera 7.5, Gecko.
Solutions ? that lime coloured border is probably not what you want.
You could give body a 1px top-padding.
[1] <body> !== viewport, although IE thinks it is.
Philippe
---/---
Philippe Wittenbergh
now live : <http://emps.l-c-n.com/>
code | design | web projects : <http://www.l-c-n.com/>
IE5 Mac bugs and oddities : <http://www.l-c-n.com/IE5tests/>
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
