Stylesheets - IE float bug?

Author

IE float bug?

Trent

2003-12-18, 8:46 pm

I was experimenting with two column layouts, and at one point wrote
the code listed at the end of this message. IE and Mozilla have two
entirely different interpretations of what it does.

In IE6, the c1 divs are all lined up along the left side of the page.
The c2 divs are lined up along the right side of the page. Both
columns start at the top of the page.

In Mozilla (Firebird), c2 divs starts down the page next to the last
c1 div. This makes sense. The c1 divs are constantly clearing left,
which will affect the placement of the c2 divs. Is Firebird right in
this case? If so, isn't this a serious IE bug? (It isn't honoring
the clears).

- Trent

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>

<style type="text/css">
div
{
color : black;
font-weight : bold;
margin : 10px;
}

.c1
{
float : left;
clear : left;
background-color : #FFBBBB;
}

.c2
{

float : right;
clear : right;
background-color : #BBFFBB;
}

</style>

</HEAD>

<BODY>

<div class="c1">
My div c1<br>
My div c1<br>
My div c1<br>
My div c1<br>
</div>

<div class="c1">
My div c1<br>
My div c1<br>
My div c1<br>
My div c1<br>
My div c1<br>
</div>

<div class="c1">
My div c1<br>
My div c1<br>
My div c1<br>
My div c1<br>
My div c1<br>
My div c1<br>
</div>

<div class="c2">
My div c2<br>
</div>

<div class="c2">
My div c2<br>
My div c2<br>
My div c2<br>
My div c2<br>
My div c2<br>
</div>

<div class="c2">
My div c2<br>
My div c2<br>
My div c2<br>
My div c2<br>
</div>

</BODY>
</HTML>

Graham J

2003-12-18, 8:46 pm

> In IE6, the c1 divs are all lined up along the left side of the page.

quote:

> The c2 divs are lined up along the right side of the page. Both
> columns start at the top of the page.

Opera does the same as IE6.

quote:

> In Mozilla (Firebird), c2 divs starts down the page next to the last
> c1 div. This makes sense. The c1 divs are constantly clearing left,
> which will affect the placement of the c2 divs.

The IE and Opera behaviour seems more intuitive to me which probably that
means Mozilla is correct ;-)

By the way aren't floated boxes supposed to have explicit widths unless they
are something like an image? It doesn't seem to make any difference to the
behaviour here but it ought to be mentioned.

Spartanicus

2003-12-18, 8:46 pm

Graham J wrote:

quote:

>By the way aren't floated boxes supposed to have explicit widths unless they
>are something like an image?

In the CSS 2.1 draft this has changed to "shrink to fit", recent
browsers have changed their behaviour in anticipation of this change.

This new method makes a lot more sense and the new browser behaviour
should not cause backward compatibility problems since a specified width
will override a derived width.

--
Spartanicus

Anne van Kesteren

2003-12-19, 9:45 pm

Spartanicus wrote:

quote:

> Graham J wrote:
>
>
>
>
> In the CSS 2.1 draft this has changed to "shrink to fit", recent
> browsers have changed their behaviour in anticipation of this change.

I thought CSS2.1 was written towards browser behavior (which, sometimes,
makes more sense).

--
Anne van Kesteren
<http://www.annevankesteren.nl/>

Rijk van Geijtenbeek

2003-12-19, 9:45 pm

On Fri, 19 Dec 2003 07:26:28 +0100, Anne van Kesteren
<mail@annevankesteren.nl> wrote:

quote:

> Spartanicus wrote:
[QUOTE][color=darkred]
[QUOTE][color=darkred]
>
> I thought CSS2.1 was written towards browser behavior (which, sometimes,
> makes more sense).

In this case, the errata to CSS 2.0 mentions shrink-wrapping, I'm not sure
if that was before or after MSIE implemented this. Mozilla was in flux at
the time, and adapted to errata quickly. Opera 4 had implemented the rules
just like the CSS 2.0 spec said, and didn't rewrite its rendering engine
each time an errata was added to the spec. Only in Opera 7 did
shrink-wrapping of positioned and floated boxes get fully implemented.

CSS 2.1 incorporates all the errata to CSS 2.0, *and* makes further
changes to describe better what (should) happen in browsers.

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

Spartanicus

2003-12-19, 9:45 pm

Anne van Kesteren wrote:

quote:

>
>I thought CSS2.1 was written towards browser behavior (which, sometimes,
>makes more sense).

I don't know who "changed" first (spec/UA), but the CSS 2.1 draft for
certain contains more than changes to bring the spec more in line with
UA implementations/behaviour such as the much needed new inline-block
property.

--
Spartanicus