5568 sujets

Sémantique web et HTML

Le XHTML 1.0 strict m'a tué...

Hello,

Il est 4h30 du mat et viens seulement de trouver d'où vient mon problème sans le comprendre...et croyez moi j'ai les nerfs... Smiley fache

Je travaille habituellement en XHTML transitionnel, et sur un document je suis passé en Strict car je voulais abolir les framesets définitivement...

Le problème est que j'avais un espace entre deux cellules d'un tableau seulement visible sous FF, j'ai tout essayé et après 4h de recherche le problème vient du doctype... voici le code

<!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>titre</title>


</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="800" height="588" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td ><img src="image1.png"  width="800" height="125"  border="0" /></td>
      </tr>
      <tr>
        <td ><img src="image2.jpg"  width="800" height="463"  border="0" /></td>
      </tr>
    </table>
</body>
</html>


Ce code place une marge blanche entre les deux cellules du tableau mais seulement sous FF et sous XHTML 1.0 strict. Si je repasse en transitionnel tout revient dans l'ordre.

Si quelqu'un peut m'expliquer pourquoi car à mon avis y a un truc que j'ai pas saisi en XHTML 1.0, en prinicpe FF est plus tolérant que I.E ! Donc bien vénère d'avoir perdu 4h de ma vie...

Merci par avance. Smiley lol

@+
Bonjour copperfield,

En mettant les marges et padding à zéro aux éléments de ton tableau, en appliquant un display block aux images cela semble fonctionner, non ?
<!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>titre</title>
<style type="text/css" media="screen">
<!--
body,td,tr,table,img{
	margin:0;
	padding:0;
	border:none;
	}
td,tr,table {border-collapse:collapse;}
img{display:block;}
 -->
</style>
</head>
<body>
<table>
      <tr>
        <td ><img src="image1.png"  width="800" height="125" alt=""/></td>
      </tr>
      <tr>
        <td ><img src="image2.png"  width="800" height="463"  alt=""/></td>
      </tr>
    </table>
</body>
</html>


Je ne suis pas très sûr que le Doctype soit en cause ici ?!

*penser aux balises alt sur les images et "éventuellement" sortir le style du code (x)html Smiley cligne

Cdt,
Sylvain
a écrit :
*penser aux balises alt sur les images et "éventuellement" sortir le style du code (x)html Smiley cligne


Au delà des attributs "alt" des images, élaguer le code xhtml est en effet une très bonne idée. Smiley ravi
Merci pour ta réponse Sylvain.
Ton code marche bien mais je ne saisi pas l'utilité du display:block dans mon cas? (c'est la balise qui corrige le problème en tout cas)
Par contre, sans connaître exhaustivement les règles du XHTML 1.0 strict, je pense que c'est prendre le problème à l'envers, c'est à dire qu'on remédie aux problèmes avec des astuces et la tendance se confirme Smiley bawling

Une chose est sure c'est que le problème de marge n'apparait pas en transitionnel ! Avec un code aussi basique que mon exemple, je trouve le XHTML strict super sympa...j'ai l'impression que c'est la normalisation mais vers la complication !

Je suis un peu grincheux car je n'ai pas dormi mais surtout créer deux cellules, y coller deux images, avoir mis toutes mes marges à 0 (croyez moi je les ai toutes faites Smiley lol ), pour me retrouver avec une marge sortie de nulle part seulement sous FF, ne venez pas me dire que c'est normalisé ou alors le XHTML 1.0 strict c'est du "full CSS" ?

Le truc est de savoir si je vais avoir d'autres surprises comme ça car à ce moment là faut pas vanter les bien fait du XHTML 1.0 strict, je suis vraiment vénère Smiley fache
Si quelqu'un peut m'expliquer pourquoi mon code marche en transitionnel et pas en strict, ça serait super sympa...

Merci par avance

@++

@ Yodaswii Ps:Oui je suis d'accord mais pour trouver le problème le code est au plus simple Smiley lol
Modifié par copperfield (16 May 2008 - 11:25)
Bah effectivement c'est aussi mon impression Patidou !
Mais ça n'empêche que côté normalisation c'est pas encore ça...
Sinon oui je travaille qu'avec Flash et Photoshop je crois que je n'ai jamais tapé une ligne de contenu text en html Smiley lol
C'est pour ça que les tableaux et moi c'est une grande histoire d'amour enfin jusqu'à hier soir XD

Finalement j'ai pas totalement faux avec le "Full CSS", je resterai donc en Transitionnel alors...
Tout ça pour en arriver à mon point de départ...je confirme le XHTML 1.0 strict m'a bien tué

Merci à tous pour vos réponses

@++
copperfield a écrit :
Mais ça n'empêche que côté normalisation c'est pas encore ça...


