Mon site validé en XHTML Strict n'est pas compatible partout. Pourquoi  ?

Que se passe-t-il alors ? On vous aurait menti ? Les Normes et les Standards ne seraient que supercherie ?

La connaissance des trois points suivants va vous permettre d'avancer et de mieux comprendre le principe de l'utilisation stricte des normes :

• Une Norme n'assure pas une compatibilité automatique
• Les navigateurs ont des limitations sur certaines recommandations
• Les balises ont des marges et paddings par défaut différentes

Une Norme n'assure pas la compatibilité

L'un des avantages d'un document aux Normes est la compatibilité multi-plateformes. Faire selon les recommandations permet non-seulement qu'un site soit multi-compatible, mais surtout qu'il le reste dans le futur. Mais...

... Vous pouvez très bien concevoir un site Valide XHTML Strict qui ne ressemble à rien. Tout simplement parce que le Validateur n'est pas une baguette magique : il vérifie si la syntaxe est bonne, si les balises sont propres.

Par contre, il lui est impossible de vérifier si vous avez utilisé les bonnes balises au bon endroit. Ni de savoir si votre paragraphe (<p>) est bien un paragraphe et non un titre (<Hn>), etc...

Par exemple, vous pouvez très bien définir un bloc qui fait 70000px de haut. C'est propre et Valide, mais ça ne ressemble à rien.

Avoir un site Valide n'est qu'une première (bonne) étape. Mais elle n'est pas suffisante.

Pour résumer, on pourrait dire que les Normes vous assurent que l'orthographe de votre site est propre, mais cela n'empêche pas que sa grammaire peut laisser à désirer.

Les bugs des navigateurs

Voilà un autre problème de taille : tous les navigateurs sont variables au niveau de leur respect des Normes. Certains navigateurs comme Mozilla et autres geckos (Netscape, Firebird, Firefox) respectent du mieux possible ces normes alors que d'autres comme Internet Explorer n'en font pas une priorité et sont souvent très permissifs par rapport à la rigueur des standards.

Il existe donc des différences qui peuvent être importantes du fait des bugs de certains navigateurs et qui n'ont pas de rapport avec le langage utilisé (ce problème est le même que votre site soit en XHTML / CSS qu'en HTML 3.2 par exemple)

La plus fréquente est ce qu'on appelle le "Modèle de boites Microsoft" : Internet Explorer interprête à sa manière les dimensions des boites (c'est à dire les blocs avec padding et border).

Selon le modèle standard, la largeur apparente d'une boîte sera logiquement égale à la somme de : la largeur spécifiée pour son contenu (propriété CSS width) + la largeur totale de son remplissage gauche/droite + la largeur totale de ses bordures gauche/droite.

Une boîte ayant un contenu de 250 pixels, des padding latéraux de 20 pixels chacun et des bordures latérales de 5 pixels chacune occupera donc à l'écran une largeur totale de : 250 + 20 + 20 + 5 + 5 = 300 pixels.

Mais le modèle de boîte Microsoft considère pour sa part que le remplissage et les bordures prennent place à l'intérieur de la zone de contenu. La largeur apparente d'une boîte sera alors égale à la seule largeur spécifiée pour contenu.

La boîte précédente n'occupera donc à l'écran qu'une largeur de 250 pixels. Sa zone de contenu se trouvera réduite des dimensions de bordure et de remplissage, soit ici 50 pixels par rapport au modèle standard.

Les différences peuvent être très importantes sur le document final.

Voici un tableau complet regroupant les propriétés CSS et leur bugs éventuels sur chacun des navigateurs. Un must : http://www.richinstyle.com/bugs/table.html [en]

Pour contourner ce problème, plusieurs solutions sont envisageables :

• Il faut éviter de donner un "width" à un élément qui possède des padding latéraux (gauche/droite) ou des bordures latérales. Préférer donner des margin externes à cet élément.
• Il faut éviter de donner un "height" à un élément qui possède des padding verticaux (haut/bas) ou des bordures verticales. Préférer donner des margin externes à cet élément.
  Par exemple, votre div doit faire 15em de large et vous voulez lui attribuer un espace interne (padding-right) de 2em à droite. Ceci va poser des problèmes de modèle de boite. Evitez le padding et attribuez un margin-right au contenu de ce bloc (paragraphes, autres div, etc.)... ou alors gardez le padding, mais ne donnez pas de largeur au div conteneur (vous pouvez délimiter sa taille en le limitant par des marges) !
  Pour information, si vous aviez besoin d'un padding-top ou bottom, cela n'aurait pas posé de problème de dimensions... sauf si vous aviez attribué une hauteur à votre bloc div.
• il est possible d'utiliser des hacks (bidouilles) pour feinter IE (voir liens ci-dessus).

Les marges et paddings par défaut

Là encore, il s'agit de différences propres à chaque navigateur qui n'ont pas directement de rapport avec la norme XHTML.

Chaque balise de bloc a des marges et un padding par defaut qui varient d'un navigateur à l'autre si on ne les spécifie pas explicitement.

La balise la plus connue est <body>, mais c'est aussi le cas pour toutes les balises en bloc : paragraphe (<p>), citation (<blockquote>), formulaire (<form>, <input>,...), liste (<ul>, <li>), titres (<hx>), etc... sauf la balise <div> qui est la seule balise en bloc à ne pas avoir de marges et padding par défaut.

Prenons l'exemple de la balise <body>. Si vous ne définissez pas ses marges, vous aurez un espace en haut et à gauche de votre site. Ce sont les marges du document et leur dimension varie selon les navigateurs.

Il en est de même pour la balise de paragraphe (<p>) qui possède une marge basse par défaut, c'est pour cela que vous avez l'impression d'avoir un "saut de ligne" entre chaque paragraphe contrairement aux textes séparés par une balise <br />. Il vous suffirait pourtant de supprimer la marge basse de la balise de paragraphe pour ne plus avoir cet espace : p {margin-bottom:0}

Ces marges par défaut posent souvent des problèmes de positionnement auxquels on ne s'attendait pas : en effet, une liste (<ul>) ne sera pas placée au même endroit sur Internet Explorer et Mozilla, simplement à cause de ses marges par défaut qui l'entourent.

Le mieux pour être sûr de la compatibilité est d'imposer systématiquement ces marges et padding (ou de les mettre à zéro) si vous pensez qu'elles risquent de poser des problèmes de positionnement.

Conclusion et solutions

Avant de taper sur les Normes XHTML et sur le Validateur W3C, posez-vous la question de savoir si votre grammaire est juste également et si votre problème ne vient pas de limitations de certains navigateurs plutôt que du langage XHTML.