Internet Explorer, quelle daube ! Il respecte même pas les standards ! Combien de fois dans notre vie ne devrons nous pas entendre ou lire cette fameuse sentence.

IE est-il plus logique que les autres ?

Pourtant, force est de constater qu'il existe des points pour lesquels IE a raison, là où tous les autres navigateurs sur le marché ont tort. Peut-être pas selon le W3C, mais selon toute logique oui en tout cas !

Je vais aujourd'hui me concentrer sur l'attribut CLEAR.

This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. (It may be that the element itself has floating descendants; the 'clear' property has no effect on those.)

This property may only be specified for block-level elements (including floats). For compact and run-in boxes, this property applies to the final block box to which the compact or run-in box belongs.

Values have the following meanings when applied to non-floating block boxes:

left The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any left-floating boxes that resulted from elements earlier in the source document. right The top margin of the generated box is increased enough that the top border edge is below the bottom outer edge of any right-floating boxes that resulted from elements earlier in the source document. both The generated box is moved below all floating boxes of earlier elements in the source document.. none No constraint on the box's position with respect to floats.

Constatons quelque chose d'intéressant dans cette définition :

   1:  <div style="float: left">

   2:      Line 1<br/>

   3:      Line 2

   4:  </div>

   5:  <div style="float: left; clear: left">

   6:      Line 3

   7:  </div>

   8:  <div style="float: right">

   9:     First right line

  10:  </div>

Quelle sera la disposition logique de cette structure ?

Personnellement, j'ai toujours été tenté de dire que cela devrait être celle-ci :

Line 1                                    First right line
Line 2
Line 3

Force est pourtant de constater que le rendu de ce code, sur tout autre navigateur qu'IE, est le suivant :

Line 1
Line 2
Line 3                                    First right line

Les standards semblent donner raison à IE

Pourtant ma troisième DIV ne possède pas de clear (d'ailleurs elle est bien posée à la droite de la troisième ligne et pas sur une quatrième ligne comme si elle avait clear: left).

Normalement, il n'y a donc aucune raison pour qu'elle ne se place pas "le plus haut possible", ce qui est la 2e règle de base du float (après l'alignement gauche/droite).

Alors comment expliquer le comportement de FF, Opéra (v9+) et Safari ? Est-ce un bug ?

Je l'ai longtemps crû, mais le changement de comportement d'Opéra m'avait donné la puce à l'oreille... Aujourd'hui, j'ai pris mon temps et je suis allé lire les standards sur clear (que je vous ais donné précédement).

Ceux-ci donnent, à première vue, raison à IE.

Puis j'ai regardé la définition de float. Peut-être qqchose avait-il pu m'échapper...

This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'. right Same as 'left', but content flows on the left side of the box, starting at the top. none The box is not floated

Décidément, tout donne raison à IE. Aucune loi fondamentale n'impose le comportement de FireFox & co, et tout semble confirmer les qualités d'IE.

Oui mais...

Le W3C pouvait-il vraiment donner raison à IE et obliger FireFox à corriger un bug remontant à NetScape (qui a largement été favorisé par les standards, inutile de se le cacher) ?

Probablement non.

Dès lors, une petit règle suffit pour imposer son comportement en tant que standard :

• A floating box must be placed as high as possible.
• A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

BUT, there is another rule :

• The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

THIS RULES MAKE THE USE OF FLOAT MORE DIFFICULT !

And also (but it's logic in fact) :

• The outer top of an element's floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.
• The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.
• If the current box is left-floating, and there are any left floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.
• The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements.

CQFD,

FireFox a raison, IE a tort

D'autres problèmes avec float

Float est probablement une des propriétés CSS les plus mal pensées et les plus mal formulées par le W3C. Dommage car c'est un outil génial !

Voici encore un cas assez "en balance" de Float :

<div style="text-align: center">
    Some text
    <div style="float: left"> LEFT </div>
    <div style="float: right"> RIGHT </div>
</div>

Que doit rendre le navigateur ?

Moi j'aurais penché pour :

Bien que cela ne m'aurait pas dérangé non plus :

IE et FireFox rendent pourtant cela ainsi :

Opéra et Safari rendent comme le version 1 (la plus logique selon moi)

Qui a raison ? Si SOME TEXT avait été un DIV, on n'aurait pas hésité à dire IE et FireFox, mais avec un élément inline (et même moins vu qu'ici ce n'est que du texte) ?

Exemple concret de problèmes causés par cette loi

Imaginons que nous voulions le rendu suivant :

Une solution envisageable est placer les deux selects les uns à la suite de l'autre et mettre les propriétés ensuite :

<select id="objGroup">...</select>
<select id="objGroupItem">...</select>
<div id="propertyDiv">...</div> 

Les propriétés sont décalées vers le bas. car elles sont placées après le deuxième SELECT qui lui doit se placer après le premier (supposons que nous ayons demandé un clear: left; à celui-ci)

Solutions :

- Jouer sur les margin-top (mais alors il faut connaitre la taille des objets)

- Mettre les deux SELECT dans une DIV englobante (mais alors, vous perdez en partie votre modularité (cas ou vous voudriez placer un SELECT à gauche et un autre à droite (ici pour un SELECT c'est inutile, mais il se peut que doivent coexister des choses plus grosses que des bêtes SELECT, que j'ai ici choisi dans mon exemple pour simplifier les choses)

- Utiliser une TABLE (mais cela ne permet pas toujours de faire ce que l'on veut faire de manière simple et concise, et surtout de manière rapidement modulable, les TABLE étant encore plus complexes que les DIV)

- REORGANISER LES FLOATS

Cette solution n'est pas toujours envisageable (si comme je le disais précédemment les objets sont succeptibles de changer d'alignement en fonction de la partie de l'interface dans laquelle on se trouve) mais est très souvent LA solution.

Dans mon exemple, la solution est relativement simple :

<select id="objGroup">...</select>
<div id="propertyDiv">...</div>
<select id="objGroupItem">...</select>

Rendu sous FF et IE :