FAQ version Beta 0.5
Décalages, marges, bugs divers
Méthodologie générale de correction de bugs classiques
La plupart des problèmes de marges ou de décalages entre les navigateurs provient de quelques différences d'interprétation.
Ces différences ne sont pas nombreuses et il est nécessaire de les connaître pour résoudre presque tous les problèmes d'affichage.
Cette méthodologie se veut concise et se résume en trois étapes : isoler (le ou) les éléments problématiques, identifier l'erreur, et enfin, résoudre le bug.
1) Isoler l'élément problématique
Un bug d'affichage est dû en général à des incompatibilités de navigateurs ou des marges (margin, padding) par défaut différentes selon les navigateurs.
La première étape à suivre est d'isoler l'élément ou les éléments qui ne se comportent pas comme vous l'aviez prévu.
Pour cela, nous allons utiliser deux techniques différentes grâce aux styles CSS : l'ajout de bordures colorées, de couleur d'arrière plan et le masquage des éléments un par un.
1.1) Ajout de bordures colorées
Actuellement, la très grande majorité des sites web est structurée à l'aide des balises <div>, <table>, <hn>, <p> et <ul>.
Les CSS offrent un moyen très simple d'isoler ces différentes balises de bloc : en leur appliquant une bordure colorée, vous bénéficierez immédiatement d'un visuel global de la structure de votre mise en page, sans toucher au contenu ni au code HTML.
En commençant votre feuille de style avec une partie ou toutes les déclarations suivantes vous aurez un aperçu de l'espace exact occupé par chacune des balises. Les tables et cellules seront entourées de noir et gris, les <div> en orange, les éléments de titre ou de paragraphes auront une bordure jaune, etc.
Ceci permettra très rapidement de mettre le doigt sur des décalages ou des erreurs d'affichage concernant l'un ou l'autre de ces éléments.
table {border: 1px solid black}
td {border: 1px dotted gray}
div {border: 1px solid orange}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}
ul {border: 1px solid green}
li {border: 1px solid lightgreen}
etc.
Signalons que cette technique, comme beaucoup d'autres, peut se réaliser instantanément grâce à l'extension Webdevelopper sur Firefox.
1.2) Ajout de couleur de fond
Cette étape permet de localiser les éventuels problèmes de fusion de marges. C'est un phénomène qui s'applique lorsque deux éléments de type bloc sont placés selon le flux normal, l'un sous l'autre. Dans ce cas, les marges hautes et basses fusionnent : la largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes… ce qui peut poser certains problèmes de décalages verticaux.
Afin de déterminer ce genre de problèmes, il est conseillé de coloriser l'ensemble des éléments en leur appliquant une couleur d'arrière plan.
Notez que cette technique va se révéler fastidieuse car il sera nécéssaire de colorer chacun des éléments (div#top, ul#menu, etc.) et non des ensembles (<div>, <ul>) comme dans la méthode des bordures colorées :
ul#menu {background-color: green}
ul#menu li {background-color: lightgreen}
div#header {background-color: yellow}
etc.
1.3) Masquer les éléments un par un
Parfois, il ne suffit pas de distinguer l'élément pour comprendre le problème posé. Il se peut que l'élément provoque des décalages ou autres influences.
Dans le même ordre d'idée que la technique précédente, il peut être intéressant de masquer chaque élément un par un pour déterminer avec certitude lequel est en cause.
Pour cela, appliquons un display none successivement sur chaque élément (nommé en général par un id ou une classe).
Cette procédure sera certainement longue car nécessite un tâtonnement au cas par cas, mais peut se révéler efficace.
balise {display: none;}
etc.
1.4) Suppression de toutes les marges
Toutes les balises bloc (sauf <div>) possèdent des marges internes (padding) et externes (margin) par défaut.
Le problème est que cette valeur par défaut est différente d'un navigateur à l'autre et provoquera un rendu différent sur chaque navigateur.
Il s'agit certainement de l'explication la plus courante lorsque des décalages apparaissent entre les différentes plateformes.
Le meilleur moyen d'identifier un problème de marges sur certains éléments est de… supprimer toutes les marges de tous les éléments.
Le principe est d'utiliser le sélecteur universel (*), qui s'appliquera à toutes les balises, et d'y mettre les marges à zéro :
* {margin: 0; padding: 0;}
Commencez votre feuille de style par cette déclaration. Si les décalages involontaires disparaissent, vous aurez détecté un problème de marges par défaut. A vous ensuite d'isoler l'élément qui provoque ce décalage.
2) Identifier l'erreur
A présent que les balises concernées sont isolées, la deuxième étape est de cerner quel est le problème posé par ces balises.
2.1) Soumission aux Validateurs
Souvent, des erreurs proviennent de la "grammaire" et de la conception même du document. Soumettre sa page aux différents Validateurs est une phase nécessaire pour détecter ces problèmes.
Passez sur le validateur (X)HTML et le validateur CSS pour cerner ces erreurs et y remédier.
3) Résoudre le problème
Le plus dur est fait : l'erreur est identifiée et les éléments concernés sont isolés.
A ce stade, les solutions sont souvent nombreuses. La plupart sont décrites dans cette FAQ.
Revenons sur les problèmes et solutions les plus fréquentes :
3.1) Modèle de boîte
Chaque élément possède des dimensions, des bordures, des marges internes (padding) et externes (margin). C'est le Modèle de boîte.
Lorsque votre document n'est pas valide (mode Quirks) Internet Explorer interprête les dimensions des éléments différemment des autres navigateurs lorsque des bordures ou marges internes (padding) sont spécifiés.
Openweb explique ce phénomène : http://openweb.eu.org/articles/dimensions_boites_css/
Un billet de blog va plus loin dans l'explication et dans les solutions : http://blog.alsacreations.com/2006/10/23/296-a-propos-du-modele-de-boite-microsoft-ou-quirks
Des solutions globales sur ce lien :
http://css.alsacreations.com/Bases-et-indispensables/Mon-site-valide-en-XHTML-Strict-n-est-pas-compatible-partout
3.2) Positionnements et valeurs problématiques
Certains schémas de positionnement sont paradoxaux et ne peuvent s'appliquer en même temps.
Pas de solution mirace, il faut pour y remédier comprendre parfaitement les différentes formes de positionnement en CSS :
* La mise en page CSS (OpenWeb) : http://www.openweb.eu.org/mise_en_page/
* Savoir utiliser et positionner les éléments (Alsa) : http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
Des soucis d'un autre ordre peuvent provenir lorsque des valeurs en em ou en poucentage sont employées.
Pour le premier cas, sachez que ces unités relatives sont héritées et se réfèrent à la taille du parent : http://css.alsacreations.com/Tutoriels-et-articles-divers/Comprendre-l-heritage-et-la-parente-des-styles-CSS
Dans le second cas, un problème courant est celui de l'obtention d'une hauteur égale à 100% de la page (voir dans cette FAQ)
3.3) Parentés interdites
Pour finir cette méthodologie rapide, notons que certains problèmes peuvent survenir d'une mauvaise imbrication de balises.
Vous savez que les balises se distinguent globalement en deux groupes : les éléments bloc et les élements en-ligne. Chacun des groupes a ses spécificités et les en-ligne ne peuvent pas contenir de balises de type bloc.
Mais il faut savoir qu'il existe des exceptions à cette règle de base. Connaître ces exceptions permettra de comprendre certaines erreurs des validateurs et certains défauts de mise en page (voir explications dans cette FAQ)
Ces différences ne sont pas nombreuses et il est nécessaire de les connaître pour résoudre presque tous les problèmes d'affichage.
Cette méthodologie se veut concise et se résume en trois étapes : isoler (le ou) les éléments problématiques, identifier l'erreur, et enfin, résoudre le bug.
1) Isoler l'élément problématique
Un bug d'affichage est dû en général à des incompatibilités de navigateurs ou des marges (margin, padding) par défaut différentes selon les navigateurs.
La première étape à suivre est d'isoler l'élément ou les éléments qui ne se comportent pas comme vous l'aviez prévu.
Pour cela, nous allons utiliser deux techniques différentes grâce aux styles CSS : l'ajout de bordures colorées, de couleur d'arrière plan et le masquage des éléments un par un.
1.1) Ajout de bordures colorées
Actuellement, la très grande majorité des sites web est structurée à l'aide des balises <div>, <table>, <hn>, <p> et <ul>.
Les CSS offrent un moyen très simple d'isoler ces différentes balises de bloc : en leur appliquant une bordure colorée, vous bénéficierez immédiatement d'un visuel global de la structure de votre mise en page, sans toucher au contenu ni au code HTML.
En commençant votre feuille de style avec une partie ou toutes les déclarations suivantes vous aurez un aperçu de l'espace exact occupé par chacune des balises. Les tables et cellules seront entourées de noir et gris, les <div> en orange, les éléments de titre ou de paragraphes auront une bordure jaune, etc.
Ceci permettra très rapidement de mettre le doigt sur des décalages ou des erreurs d'affichage concernant l'un ou l'autre de ces éléments.
table {border: 1px solid black}
td {border: 1px dotted gray}
div {border: 1px solid orange}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}
ul {border: 1px solid green}
li {border: 1px solid lightgreen}
etc.
Signalons que cette technique, comme beaucoup d'autres, peut se réaliser instantanément grâce à l'extension Webdevelopper sur Firefox.
1.2) Ajout de couleur de fond
Cette étape permet de localiser les éventuels problèmes de fusion de marges. C'est un phénomène qui s'applique lorsque deux éléments de type bloc sont placés selon le flux normal, l'un sous l'autre. Dans ce cas, les marges hautes et basses fusionnent : la largeur de la marge finale devient la valeur la plus grande entre celles des marges adjacentes… ce qui peut poser certains problèmes de décalages verticaux.
Afin de déterminer ce genre de problèmes, il est conseillé de coloriser l'ensemble des éléments en leur appliquant une couleur d'arrière plan.
Notez que cette technique va se révéler fastidieuse car il sera nécéssaire de colorer chacun des éléments (div#top, ul#menu, etc.) et non des ensembles (<div>, <ul>) comme dans la méthode des bordures colorées :
ul#menu {background-color: green}
ul#menu li {background-color: lightgreen}
div#header {background-color: yellow}
etc.
1.3) Masquer les éléments un par un
Parfois, il ne suffit pas de distinguer l'élément pour comprendre le problème posé. Il se peut que l'élément provoque des décalages ou autres influences.
Dans le même ordre d'idée que la technique précédente, il peut être intéressant de masquer chaque élément un par un pour déterminer avec certitude lequel est en cause.
Pour cela, appliquons un display none successivement sur chaque élément (nommé en général par un id ou une classe).
Cette procédure sera certainement longue car nécessite un tâtonnement au cas par cas, mais peut se révéler efficace.
balise {display: none;}
etc.
1.4) Suppression de toutes les marges
Toutes les balises bloc (sauf <div>) possèdent des marges internes (padding) et externes (margin) par défaut.
Le problème est que cette valeur par défaut est différente d'un navigateur à l'autre et provoquera un rendu différent sur chaque navigateur.
Il s'agit certainement de l'explication la plus courante lorsque des décalages apparaissent entre les différentes plateformes.
Le meilleur moyen d'identifier un problème de marges sur certains éléments est de… supprimer toutes les marges de tous les éléments.
Le principe est d'utiliser le sélecteur universel (*), qui s'appliquera à toutes les balises, et d'y mettre les marges à zéro :
* {margin: 0; padding: 0;}
Commencez votre feuille de style par cette déclaration. Si les décalages involontaires disparaissent, vous aurez détecté un problème de marges par défaut. A vous ensuite d'isoler l'élément qui provoque ce décalage.
2) Identifier l'erreur
A présent que les balises concernées sont isolées, la deuxième étape est de cerner quel est le problème posé par ces balises.
2.1) Soumission aux Validateurs
Souvent, des erreurs proviennent de la "grammaire" et de la conception même du document. Soumettre sa page aux différents Validateurs est une phase nécessaire pour détecter ces problèmes.
Passez sur le validateur (X)HTML et le validateur CSS pour cerner ces erreurs et y remédier.
3) Résoudre le problème
Le plus dur est fait : l'erreur est identifiée et les éléments concernés sont isolés.
A ce stade, les solutions sont souvent nombreuses. La plupart sont décrites dans cette FAQ.
Revenons sur les problèmes et solutions les plus fréquentes :
3.1) Modèle de boîte
Chaque élément possède des dimensions, des bordures, des marges internes (padding) et externes (margin). C'est le Modèle de boîte.
Lorsque votre document n'est pas valide (mode Quirks) Internet Explorer interprête les dimensions des éléments différemment des autres navigateurs lorsque des bordures ou marges internes (padding) sont spécifiés.
Openweb explique ce phénomène : http://openweb.eu.org/articles/dimensions_boites_css/
Un billet de blog va plus loin dans l'explication et dans les solutions : http://blog.alsacreations.com/2006/10/23/296-a-propos-du-modele-de-boite-microsoft-ou-quirks
Des solutions globales sur ce lien :
http://css.alsacreations.com/Bases-et-indispensables/Mon-site-valide-en-XHTML-Strict-n-est-pas-compatible-partout
3.2) Positionnements et valeurs problématiques
Certains schémas de positionnement sont paradoxaux et ne peuvent s'appliquer en même temps.
Pas de solution mirace, il faut pour y remédier comprendre parfaitement les différentes formes de positionnement en CSS :
* La mise en page CSS (OpenWeb) : http://www.openweb.eu.org/mise_en_page/
* Savoir utiliser et positionner les éléments (Alsa) : http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS
Des soucis d'un autre ordre peuvent provenir lorsque des valeurs en em ou en poucentage sont employées.
Pour le premier cas, sachez que ces unités relatives sont héritées et se réfèrent à la taille du parent : http://css.alsacreations.com/Tutoriels-et-articles-divers/Comprendre-l-heritage-et-la-parente-des-styles-CSS
Dans le second cas, un problème courant est celui de l'obtention d'une hauteur égale à 100% de la page (voir dans cette FAQ)
3.3) Parentés interdites
Pour finir cette méthodologie rapide, notons que certains problèmes peuvent survenir d'une mauvaise imbrication de balises.
Vous savez que les balises se distinguent globalement en deux groupes : les éléments bloc et les élements en-ligne. Chacun des groupes a ses spécificités et les en-ligne ne peuvent pas contenir de balises de type bloc.
Mais il faut savoir qu'il existe des exceptions à cette règle de base. Connaître ces exceptions permettra de comprendre certaines erreurs des validateurs et certains défauts de mise en page (voir explications dans cette FAQ)
Liens complémentaires