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 au dessus du texte 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 deux formes :
Aucun problème avec Firefox, Safari ou Opera, nous pouvons passer à Internet Explorer.
La copie d'écran ci-dessous donne un aperçu des différences entre les navigateurs.
- Etat initial
Effectuer les corrections pour Internet Explorer
L'espace indésirable
Quand on sélectionne #maincontent avec l'Inspecteur DOM, on constate que le cadre bleu n'est pas à sa place ainsi que l'absence de hasLayout dans les styles.
On ajoute height:1%; dans #maincontent, hasLayout apparaît dans les styles et le cadre bleu prend sa place ainsi que le texte. Nous avons eu de la chance car il faut parfois aussi fixer les marges.
Mais ce n'est pas fini car le menu se déplace quand on passe la souris au dessus du menu et nous avons un bouton en trop avec Internet Explorer.
Le bouton en trop
On examine les règles et on recherche les hauteurs et largeurs afin de supprimer celles qui ne servent à rien.
Ici, ce sont les largeurs. La suppression de width:158px; dans #navcontainer a fait disparaître le bouton en trop.
Le déplacement indésirable
On peut aussi supprimer width dans #leftcolumn. Le déplacement disparaît mais la couleur ne change pas sur toute la ligne pour les boutons du menu. L'instruction responsable et que nous supprimons, c'est padding:2%; dans #leftcolumn.
Le résultat :
Nous y sommes presque car il reste un espace entre le menu et le texte.
Le menu utilise float:left; alors que #maincontent ne laisse pas de marge à gauche. margin-left:10px; et margin-right:10px; ne servent pas à grand chose.
Deux solutions, ajouter float:right; et width:197px; dans #maincontent ou ajouter margin-left:160px;. La deuxième solution est plus simple et n'oblige pas à fixer une largeur.
Affichage final :
