[Résolu] Différence d'affichage IE6 vs FF/IE7 ?

Bonjour,

Je viens d'achever (à mon sens) le site www.fightburst.fr pour le groupe de musique de mon frangin...

Et je me suis aperçu que sous IE7 et FF, tout s'affiche correctement... Mais sous IE6 tout est décalé !!!


Je m'en remets donc à votre sagesse et vos connaissances afin d'élucider ce mystère mystérieux !!!

Merci d'avance.
Modifié par jordel (02 Feb 2007 - 10:42)

Bonjour,

Ce problème est causé par un bug d'IE6, et un comportement non standard d'Internet Explorer Windows (toutes versions) :

1. Doubled margin bug. La marge de gauche du bloc div.bloc_gauche, qui est également flottant à gauche, est doublée sans raison sous IE6. Solution simple : ne pas utiliser de marge à gauche pour ce bloc, mais plutôt un padding. Ce qui nous donnera le code suivant :

.bloc_gauche {
	float:left;
	margin: 10px 0;
	padding-left:10px;
	width:520px;
}

2. HasLayout et IE Windows : le bloc div.bloc_droite a une largeur fixe (220px), ce qui lui confère le layout dans IE Win. Il perd donc la capacité à être survolé par les flottants (mis à part pour ses marges), et lorsque le flottant vient déborder sur lui (à cause du Doubled margin bug), il est repoussé et passe à la ligne. Le comportement normal, en cas d'empiètement d'un flottant sur l'espace vital de ce bloc, aurait été que le flottant repousse le texte mais que le bloc lui-même reste en place.
Solution : supprimer la largeur fixe de ce bloc, largeur par ailleurs complètement inutile vu que la marge de gauche suffit à réduire la largeur de div.bloc-droite.

Un seul de ces correctifs devrait suffire, mais il est chaudement recommandé de mettre les deux en application, pour s'éviter d'éventuels soucis plus tard.

En passant, voilà ce que ça donne avec Firefox... et une taille de texte par défaut un peu élevée.



J'ai de très sérieux doutes sur l'efficacité du système de barres de décoration pour les blocs de texte de gauche. Une simple image de fond sur div.zone_texte serait tellement plus efficace, et tellement moins casse-gueule !

Bonjour Florent,

Merci pour tes réponses très claires et explicites !!!
Et merci pour le print-screen qui me donne un aperçu concret hors de mes 2 PCs qui sont en haute résolution (1280x1024 et 1440x900) ce qui me donne pas les mêmes résultats

En tout cas, je me remets au travail !!!

ENCORE UN GRAND MERCI !!!

Hihaaaaaaaaaaa

@Florent : je n'arrive pas à reproduire le pbm avec la police...

J'ai testé sous IE et FF avec d'autres résolutions et sur d'autres PCs et tout est correct... enfin, me semble t il

Peux tu m'éclairer de tes lanternes ???

jordel a écrit :
@Florent : je n'arrive pas à reproduire le pbm avec la police...

J'ai testé sous IE et FF avec d'autres résolutions et sur d'autres PCs et tout est correct... enfin, me semble t il

Ce n'est pas un problème de résolution de l'écran mais de taille du texte. As-tu essayé d'agrandir la taille du texte, en développant ta maquette ?

Avec Firefox : Ctrl+Plus ou Affichage > Taille du texte > Plus grande.

Si ce sujet ne t'es pas du tout familier, je te conseille la lecture de ceci :
Agrandissement de la taille des polices
Et tant qu'à faire de l'article suivant :
Typographie web : gérer la taille du texte avec les « em »

Merci Florent...

Hop... un ptit Résolu de plus