Déboguer CSS - Déboguer la page
Notre HTML validé ainsi que du CSS valide vont nous permettre de déboguer la page.
La page qui nous sert d'exemple a été trouvée sur un forum. Elle a été réduite à sa plus simple expression, des bordures ont été ajoutées et elle et se présente sous trois formes :
Effectuer les corrections pour Firefox
Notre page avec Firefox :
La meilleure méthode consiste à corriger la feuille de style avec Firefox et à vérifier qu'Internet Explorer réagisse correctement.
On ouvre donc l'option Edit CSS de Web Developer afin d'examiner l'effet des modifications.
La première erreur pour Firefox, ce sont les liens qui ne restent pas dans leur conteneur. Deux solutions : ajouter overflow:hidden; dans le conteneur parent (#menu li) soit y mettre float:left;.
On ajoute donc #menu li et on teste les deux solutions. La meilleure c'est float:left;. Comme float:left; dans #menu li a devient inutile, on le supprime donc.
Le deuxième problème c'est le texte qui ne se trouve pas dans son conteneur #separateur2. Ici, le plus simple c'est d'enlever height car Internet Explorer l'interprète comme min-height alors que les autres navigateurs essaient d'appliquer la valeur.
Le problème suivant ce sont les espaces autour de l'image dans #separateur. C'est souvent display:block; appliqué à l'image dans le conteneur qui règle le problème.
Le problème de l'auteur de la page, c'était que la bordure de #all n'entourait pas #content. Internet Explorer entoure le contenu (ici #content) alors que les autres navigateurs, à juste titre, ne le font pas. Il y a plusieurs méthodes avec les navigateurs modernes, nous utiliserons overflow:hidden; dans le conteneur parent de #content (#all).
On vérifie avec Internet Explorer et Opera. Nous avons de la chance, tout semble bon. Avec du contenu, il faut aussi décider des marges pour la balise <p> afin d'arriver à un résultat presque identique quel que soit le navigateur.
En fait, on peut sans doute supprimer quelques instructions inutiles et il manque un clear dans l'HTML si on modifie la taille de #all.
Web Developer va nous permettre d'effectuer cette modification si on ouvre Miscellaneous/Edit HTML :
Voici le résultat final :
- Mozilla
- MSIE 6
- Opera 9
