[Résolu] Float et clear avec Internet Explorer

Bonjour,


Je suis en train de construire un site Web et j'ai un problème avec un bloc contenant un bloc flottant.

L'architecture de la page est simple : en haut une barre qui prend toute la largeur de la page, sur la gauche un menu flottant (à gauche donc) de 150 pixels de large (140 pixels de largeur + 5 pixels de padding à gauche et à droite) et sur le reste de la page un bloc avec une marge à gauche de 170 pixels (pour l'écarter du menu).

Ici un aperçu de la page sous Firefox 3 (on voit bien en haut la barre, à gauche le menu et le bloc contenu à droite qui contient d'autres blocs).

Le problème se trouve au niveau du bloc intitulé « Planche 1 » (voir l'aperçu ci-dessus). En effet, celui-ci contient une image (à droite). Celle-ci est encapsulée dans un bloc ayant la classe miniature permettant à l'image de flotter à droite :

div.planche div.miniature {
	float: right;
}

(div.planche permet de sélectionner le bloc intitulé « Planche 1 », qu'on appellera .planche.)


Le bloc .planche contient à sa fin un bloc ayant la classe finDePlanche

div.finDePlanche {
	clear: right;
}

pour éviter que l'image ne dépasse du bloc .planche.


Seulement, Internet Explorer (j'ai testé avec I.E. 6 et un ami m'a dit que c'était pareil sous I.E. 7) me fait des misères : si le contenu du bloc .planche n'est pas plus haut que la miniature (autrement dit, si .finDePlanche est utile (puisque le clear ne sert à rien si le contenu de .planche est plus haut que la miniature)), alors le bloc contenu prend toute la largeur disponible. En fixant une hauteur plus grande que son contenu au menu, j'obtiens ceci, ce qui montre que le contenu de #contenu essaye de prendre toute la place disponible (puisqu'il se colle au menu flottant (ce qu'on ne voyait pas dans l'image précédente)). (D'ailleurs le fieldset en haut semble respecter la marge à gauche de 170 pixels plutôt que de se coller au menu flottant.)

Si le bloc .finDePlanche est supprimé, l'image sort du bloc .planche, normal, et le bloc respecte sa marge à gauche. De même, si le contenu de .planche est plus haut que la miniature, le bloc s'affiche comme il faut. Il semblerait donc que le problème vienne du clear.

Peut-être que j'ai mal codé mon X.H.T.M.L. ou que mon C.S.S. est foireux, je ne sais pas, mais si vous savez, dites-le-moi argh j'en peux plus d'essayer plein de choses pour voir que ça ne fonctionne jamais sous I.E. (pourtant c'est simple comme disposition).

J'ai créé une page Web statique qui devrait correspondre à la page dynamique (étant donné que la page en question est un outil d'administration du site, je préfère ne pas vous passer la vraie U.R.L., bandes de malins (de toute façon, il faut un mot de passe pour y accéder )). Les feuilles de style commun.css et admin.css contiennent le code C.S.S. foireux.
Modifié par Linconnudujardin (24 Jun 2008 - 00:46)

Bonjour,

Je doute que «le bloc prend toute la largeur disponible» soit la description la plus juste techniquement parlant. Justement, le bloc prend une place qui ne devrait pas être disponible, ce qui signifie:
- soit que le conteneur a un rendu incorrect (marge à gauche non prise en compte ou mal prise en compte...);
- soit que le bloc dépasse de son conteneur à gauche.

Dans l'un ou l'autre cas la raison ne me semble pas claire. C'est à vue de nez un joli bug d'Internet Explorer, qui n'a pas explication autre que «ça se produit dans telle ou telle conditions».

La question est donc: comment empêcher ce bug?

Je pense qu'un peu de HasLayout sur le bloc (div.planche), son parent (div.planches) ou le conteneur global du contenu (div#contenu) pourrait éviter ce problème. On peut aussi éviter d'utiliser ce clear: right inutile (de même que l'élément utilisé pour «clearer»); ce n'est pas le seul moyen (et sans doute pas le meilleur) pour empêcher le dépassement des flottants.

Recherches à faire:
- dépassement des flottants;
- HasLayout;
- contexte de formatage.

Des lectures sympathiques en perspective.
(On commencera bien sûr les recherches par la FAQ du forum.)

J'ai fait des recherches sur le layout d'Internet Explorer et sur des façons de remplacer clear (dont je n'étais pas vraiment satisfait puisqu'il ajoute un bloc inutile dans le code X.H.T.M.L.) et j'ai trouvé des choses très intéressantes. Comme toute personne qui a fait un peu de C.S.S., je savais qu'Internet Explorer interprétait les feuilles de style d'une façon louche mais je connaissais pas cette histoire de layout. De même, je ne savais pas qu'on pouvait utiliser overflow pour que les blocs flottants soient entièrement contenus dans leur parent.

J'ai donc supprimé le bloc .finDePlanche et rajouté l'attribut

overflow: auto;

au bloc .planche pour qu'il contienne la miniature dans les navigateurs conformes et rajouté l'attribut

display: inline-block;

au bloc .planche dans une feuille de styles pour Internet Explorer, afin de donner le layout au bloc .planche.

Tout s'affiche bien désormais, merci.
Modifié par Linconnudujardin (24 Jun 2008 - 11:42)