Re: Another float/clear bug in IE 6+?

In article
<488d7d22-2734-47fa-8b65-b94019d91a84 (AT) c65g2000hsa (DOT) googlegroups.com>,
Elias <thegreatpain (AT) gmail (DOT) com> wrote:

I am attempting to float a number of div elements side by side, whilst
allowing multiple rows to form when there is not sufficient horizontal
space. This is nothing new to me, but it is the first occasion I've
noticed Internet Explorer has its own interpretation of the clear
style I use in order to break a row. Needless to say, IE is the only
browser with this behaviour - Firefox, Opera and Safari all play
along.
The problem is that any element after the element with the clear style
will still be displayed on the old row, and not to the right of the
'breaking' element in question.
I've scoured Google for a description of this presumed bug, but only
found several other unrelated ones. Where's the problem? Immensely
grateful for any help with this!

A demonstration (generally available daytime UTC):
http://styx.corner.no-ip.com/test/float.html

The clear you have is doing its job on the second div. Once that element
goes to the next line, the third div must sit next to it if there is
room on *that* line because you have this third div set to float left
but have not set this third div in your example to clear. The clear only
acts on the element you set it on and does not transmit to subsequent
elements in the HTML order.

The act of clearing the second div changes the environment for the third
div. It is set to float at the left most place it can on the line it is
on. But it is "on" the second line already.

--
dorayme

On 3 Aug, 00:10, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article
488d7d22-2734-47fa-8b65-b94019d91... (AT) c65g2000hsa (DOT) googlegroups.com>,



*Elias <thegreatp... (AT) gmail (DOT) com> wrote:
I am attempting to float a number of div elements side by side, whilst
allowing multiple rows to form when there is not sufficient horizontal
space. This is nothing new to me, but it is the first occasion I've
noticed Internet Explorer has its own interpretation of the clear
style I use in order to break a row. Needless to say, IE is the only
browser with this behaviour - Firefox, Opera and Safari all play
along.
The problem is that any element after the element with the clear style
will still be displayed on the old row, and not to the right of the
'breaking' element in question.
I've scoured Google for a description of this presumed bug, but only
found several other unrelated ones. Where's the problem? Immensely
grateful for any help with this!

A demonstration (generally available daytime UTC):
http://styx.corner.no-ip.com/test/float.html

The clear you have is doing its job on the second div. Once that element
goes to the next line, the third div must sit next to it if there is
room on *that* line because you have this third div set to float left
but have not set this third div in your example to clear. The clear only
acts on the element you set it on and does not transmit to subsequent
elements in the HTML order.

The act of clearing the second div changes the environment for the third
div. It is set to float at the left most place it can on the line it is
on. But it is "on" the second line already.

--
dorayme

Thanx for the quick reply! Though I'm still not convinced the
behaviour IE exhibits is the correct one. All the other browsers get
it right except IE, that should be indicative of something going wrong
I don't want div number 3 to clear - I want it placed just to the
right of div number 2. I don't know what you meant by that the third
div is "on" the second line. In IE, it clearly isn't. The third div
should not care about if any of its siblings have the clear style set
- it is floated left and thus governed by the rules of floats, that
stipulate that it should be placed to the right, but not higher, of
any earlier left floated boxes.

Consider the 9 rules governing the behaviour of floats, in the CSS 2.1
specification: http://www.w3.org/TR/CSS21/visuren.html#propdef-float
In my opinion, Internet Explorer is directly violating rule #5, by
placing the outer top of div 3 above the outer top of div 2. IE seems
to obey rules 8 and 9 - that higher placement is preferred - whilst
not observing #5 (though they are not mutually exclusive, as proved by
the other browsers!).

Any ideas as to how I can get around this annoyance?

Elias wrote:

On 3 Aug, 00:10, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
488d7d22-2734-47fa-8b65-b94019d91... (AT) c65g2000hsa (DOT) googlegroups.com>,



Elias <thegreatp... (AT) gmail (DOT) com> wrote:
I am attempting to float a number of div elements side by side, whilst
allowing multiple rows to form when there is not sufficient horizontal
space. This is nothing new to me, but it is the first occasion I've
noticed Internet Explorer has its own interpretation of the clear
style I use in order to break a row. Needless to say, IE is the only
browser with this behaviour - Firefox, Opera and Safari all play
along.
The problem is that any element after the element with the clear style
will still be displayed on the old row, and not to the right of the
'breaking' element in question.
I've scoured Google for a description of this presumed bug, but only
found several other unrelated ones. Where's the problem? Immensely
grateful for any help with this!
A demonstration (generally available daytime UTC):
http://styx.corner.no-ip.com/test/float.html
The clear you have is doing its job on the second div. Once that element
goes to the next line, the third div must sit next to it if there is
room on *that* line because you have this third div set to float left
but have not set this third div in your example to clear. The clear only
acts on the element you set it on and does not transmit to subsequent
elements in the HTML order.

The act of clearing the second div changes the environment for the third
div. It is set to float at the left most place it can on the line it is
on. But it is "on" the second line already.

--
dorayme

Thanx for the quick reply! Though I'm still not convinced the
behaviour IE exhibits is the correct one.

Dorayme is saying that IE is wrong.
I'm also saying that IE is wrong.

Any ideas as to how I can get around this annoyance?

