Accueil > Divers > Standards XHTML strict et prises de tête (cachez ces espaces que nous ne saurions voir)

Standards XHTML strict et prises de tête (cachez ces espaces que nous ne saurions voir)

Les standards ont du bon. Malgré tout, parfois, ils apportent leurs lots de petits problèmes sur lesquels on peut passer quelques heures en s’arrachant les cheveux (et il m’en reste si peu…)

Dernier exemple en date, ce sont 2 ou 3 mystérieux pixels qui apparaissent sous les balises images (img) lorsqu’on utilise le standard XHTML Strict. Pour illustrer le phénomène, prenons ce cas assez classique de montage d’image découpée en plusieurs tranches assemblées dans un tableau.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>
        <table width="200" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><img src="img/P1010478_01.jpg" alt="" /></td>
            </tr>
            <tr>
                <td><img src="img/P1010478_02.jpg" alt="" /></td>
            </tr>
        </table>
    </body>
</html>

Ce qui donne comme résultat (sous Firefox) :

Exemple de rendu des images en XHTML Strict

Les block images « poussent » leurs conteneurs (en l’occurrence la cellule de tableau) de quelques pixel en bas. Ca n’a évidement rien de très esthétique et ça n’est pas le résultat attendu.

Donc, à moins de changer la déclaration du type de document HTML, il va falloir ruser.

Pour contourner ce problème, il faudra définir l’affichage de vos images en mode « block » dans votre CSS. Vous pouvez le faire de plusieurs façons :

  • Systématiquement dans une déclaration CSS globale de vos balises img, l’inconvénient étant que celles-ci produiront un retour à la ligne (dans ce cas, il faudra les définir localement en mode float afin d’éviter ces retours).
  • En déclarant localement un style dans vos balises img de type style="display:block;".
  • En créant une classe spécifique que vous affecterez aux images nécessitant l’ajustement.

Cette dernière solution peut donner au final :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
		<style type="text/css" media="screen">
			.block {
				display:block;
			}
		</style>
    </head>
    <body>
        <table width="200" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><img src="img/P1010478_01.jpg" alt="" class="block" /></td>
            </tr>
            <tr>
                <td><img src="img/P1010478_02.jpg" alt="" class="block" /></td>
            </tr>
        </table>
    </body>
</html>

Et voila le rendu enfin correct :

Rendu des images correct en XHTML Strict (le beau papillon !)

Allez, à nous les montages de fou en XHTML Strict :)

Vous avez aimé cet article ? Partagez-le :
Categories: Divers Tags: , , , ,
  1. Pas encore de commentaire
  1. Pas encore de trackbacks

Optimization WordPress Plugins & Solutions by W3 EDGE