[résolu] Modèle de boîtes et IE6

Bonjour à tous,

J'essaye d'utiliser un modèle de boîte par positionnement de div et celui-ci fonctionne sans problème sous FF, Opera, Safari, IE5 et IE7.

Par contre, avec IE6, lorsque la boîte latérale (float: left) est plus longue que la colonne suivante, le contenu de celle-ci n'apparaît que si on redimensionne la fenêtre du naviguateur.

http://lumadis.be/jeanluc/vault/ie6.html

Apparemment, le problème provient du div footer qui content un clear: both

Comme IE6 est encore beaucoup employé, je n'ai pas le choix, je dois trouver une solution.
Modifié par ripat (26 Jul 2007 - 18:33)

À priori, c'est le IE6 Peekaboo Bug.
http://www.positioniseverything.net/explorer/peekaboo.html

Pour corriger ça, il faudra donner au conteneur du flottant et du bloc clearé une propriété lui conférant le layout (cf. notion de HasLayout). Au passage, je propose une petite correction:

#conteneur {
  height: 1%; /* HasLayout pour corriger le IE6 Peek-a-boo Bug. Dans l'idéal, on mettra cette ligne dans une feuille de correctifs CSS destinées à IE6 et inférieurs, appelée via un commentaire conditionnel */
  background-color: white;
  overflow: hidden; /* meilleur rendu dans certains navigateurs (ex dans Firefox: avec overflow:auto, la bordure du bas est parfois tronquée) */
  margin: 2% 15% 2% 15%;
  border: solid 1px black;
  color: black;
}

Ça marche, merci. Mais que de gymnastique!

Il y a juste ie5 qui n'aime pas trop le height 1%. Je le mettrai en commentaire conditionnel comme tu le suggères.

Je n'utilise les css que pour des choses très basiques, et dès que je fais de la mise en page sans tableaux, c'est la prise de tête assurée. Trop d'exceptions j'ai l'impression de devoir tout reprendre à zéro à chaque fois. Un peu décourageant.

ripat a écrit :
Il y a juste ie5 qui n'aime pas trop le height 1%. Je le mettrai en commentaire conditionnel comme tu le suggères.

Passe alors plutôt par un zoom: 1.

ripat a écrit :
Mais que de gymnastique!

Bah ça fait un correctif qui prend une instruction. C'est pas la mer à boire non plus.

ripat a écrit :
Je n'utilise les css que pour des choses très basiques, et dès que je fais de la mise en page sans tableaux, c'est la prise de tête assurée. Trop d'exceptions j'ai l'impression de devoir tout reprendre à zéro à chaque fois. Un peu décourageant.

Hmm... c'est sûr que les différents bugs d'IE6, heureusement en bonne partie corrigés dans la version 7, n'aident pas trop.

Une bonne maitrise des CSS, c'est:
- une bonne connaissance des CSS eux-mêmes (meilleur outil pour ça: la spécification CSS 2.1), y compris de choses un peu «obscures» comme la fusion des marges, les contextes de formatage, le fonctionnement exact des différents types de positionnement CSS, etc.;
- une bonne connaissance des insuffisances et des bugs d'IE6 et des moyens pour 1) ne pas les déclencher et 2) si on les déclenche, les corriger ou contourner.

C'est quoi qu'il en soit un sujet demandant un certain savoir-faire. Mais bon, faire une mise en page avec les tableaux aussi, mine de rien, c'est complexe. Il y a les colspan et rowspan mal supportés, les calculs de largeur des colonnes qui peuvent sembler assez aléatoires, la nécessité d'imbriquer des tableaux dans tous les sens... tout ça demandera là encore un certain savoir-faire.

Et passer de l'un à l'autre, j'imagine que ça ne doit pas être évident, surtout si on ne fait pas les choses progressivement.
Progressivement, ça peut être: en utilisant un tableau pour la mise en page globale et éviter que le site n'explose suite à un bug de positionnement d'IE6, à la rigueur parfois pour mettre des éléments côte-à-côte... et utiliser les CSS pour le reste. Utiliser des paragraphes, des listes et des titres dans une structure de titres cohérente. Etc.

Je n'ai pas peur de me retrousser les manches pour apprendre les finesses du CSS mais par contre, les hacks pour contourner telle ou telle déficience d'un navigateur me font penser à de la magie noire.

Je ne vais pas y aller du couplet "mais pourquoi diable tous les navigateurs ne se comportent-ils pas de manière standard" - on n'a pas le choix - mais, tout de même, c'est fatiguant de perdre du temps sur ce genre de problèmes. Pour l'instant, je suis assez rôdé côté serveur et je parviens à développer un site interactif relativement rapidement. Mais à chaque fois je perds un temps fou sur les particularités de la forme.

Je devrais passer plus de temps à lire les posts de ce forum sans doute.

En tout cas, merci pour ton aide efficace.