Suite au billet qui présentait un récapitulatif des moyens pour faire un site compatible sur tous les navigateurs actuels, voici à présent une petite méthodologie pour résoudre rapidement une grande partie des bugs d'affichage pouvant survenir avec les mises en page en CSS. 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.
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.
Ajout de couleur de fond
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 couleur de fond, 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 en gris, les <div> en beige, les éléments de titre ou de paragraphes auront une couleur kaki, 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 {background-color: lightgray}
td, th {background-color: gray}
div {background-color: beige}
form {background: bisque}
input, select, textarea {background-color: salmon}
h1, h2, h3, h4, h5, h6, p {background-color: darkkhaki}
ul {background-color: lightsteelblue}
li {background-color: silver}
etc.
Signalons que cette technique, comme beaucoup d'autres, peut se réaliser instantanément grâce à l'extension Webdevelopper sur Firefox.
Cette étape permet également 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.
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 :
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.
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.
Notez qu'une discussion sur l'usage de ce sélecteur universel a été ouverte sur le forum Alsa.
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.
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.
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 sur cet article traitant des problèmes de compatibilité entre navigateurs.
Revenons sur les problèmes et solutions les plus fréquentes :
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. Cependant, Internet Explorer se fonde sur un modèle personnel différent des autres, ce qui pose des problèmes de dimensions.
Les liens suivants vous donneront des explications et solutions à ce problème.
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 :
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.
Dans le second cas, un problème courant est celui de l'obtention d'une hauteur égale à 100% de la page.
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.