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 le contenu était poussé vers le bas 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, l'image a été changée et elle et se présente sous trois formes :
Nous avons :
- un problème avec Firefox, Safari ou Opera : l'image n'apparaît pas.
- un problème avec Internet Explorer 6 et 7 : le contenu est sous la barre verticale de navigation.
- un problème commun : la largeur du contenu supérieure à ce qui était prévu.
La copie d'écran ci-dessous donne un aperçu des différences entre les navigateurs.
- Etat initial
Effectuer les corrections pour Firefox
L'image manquante
Internet Explorer inclut les boîtes flottantes à tort et il faut donc le prévoir pour les autres navigateurs. On ajoute à cet effet display:table; ou overflow:hidden; avec Web Developer Toolbar. On constate que l'image apparaît.
La largeur trop importante
On retire la largeur dans #content avec Web Developer Toolbar, l'ensemble se place correctement.
On teste avec Internet Explorer.
Le contenu
Retirer la largeur a replacé le contenu à droite de la barre de navigation.
La solution d'utiliser padding pour décaler les paragraphes est risquée car elle impose des instructions pour les autres balises. Il vaut mieux l'utiliser pour #content.
Il nous reste à régler la marge pour le premier paragraphe. On ajoute donc #content p.first{margin-top:5px;}.
Notre affichage final sera donc sensiblement le même avec les navigateurs récents.
