[résolu] Meme gabarit, meme css, affichage différent...

Bonjour,

Je n'y comprends plus rien...

J'ai deux colonnes: la gauche, en float left, contient une image et le menu, la droite le contenu.

Dans IE6 etc, sur 3 pages ( http://www.egalite.ch/bureaux-romands.html, http://www.egalite.ch/contact.html et http://www.egalite.ch/en-savoir-plus.html) le contenu est coupé, et passe étrangement en dessous du menu:
http://browsershots.org/http://www.egalite.ch/bureaux-romands.html

Ce qui est vraiment bizzare, c'est que les autres pages, construites sur le meme gabarit, avec les memes css, se comportent tout à fait normalement:
http://browsershots.org/http://www.egalite.ch/campagnes.html...

Une idée qui me permettrait de garder quelques cheveux?

Merci d'avance pour votre aide.
Modifié par firfelin (10 Sep 2007 - 12:22)

firfelin a écrit :
Une idée qui me permettrait de garder quelques cheveux?

Très au pif: tester en supprimant la largeur fixe (width:363px;) de la classe "souligne"?
En utilisant cette classe, tu confères le layout au bloc, et à proximité d'un flottant (avec une possibilité de morsure du flottant sur le bloc ou de Three Pixel Jog), ça peut être gênant.

Si c'est ça, il faudra soit éviter d'utiliser une largeur (ou auteur) fixe, soit trouver un moyen pour que le flottant ne morde pas, ou autre subtilité.

Une autre solution serait de positionner div#col_gauche en absolu (ce qui est jouable vu l'absence de pied de page).

Bon, c'est bien du Three Pixel Jog + HasLayout.

Tu as un bloc de droite de largeur 550-187 = 363px.
Tu as un bloc (paragraphe) auquel tu donne une largeur de pile 363px (alors que c'est apparemment inutile, en tout cas pour cette page là).
Enfin, tu as ton flottant de gauche qui, dans IE6, repousse de 3px vers la droite:
- soit le texte (le texte est décalé de trois pixels, mais ça ne défonce pas la mise en page);
- soit les blocs, si ceux-ci sont dotés du layout.

Ton premier bloc doté de layout dans la colonne de droite, c'est ton paragraphe de largeur 363px. Il est repoussé de 3px vers la droite, donc il a besoin d'au moins 366px pour se placer. Mais il n'a que 363px de disponibles. Donc il «passe à la ligne», et se place en dessous de la zone sur la quelle agit le flottant.

CQFD.

Solution: ne pas donner de largeur fixe à ce paragraphe. Ou bien, via feuille de styles pour IE6 (commentaire conditionnel):
- donner une marge à gauche de 184px à la colonne de droite (au lieu de 187);
- conférer le layout à la colonne de droite, via un height: 1%, afin qu'elle soit repoussé de 3px (on retrouve une «marge» de 187px en tout).

Merci infiniment, tu viens de mériter une place dans mon panthéon personnel

J'ai supprimé la largeur fixe à la classe .souligne et raccourci un peu la largeur du formulaire sur la page contact et tout fonctionne à merveille

Le pire c'est que j'avais rajouté -puis oublié- cette largeur fixe pour régler je ne sais plus quel problème disparu entre-temps...

Ce que je ne comprends encore pas trop, c'est que si je donne une largeur plus grande que 358px au formulaire il "passe à la ligne"... Je ne vois pas d'où viennent ces 5 px?