un simple menu : Transitional vers strict

**gomodo** · 13/01/2009, 18h25

Bonjour à tous.

C'est encore avec une délectation extrême que je post ce sujet.
Plus je les utilise et plus j'y prend plaisir. Les css, c'est vraiment tout ce que j'aime : simple, fiable, pérenne et surtout fait gagner beaucoup de temps... ..le summum de l'informatique.

Bon, j'arrête de plaisanter.

J'ai un ridicule tableau dans un div.. et je viens de m'apercevoir qu'il déborde avec firefox 3.0.5.. en "XHTML 1.0 Strict" (pas en "XHTML 1.0 Transitional").

Bref.. le code est le même, la seule différence c'est l'entête html.

Le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#menu_img{
	position:absolute;
	z-index:2;
	left: 434px;
	top: 100px;
	width: 420px;
	height: 25px;
	visibility: visible;
	overflow: visible;
	vertical-align: middle;
	text-align: left;
	margin: 0;
	padding: 0;
	border: none;
	background-color: #FF0000;
	cursor: pointer;
}
-->
</style>
</head>
<body >
<div id="menu_img">
	<table height="100%" border="0" cellspacing="0" bgcolor="#00FFFF">
	  <tr><td><img src="image22x22.png" width="22" height="22" /></td>
	  <td>tableau bleu dans div rouge (sans sous-div)</td>
	 </tr></table>
</div>
</body>

En "XHTML 1.0 Transitional", résultat correct: version avec entête transitional
En "XHTML 1.0 Strict", résultat incorrect: version avec entête strict

Soit je fait comme 95% des pékuns, je me pose pas de question, je mets transitional "parce que ça marche". Soit j'essaye de perdre une fois de plus du temps a comprendre pourquoi ça coince..

(Excusez-moi je suis un peu remonté de perdre autant de temps pour un pauvre tableau dans un div..

).

**Erwan31** · 13/01/2009, 18h39

Bonjour,
ton problème est exposé ici (en)

Tu es dans un des cas de figure que devrait impliquer le passage en Transitionnal puisqu'avec ce Doctype les principaux navigateurs alternatifs basculent en mode de rendu almost standard (presque standard) et que ce mode a été conçu par Mozilla pour répondre à ce genre de problème (images dans un tableau).
> Ou alors ajoute

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

td img {vertical-align:middle}

**gomodo** · 13/01/2009, 20h12

Merci.
J'ai ajouté le code dans le style, ça marche (mais j'avoue que je ne comprend pas trop pourquoi).

Tu explique que ce"cas de figure que devrait impliquer le passage en Transitionnal". C'est un cas de figure plutôt fréquent non ?

Dois-je en déduire que passer en mode strict c'est s'exposer a plus de problême qu'en transitional?
(En clair, je veux être efficace je reste en transitionnal, j'ai du temps à perdre je vais en mode strict ?)

**Erwan31** · 13/01/2009, 21h01

Envoyé par gomodo

Merci.
J'ai ajouté le code dans le style, ça marche (mais j'avoue que je ne comprend pas trop pourquoi).

C'est expliqué dans le lien que je te fournis.

Une image est un élément inline non remplacé, il se comporte donc comme les boîtes en-ligne de texte en s'affichant sur la ligne de base (vertical-align:baseline étant la valeur par défaut) et laisse l'espace nécessaire à l'affichage des jambage inférieures de certaines consonnes (p,y...)
Pour éviter cela on leur attribue souvent un display:block pour supprimer le comportement inhérent aux éléments inline ou alors on change son alignement vertical si un élément doit se trouver sur la même ligne (c'est ton cas).

Envoyé par gomodo

Tu explique que ce"cas de figure que devrait impliquer le passage en Transitionnal". C'est un cas de figure plutôt fréquent non ?

Pas vraiment les tableaux étant surtout fait pour afficher des données tabulaires et non des images

Envoyé par gomodo

Dois-je en déduire que passer en mode strict c'est s'exposer a plus de problême qu'en transitional?

Pas du tout, c'est je crois la seule différence existante qu'il existe au niveau du rendu. La suppression de l'espace sous les images est une fonctionnalité ajoutée dans les dernière version du moteur Gecko (la moteur de rendu de Firefox, SeaMonkey etc), ce qui rentre dans la logique de retro-compatibilité
permise par les DTD transitionnal et frameset. (attributs de présentation autorisés et mise en forme via les tableaux facilité en partie grâce au mode almost standard).
Bref le mode transitionnal est bien plus permissif et il faut le voir comme un mode de transition vers une séparation strict (d'ou le nom strict) entre structure/contenu et présentation CSS puisqu'en strict la grande majorité des attributs de présentation n'est pas permise (invalide).

Si tu souhaite progresser, je te conseil plutôt de passer par un DTD XHTML strict plus pédagogique lors de l'étape de validation de tes documents.

**gomodo** · 13/01/2009, 21h50

Merci pour tes explications et le temps que tu as bien voulu m'accorder.

Pas vraiment les tableaux étant surtout fait pour afficher des données tabulaires et non des images

C'est une remarque que je retrouve fréquemment.

Pourquoi exclure les images du groupe "des données tabulaires" ? Faire un tableau d'image ce n'est pas concevable ?
Honnêtement, j'ai du mal a comprendre l'argument pour justifier les problèmes d'affichages d'une pauvre image dans un pauvre tableau (ca fait beaucoup de pauvre.. mais c'est normal en période de crise).

En tout cas je vais suivre ton conseil et continuer a persevérer en strict.. ..tant que je trouverais du support de qualité comme ce soir

.

**Erwan31** · 13/01/2009, 22h30

Envoyé par gomodo

Pourquoi exclure les images du groupe "des données tabulaires"? Faire un tableau d'image ce n'est pas concevable ?

Si ça peut l'être si l'utilisation du couple DIV/CSS est problématique et trop peu robuste (problème de cohérence d'affichage d'un navigateur à l'autre dû à des différences ou des insuffisances d'implémentations CSS) et que cela ne pause aucun problème d'accessibilité, ce sont les tableaux de mise en forme.

J'aurais dû nuancer mon affirmation selon laquelle une image ne peut pas faire partie d'un tableau. Elle peut l'être si elle fait partie ou fait office de données tabulaires (grâce au alt mais c'est rare), mais une image décorative dans une cellule de tableau, c'est un peu has been.

un simple menu : Transitional vers strict

CSS

Discussions similaires

Partager

Partager