Déboguer CSS
Déboguer la page pour Internet Explorer

La page qui nous sert d'exemple a été trouvée sur un forum, l'auteur voulait comprendre pourquoi les divisions n'étaient pas alignées avec Internet Explorer 6.

Elle utilise un HTML valide ainsi que du CSS valide ce qui va nous permettre de déboguer.

Elle a été réduite à sa plus simple expression et elle et se présente sous deux formes :

Aucun problème avec Internet Explorer 7, Firefox, Safari ou Opera, nous pouvons passer à Internet Explorer 6.

Les copies d'écran ci-dessous donnent un aperçu des différences entre les navigateurs.

Effectuer les corrections pour Internet Explorer 6

Les marges

Quand on sélectionne #leftcol avec l'Inspecteur DOM, on voit dans la partie Current Style que la marge à gauche a été fixée à 4px.

DOM inspector

Quand on sélectionne #rightcontent avec l'Inspecteur DOM, on voit que la marge à gauche devrait aussi être de 4px.

DOM inspector

On mesure l'espace pour #leftcol avec Firefox à l'aide de Web Developper, on voit que la marge à gauche est bien de 4px.

Web Developper

On mesure pour Internet Explorer à l'aide de l'Inspecteur DOM, on voit que la marge à gauche est de 8px.

DOM inspector

On mesure l'espace pour #rightcontent avec Internet Explorer à l'aide de l'Inspecteur DOM, on voit que la marge à gauche est de 8px.

DOM inspector

Nous avons donc affaire au Doubled Float-Margin Bug, marges doublées quand le contenu est flotté. La solution c'est d'ajouter display:inline; dans ces conteneurs.

Nous commençons par #leftcol.

DOM inspector

Puis #rightcol.

DOM inspector

Puis #leftcontent.

DOM inspector

Et #rightcontent.

DOM inspector

Nous ajoutons donc #leftcol,#rightcol,#maincol,#leftcontent,#rightcontent{display:inline;} pour Internet Explorer 6 dans notre feuille de style car cette règle n'a aucune incidence sur les autres navigateurs.

Notre affichage final sera donc sensiblement le même avec les navigateurs récents.

affichage final avec Internet Explorer 6