Déboguer CSS - Valider HTML
Il est inutile de vouloir déboguer une page dont l'HTML n'est pas valide.
La page qui va nous servir 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 :
Les copies d'écran ci-dessous donnent un aperçu des différences entre les navigateurs.
Utiliser HTML Validator
- Mozilla
- MSIE 6
- Opera 9
Résultats de la validation SGML :
Cette validation, effectuée localement, correspond à celle service en ligne du W3C.
HTML Validation Result ---------------------- file://localhost/E:/css.tests/exemple_1a.html line 149 column 66 - Error: literal is missing closing delimiter line 149 column 84 - Error: end tag for "img" omitted, but OMITTAG NO was specified line 149 column 22 - Info: start tag was here line 151 column 5 - Error: end tag for element "h2" which is not open line 151 column 17 - Error: end tag for element "h2" which is not open line 155 column 27 - Error: end tag for "a" omitted, but OMITTAG NO was specified line 155 column 5 - Info: start tag was here line 157 column 12 - Error: document type does not allow element "a" here; assuming missing "li" start-tag line 159 column 5 - Error: end tag for "li" omitted, but OMITTAG NO was specified line 157 column 1 - Info: start tag was here 7 errors / 0 warnings
Résultats de la validation HTML Tidy :
HTML Validation Result ---------------------- file://localhost/E:/css.tests/exemple_1a.html line 75 column 22 - Warning: <img> attribute with missing trailing quote mark line 76 column 1 - Warning: discarding unexpected </h2> line 76 column 13 - Warning: discarding unexpected </h2> line 78 column 5 - Warning: missing </a> before </li> line 79 column 1 - Warning: missing <li> Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN" Info: Document content looks like XHTML 1.0 Strict 0 errors / 5 warnings
HTML Validator propose de corriger le code avec des options intéressantes dans une autre situation ou d'aller d'erreur en erreur pour effectuer les corrections.
On va donc de ligne en ligne et on corrige toutes les erreurs en commençant par HTML Tidy.
On constate ainsi que quelques problèmes ont disparu et on passe donc à la validation de CSS.