Mais si ça l'est, c'est juste une question de faire le boulot de la bonne manière en séparant le contenu de la présentation. Mais si tu veux continuer dans cette voie... Smiley cligne Smiley smile

P.S. : ton doctype est bien la première ligne de ton code html, sans caractères avant?
Héhé... le problème c'est qu'avec flash la présentation est le contenu.
Mes pages Html sont à base de tableaux de 2 à 3 cellules et c'est tout Smiley lol
Enfin si vous voulez comprendre ma douleur vous pouvez allez voir un de mes sites...

http://www.xtreme-manipulation.com/index2.html (c'est en construction, je travaille sur un autre site pour le moment XD) ...vous pouvez cliquer sur les rubirques video et téléchargement, vous pouvez aussi libérer votre CPU Smiley sweatdrop

Patidou, pourquoi tu dis " sans caractère avant" la déclaration de mon doctype n'est pas correct ?

@+
Modifié par copperfield (16 May 2008 - 12:47)
copperfield,

Tu trouveras moultes informations sur les différences entre le (x)html transitional et strict et ce qu'implique le choix de l'un ou de l'autre (ici et sur la toile).
Je ne suis pas assez callé pour te répondre de manière satisfaisante et pleinement compréhensive pour lever ton incompréhension, d'autres ici feront cela beaucoup mieux que moi.
De même qu'il me sera difficile de t'expliquer le niveau de "complaisance" de chaque navigateurs (la manière dont ils s'accomodent de nos erreurs de codage)

Saches tout de même que ton code en transitional est invalide, que chaque élément a un rendu par défaut différent selon le navigateur utilisé ( http://css.alsacreations.com/outils/rendu/rendu-css-elements.html ) et que ces mêmes navigateurs ont leurs propres failles (bugs d'interprétation http://www.richinstyle.com/bugs/table.html ) Firefox compris même s'il se situe très au dessus de certains navigateurs.

Partant de ce constat, ma démarche a été de partir de zéro (reset du rendu par défaut des éléments qui nous interessaient) et de les redéfinir à ma convenance, s'agissant de l'image ( inline par défaut), je me suis dit (peut-être à tord) qu'elle se comportait comme une ligne de texte (donc avec un espace sous la ligne pour les jambages des lettres telles que le p,q,y...plus d'explication ici : http://forum.alsacreations.com/faq/faq-58-Espaces-indesirables-sous-les-images.html d'où l'idée du display block (qui à ce propos dans ton exemple ne semble pas se suffire à lui seul Smiley cligne )

Je me fourvoie "peut-être" (sans doute... Smiley lol ), je manque certainement de clarté, de connaissance et de pédagogie, mais il ne me semble pas qu'il s'agisse de trouver vaille que vaille des astuces, mais plutôt qu'il faille composer avec les navigateurs qui ne sont pas infaillibles ni exempt de toutes erreurs.
Sans oublier la rigueur qu'impose le choix de ce doctype.

Abandonner la mise en page en tableau devrait également solutionner pas mal de soucis d'interprétation Smiley cligne

En espérant que ton courroux légitime s'estompe et qu'une bonne âme te donne enfin le saint graal Smiley cligne

Cdt,
Sylvain
Modifié par 6l20 (03 Aug 2008 - 23:11)
Excellent c'est exactement mon problème... Smiley fache
Merci pour ton Lien Igor, il est parfait, je vais le lire a tête reposé même si j'ai compris le principe.
Sinon bien joué Sylvain, tu peux jouer à l'euro Million ce soir Smiley lol si tu pouvais me dire tes numéros aussi XD
Franchement respect...

Le truc qui m'a enervé c'est que je voulais des pages validées W3C pour être tranquille avec les navigateurs et qu'au final même avec les dernières "normes" je me retrouve avec des interprétations de navigateurs différentes...donc forcément je n'ai pas incriminé le Doctype de type Strict, au lieu de trouver une solution pour y remédier, j'ai chercher à comprendre d'où venait le problème mais sincèrement je n'aurai jamais trouvé Smiley cligne ...donc un grand merci à vous !!!

@+
6l20 a écrit :

Waouh...j'ai bon alors ?! Smiley lol

Oui tout bon Smiley smile
Pour compléter l'article d'Igor, le mode Almost standard (presque standard) qui est déclenché en présence d'un Doctype Transitionnal
est une invention de Mozilla pour pallier à ces problème d'espace sous les images quand elles sont inclues dans des tableaux mais
ce mode n'est pas déclenché sur les première version de Gecko. Opera et Safari ont fait de même dans leur dernière version.
IE lui se comporte à ce niveau comme le mode Almost standard des principaux navigateurs alternatifs que ce soit une DTD strict ou transitionnal.
Modifié par Hermann (16 May 2008 - 19:17)
Sujet clos
Aller à