Lors de la précédente mis à jour de ma feuille de style, dans IE6 PC mon site se présentait de la façon suivante :
La seule différence de structure avec ma feuille de style précédente était le passage de mes bords de mon contenu principal réalisés en "border" à "margin". ( Opération motivée par le fait que les borders posaient des problèmes d'accessibilité pour les gens surfant en noir & blanc, merci aux bonnes pratiques d'opquast qui m'ont fait découvrir ce problème ).
Donc j'avais :
#content { position:relative; float:left; width:459px; border-style:solid; border-width: 0 151px 0 150px; background-color:white; margin:0;}et je suis passé à :
#content { float:left; width:459px; border:0 padding:0; margin: 0 151px 0 150px; background-color:white;}En examinant le rendu, on avait l'impression que le contenu principal gardait une bonne position centrée à l'écran mais que l'entête et le pied de page se décentraient. Je me demandais bien comment mon bloc "content" pouvait influencer la position de ces éléments. Un examen plus attentif montrait en fait que c'était les marges de mon contenu principal qui doublaient de tailles. Bon sang ! me dis-je, mais c'est bien sûr, c'est le fameux double margin bug, et je me précipite sur position is everything qui non seulement explique ce bug mais donne la solution pour le résoudre.
Le bug de la double marge se manifeste quand on met un bloc positionné en float dans un conteneur. Les marges de ce bloc apparaissent doublées.
La solution est très simple mais pour le moins inattendue, il suffit de rajouter un "display:inline;" dans le style du bloc, comme ceci :
content { display: inline;/* IE double margin fix.*/ float:left; width:459px; border:0 padding:0; margin: 0 151px 0 150px; background-color:white;}Le bien, c'est que les autres navigateurs conformes au standards devraient ignorer la valeur du display:inline, si on a un float:left. Donc pas besoin de cacher aux autres navigateurs ce truc. Autre bénéfice, cela résoud aussi un autre bug d'IE : le "text indent bug".
Merci donc à Steve Clason qui a découvert la solution et à Position is Eveything de l'avoir publiée.
