Previous Message
Next Message

IE5/6 float "bug" help

Sent by Michael Landis on 24 November 2003 17:05


Andy wrote (about http://www.message.uk.com/test/float-test.html ):

> There is a headline with a 40px bottom margin, a grey div that's
> 20px high and floated left, and a purple div that's being cleared.
>
> In Safari, Firebird Netscape 6, IE5.2 and Opea 6 on OSX and
> Netscape 7 on Win the cleared div is butting up vertically with
> the floated div.

> However in IE5/6 and Opera 7 on Win there is a large gap between
> the gray floated div and the purple cleared div. This gap appears
> to be caused by the preceding headline. Remove the headline and
> there is no gap. Increase the bottom margin of the headline and the
> gap increases by the same amount.

Sure sounds like a bug to me! :)

I found two ways to resolve this:

Zero the bottom margin and use bottom padding instead on the header. This
seems to remove IE's flaky margin behavior, since there's no longer a
margin.

Or float the header, too, and make it 100% wide. Since the floated div
cannot fit next to the floated header, the div drops down underneath the
header. The header's margin takes up exactly as much room as you request,
but doesn't impact the rest of the document, because the float's outside of
the document flow.

HTH,

MikeL

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Possibly related: