Le XHTML 1.0 strict m'a tué... - Forum Alsacréations : CSS et Standards Web

Auteur
copperfield	# 16 May 2008 - 04:42:44
15 Posts	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... 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. @+
15 Posts
6l20	# 16 May 2008 - 10:36:17
Chasseur de 1/2 Kiwiz Modérateur 889 Posts	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 Cdt, Sylvain XHTML: structure. CSS: présentation. Javascript: comportement.
Chasseur de 1/2 Kiwiz Modérateur 889 Posts
yodaswii	# 16 May 2008 - 11:10:00
The sky's the limit! 542 Posts	*penser aux balises alt sur les images et "éventuellement" sortir le style du code (x)html Au delà des attributs "alt" des images, élaguer le code xhtml est en effet une très bonne idée. Si tu te tapes la tête contre une cruche et que cela sonne creux n'en déduit pas que c'est la cruche qui est creuse... Ancien proverbe chinois.
The sky's the limit! 542 Posts
copperfield	# 16 May 2008 - 11:21:16
15 Posts	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 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 ), 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 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 Modifié par copperfield (16 May 2008 - 11:25)
15 Posts
Patidou	# 16 May 2008 - 11:34:39
447 Posts	Ben j'ai surtout l'impression que tu cherches à faire de la mise en page par tableaux non? Alors que quand on passe au strict et l'xthml la bonne méthode veut que l'on passe au tout css et n'utiliser les tableaux que pour les données tabulaires. Un tutoriel pour apprendre xhtml et css (tous les articles sont déjà en ligne) Modifié par Patidou (16 May 2008 - 11:35)
447 Posts
copperfield	# 16 May 2008 - 11:56:35
15 Posts	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 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 @++
15 Posts
Patidou	# 16 May 2008 - 12:32:46
447 Posts	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... P.S. : ton doctype est bien la première ligne de ton code html, sans caractères avant?
447 Posts
copperfield	# 16 May 2008 - 12:44:54
15 Posts	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 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 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)
15 Posts
6l20	# 16 May 2008 - 12:49:48
Chasseur de 1/2 Kiwiz Modérateur 889 Posts	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 ) Je me fourvoie "peut-être" (sans doute... ), 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 En espérant que ton courroux légitime s'estompe et qu'une bonne âme te donne enfin le saint graal Cdt, Sylvain Modifié par 6l20 (03 Aug 2008 - 23:11) XHTML: structure. CSS: présentation. Javascript: comportement.
Chasseur de 1/2 Kiwiz Modérateur 889 Posts
Igor	# 16 May 2008 - 13:10:47
Modérateur 5331 Posts	Images, tableaux et décalages mystérieux
Modérateur 5331 Posts
6l20	# 16 May 2008 - 13:18:41
Chasseur de 1/2 Kiwiz Modérateur 889 Posts	Igor a écrit : Images, tableaux et décalages mystérieux Waouh...j'ai bon alors ?! XHTML: structure. CSS: présentation. Javascript: comportement.
Chasseur de 1/2 Kiwiz Modérateur 889 Posts
copperfield	# 16 May 2008 - 13:52:34
15 Posts	Excellent c'est exactement mon problème... 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 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é ...donc un grand merci à vous !!! @+
15 Posts
Hermann	# 16 May 2008 - 15:33:14
Modérateur 2561 Posts	6l20 a écrit : Waouh...j'ai bon alors ?! Oui tout bon 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) La FAQ répond aux questions fréquemment posées. Vérifiez qu'elle ne contient pas une réponse à votre problème.
Modérateur 2561 Posts
Prévenir un modérateur