Use a different method with which IE has no problems.
Use a clearing div instead. Such as:

<div style="width:500px; height:500px; background: #c0c0c0">
<div class="floated">1</div>
<div style="clear:left;"></div>
<div class="floated">2</div>
<div class="floated">3</div>
</div>


BTW:
1. Don't use the comment tags in the stylesheet.
2. A div is a block, so no use using display:block; on it.
3. Don't use the XML declaration since it sets IE into Quirks Mode.
4. Unless you have a very good reason for using XHTML, don't use it.
Use HTML Strict instead.

--
Gus

On 3 Aug, 14:36, Ben Bacarisse <ben.use... (AT) bsb (DOT) me.uk> wrote:

Elias <thegreatp... (AT) gmail (DOT) com> writes:

snip

*Elias <thegreatp... (AT) gmail (DOT) com> wrote:
I am attempting to float a number of div elements side by side, whilst
allowing multiple rows to form when there is not sufficient horizontal
space.
snip
A demonstration (generally available daytime UTC):
http://styx.corner.no-ip.com/test/float.html
snip
Consider the 9 rules governing the behaviour of floats, in the CSS 2.1
specification:http://www.w3.org/TR/CSS21/visuren.html#propdef-float
In my opinion, Internet Explorer is directly violating rule #5, by
placing the outer top of div 3 above the outer top of div 2. IE seems
to obey rules 8 and 9 - that higher placement is preferred - whilst
not observing #5 (though they are not mutually exclusive, as proved by
the other browsers!).

As you say it seems quite clear-cut that rule 5 is being violated.
Can you change the source? *All is well if divs 2 and 3 are put into
another one and the clear property is applied to that containing div.

--
Ben.

I ended up removing the clear style from div 2 and introduced a zero
size div with the clear style, right after number two. Hoped to avoid
this, but alas!
Thanx for verifying my suspicions!

On 3 Aug, 14:36, Gus Richter <gusrich... (AT) netscape (DOT) net> wrote:

Elias wrote:
On 3 Aug, 00:10, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
488d7d22-2734-47fa-8b65-b94019d91... (AT) c65g2000hsa (DOT) googlegroups.com>,

*Elias <thegreatp... (AT) gmail (DOT) com> wrote:
I am attempting to float a number of div elements side by side, whilst
allowing multiple rows to form when there is not sufficient horizontal
space. This is nothing new to me, but it is the first occasion I've
noticed Internet Explorer has its own interpretation of the clear
style I use in order to break a row. Needless to say, IE is the only
browser with this behaviour - Firefox, Opera and Safari all play
along.
The problem is that any element after the element with the clear style
will still be displayed on the old row, and not to the right of the
'breaking' element in question.
I've scoured Google for a description of this presumed bug, but only
found several other unrelated ones. Where's the problem? Immensely
grateful for any help with this!
A demonstration (generally available daytime UTC):
http://styx.corner.no-ip.com/test/float.html
The clear you have is doing its job on the second div. Once that element
goes to the next line, the third div must sit next to it if there is
room on *that* line because you have this third div set to float left
but have not set this third div in your example to clear. The clear only
acts on the element you set it on and does not transmit to subsequent
elements in the HTML order.

The act of clearing the second div changes the environment for the third
div. It is set to float at the left most place it can on the line it is
on. But it is "on" the second line already.

--
dorayme

Thanx for the quick reply! Though I'm still not convinced the
behaviour IE exhibits is the correct one.

Dorayme is saying that IE is wrong.
I'm also saying that IE is wrong.

Any ideas as to how I can get around this annoyance?

Use a different method with which IE has no problems.
Use a clearing div instead. Such as:

div style="width:500px; height:500px; background: #c0c0c0"
* * <div class="floated">1</div
* * * *<div style="clear:left;"></div
* * <div class="floated">2</div
* * <div class="floated">3</div
/div

BTW:
1. Don't use the comment tags in the stylesheet.
2. A div is a block, so no use using *display:block; *on it.
3. Don't use the XML declaration since it sets IE into Quirks Mode.
4. Unless you have a very good reason for using XHTML, don't use it.
* * Use HTML Strict instead.

--
Gus

1. Old habits die easily.
2. Don't know where that came from.. somewhere it was suggested that
IE float bugs could be swatted by changing the block type.
3. Duly noted.
4. I presume the reason for this is yet again IE's ineptitude? Does it
matter, though, since (as far as I have understood) a XHTML 1.0 Strict
DTD will trigger standards mode in IE 6+?

Cheers for the input! I followed your advice - reluctantly, and with a
slightly added resentment towards the world's favourite browser maker.

Elias wrote:

On 3 Aug, 14:36, Gus Richter <gusrich... (AT) netscape (DOT) net> wrote:
4. Unless you have a very good reason for using XHTML, don't use it.
Use HTML Strict instead.

--
Gus

4. I presume the reason for this is yet again IE's ineptitude? Does it
matter, though, since (as far as I have understood) a XHTML 1.0 Strict
DTD will trigger standards mode in IE 6+?

Some reading on the subject:
http://www.w3.org/MarkUp/2004/xhtml-faq
http://webkit.org/blog/68/understanding-html-xml-and-xhtml/
http://lachy.id.au/log/2005/12/xhtml-beginners
http://jp29.org/test.php

--
Gus