Bug Chrome / Safari

Bonjour,

J'ai un petit beug CSS, dont j'ai du mal à résoudre. Il ne se produit que sous Chrome & Safari.

URL retirée.

Les commentaires se trouvent décalés à cause des images (trop grosses) du dessus. Firefox et IE arrivent à bien l'afficher en décalant le form. plus bas.

Qui a raison parmi les nav. ? ^^

Merci,
Modifié par thibotus01 (02 Nov 2010 - 16:19)

Salut,

Tes liens dans #related-posts sont en float, mais leur conteneur non, et il n'y a pas de "clearing", donc ton conteneur fait la hauteur que tu lui as affecté (105px), ce qui n'est pas sa hauteur réelle.
D'autre part, ta colonne de droite est flottante, mais ta colonne de gauche n'est pas flottante et n'a pas de marge droite, ce qui joue surement dans la superposition des contenus.

Ce que j'aimerais comprendre c'est ce que fait Chrome et ce que fait Firefox. Car j'ai peur qu'en corrigant le problème pour l'un, ca ne fera que l'inverser.

Hum.. en réglant la hauteur de #related-posts à 330px ca règle le problème sur chrome sans défaire sur Firefox.

Enfin le truc c'est que ca décale dans tous les cas... même si il n'y a pas de "grosses images" présente.

La question n'est pas que les images soient grosses, mais qu'elles soient dans des éléments flottants.
Fais une recherche sur clearfix pour régler ton problème sans spécifier la hauteur.

j'ai mis l'ul en class clearfix avec :

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html .clearfix {

}

* html .clearfix {
height: 1%;
}[code]

D'ailleurs j'ai du enlever le display:block de html .clearfix pour que ca s'affiche bien.

Ca à l'air d'être niquel