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 se débarrasser de l'espace dans le menu de la partie News Box 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 et elle et se présente sous trois formes :

Les corrections ayant été effectuées pour Firefox, nous pouvons passer à Internet Explorer.

Effectuer les corrections pour Internet Explorer

Comme nous pouvons le constater, il y a plusieurs problèmes :

  1. l'espace dans le menu du bas
  2. la position des liens dans ce même menu
  3. le menu principal qui se déplace quand on passe la souris au dessus d'un lien

L'espace

Le problème se situe dans #ulNewsBox encadré en bleu par le DOM inspector dans la copie d'écran ci dessous et après plusieurs tests il s'avère que margin-bottom:17px; règle le problème.

étape 4

La position des liens

Il n'est pas sûr que ce soit très utile, mais ajouter margin:15px; dans #ulNewsBox li permet de replacer les liens dans le cadre.
Quand on donnera un style aux liens il faudra sans doute revoir cette définition.

étape 5

Le menu principal qui se déplace quand on passe la souris au dessus d'un lien

Ce déplacement est beaucoup plus gênant. On élimine la définition de a:hover qui n'introduit rien permettant d'expliquer ce phénomène.

Comme hasLayout est présent pour #divLeftColumn et #ulPrimaryNav, nous allons nous intéresser à height et width dans les définitions.

#divLeftColumn a une hauteur de 90%. Pour enlever cet attribut, nous allons entrer height | auto.

étape 6

Le problème semble réglé, c'est l'occasion d'ôter les attributs inutiles pour l'instant comme position:relative...

Une fois ces corrections effectuées, on peut s'intéresser à la colonne de droite, à la longueur des colonnes, à une classe "clear" qui manque...