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 trouver pourquoi la couleur de fond était présente sous le contenu, le texte disparaissait et réapparaissait en haut de la page de manière aléatoire, des lettres manquaient dans le pied de page et pourquoi des lettres indésirables (me) surgissaient lorsqu'on utilisait les barres de défilement avec Internet Explorer.

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, le texte a été changé et elle et se présente sous deux formes :

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

Effectuer les corrections pour Internet Explorer 6

Les lettres en trop

Ce bug (the duplicate content bug) peut nous obliger à modifier HTML. Il faut enlever les commentaires, utiliser des commentaires conditionnels <!--[if !IE]>commentaire...<![endif]-->, ajouter une marge à droite de -3px dans le dernier élément flotté (ici ça ne marche pas), trouver celui qui est à l'origine du problème (ici c'est peut-être <!--End of leftSidebar-->) ou déclencher hasLayout dans le conteneur.

On entre height:1%; dans #Content, hasLayout prend la valeur -1 et les lettres disparaissent.

DOM inspector

Les lettres en moins

hasLayout dans #Content a fait réapparaître les lettres manquantes dans le pied de page.

On ajoute donc height:1%; dans #Content, de préférence entre des commentaires conditionnels, dans le code source :

<!--[if IE]>
<style type="text/css">
#Content{height:1%;}
</style>
<![endif]-->

Le texte qui disparaît

Procédons de même pour #Header.

DOM inspector

On remplace donc #Content{height:1%;} par #Content,#Header{height:1%;}

La barre de navigation horizontale

Ce problème affecte aussi Internet Explorer 7.

Procédons de même pour #HorizontalBar.

DOM inspector

On remplace donc #Content,#Header{height:1%;} par #Content,#Header,#HorizontalBar{height:1%;}

La couleur de fond

Au passage, ajouter #HorizontalBar{height:1%;} a réglé le problème.

Le menu vertical

L'espace entre les boutons du menu, c'est le whitespace bug.

On peut procéder de la même manière avec les liens :

DOM inspector

Plusieurs solutions ici, la première c'est d'ajouter .Block a dans notre instruction pour IE, la plus élégante c'est d'ajouter :

.Block a {display: inline-block;}
.Block a {display: block;}

Le petit espace sous le pied de page, c'est la marge dans #Wrap. Il suffit de remplacer margin:3px; par margin:3px 3px 0;.

Effectuer les corrections pour Opera

Tout a l'air d'aller. On vérifie avec Opera.

Opera

Comme la couleur est absente à gauche de #logIn et #SearchHelp, on ouvre l'Inspecteur DOM dans la barre d'outils pour Opera.

barre d'outils pour Opera

Internet Explorer inclut les boîtes flottantes à tort et il faut donc le prévoir pour les autres navigateurs. #logIn, NavHor2 et #SearchHelp ne sont pas entourés par #HorizontalBar. On ajoute donc overflow:hidden; dans #HorizontalBar.

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

affichage final

hasLayout correctement appliqué permet donc de régler de nombreux problèmes avec Internet Explorer. On peut néanmoins en éviter une bonne partie avec d'autres techniques de programmation.