[Résolu] Pb : Affichage sans Doctype != avec Doctype

Bonjour,

Je comprends pas, l'affichage de ma page sans doctype en en-tete est ok dans IE6, Firefox 1.0.6, Netscape 7 et Opera 7 mais dès que je rajoute une ligne Doctype, quelle qu'elle soit (html4, xhtml, -transitionnal -strict,...), l'affichage de la page déconne complet!

Exp ici:
-Sans doctype:
http://www.allemagne-au-max.com/doctype/sans_doctype.htm
-Avec doctype:
http://www.allemagne-au-max.com/doctype/doctype_html4_loose.htm
http://www.allemagne-au-max.com/doctype/doctype_xhtml1_strict.htm
http://www.allemagne-au-max.com/doctype/doctype_xhtml1_transitional.htm

Pourtant, Laurent Denis indique ici :

"Contrairement à ce qu'on pourrait croire, [la DTD] ne sert pas aux navigateurs Web actuels à comprendre la structure d'une page (X)HTML : ceux-ci "lisent" ce code (X)HTML sans se servir de la DTD pour le déchiffrer, en se servant seulement des "règles" contenus dans leur propre "moteur" .

C quoi le problème Docteur ?
Modifié par SebOmaX (20 Sep 2005 - 17:39)

Bonjour.
C'est parce que les navigateurs, en particulier IE, utilisent un mode de rendu si un doctype valide est trouvé ou non.
On appelle ça le mode d'affichage standard / kirc. (je ne suis pas sûr de l'orthographe de ce dernier mot).
Quand tu ne mets pas de doctype, ta page s'affiche avec les anciens algorythmes de rendu, c'est normal que la mise en page que tu prévois avec le nouveau mode se casse complètement avec l'ancien.

Maintenant, si ton code s'affiche correctement sans doctype et foire complètement avec doctype, il faut voir pour passer aux standards !

Bonne chance.

Ben justement, j'ai complètement changé la structure de mes pages en utlisant le super bouquin de Raphael, CSS 2: Pratique du design web (bravo et merci au passage pour les explications très pédagogiques et pratiques !)

J'ai remplacé le positionnement par tableaux en utilisant des balises agréées XHTML (div, id, class,...), j'ai bien galéré d'ailleurs pour positioner mes différents ensembles mais maintenant que je suis arrivé à un résultat correct j'aimerais bien trouvé le doctype qui correspond à mon code. Il doit bien y en avoir un qui convient, non ?

J'ai utilisé très peu d'attributs qui ne sont pas agréés XHTML (target="_blank", qqs width & height pour les images) donc je pensais qu'un doctype transitional conviendrait mais même les doctype HTML4 déglinguent ma mise en page...

Franchement je saisis pas trop...

Bonjour SebOmax,

SebOmaX a écrit :
Bonjour,

Je comprends pas, l'affichage de ma page sans doctype en en-tete est ok dans IE6, Firefox 1.0.6, Netscape 7 et Opera 7 mais dès que je rajoute une ligne Doctype, quelle qu'elle soit (html4, xhtml, -transitionnal -strict,...), l'affichage de la page déconne complet!

Avant toute autre chose, revoir ton utilisation des id qui est incorrecte et qui est susceptible d'être à l'origine de problèmes de rendus lorsque la présence du DocType provoque le traitement "strict" de ton code.

En effet, tu utilises le même id à plusieurs reprises. Or un élément <div id="foo"> doit être unique dans un fichier HTML. Remplace les id="..." répétés par des class="..." et modifie tes sélecteurs CSS en remplaçant # par . (point) pour les id concernés.

Après, si le problème de rendu avec doctype n'est pas résolu, il faudra regarder la CSS, et vérifier que celle-ci n'a pas été écrite en fonction du mode de rendu propre à Microsoft, au lieu du mode de rendu standard. Ce mode de rendu est partiellement reproduit par certains navigateurs quand l'absence de doctype leur indique un document non standard.

<edit>Sinon, pour la citation ci-dessus : je ne parlais de la ligne du Doctype (Document Type Declaration), mais de la DTD au sens de Document Type Definition, c'est à dire le fameux fichier hébergé sur le site du W3C dont l'url est présente dans le doctype. C'est ce fichier que le navigateur ne va pas lire car il n'en a pas besoin pour interpréter le HTML.

En revanche, le navigateur lit le Doctype, et bascule selon la présence et la syntaxe de celui-ci dans un mode de rendu strict ou dans un mode de rendu Quirks destiné aux pages non conformes. Voir le billet du blog Alsa sur le Doctype switching pour les détails.
Modifié par Laurent Denis (19 Sep 2005 - 19:44)

Ok, je cerne mieux l'origine de mon soucis désormais. Je vais m'atteler à changer les id répétés par des class et à modifier la css afin d'obtenir l'affichage désiré.

Juste un dernier détail: concernant le doctype à choisir, j'opterais volontiers pour un xhtml1-transitional puisque mon code est relativement conforme au xhtml mais pas en totalité du fait de quelques attributs anciens (target="_blank", width pour les images). Penses-tu que ça fairait l'affaire ?

En tout cas, merci beaucoup pour ta réponse.

SebOmaX a écrit :
Juste un dernier détail: concernant le doctype à choisir, j'opterais volontiers pour un xhtml1-transitional puisque mon code est relativement conforme au xhtml mais pas en totalité du fait de quelques attributs anciens (target="_blank", width pour les images). Penses-tu que ça fairait l'affaire ?

L'attribut target ne te laisse pas le choix : c'est une DTD transitional (HTML ou XHTML selon la syntaxe adoptée). En revanche, les attributs height et width des images sont valides et recommandés quelque-soit la DTD stricte ou transitional.
Voir http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir pour les détails

En outre j'ai pu à l'occasion améliorer mon code (cf: chgt du id des éléments multiples par des class), mais en le validant (avec validome.org), j'ai vu que mes balises:

<a class="bobby" href=""><[#red]h3[/#] class="accueil">titre bidon</h3></a>

n'étaient pas acceptées .

Message d'erreur:

h3 est interdit ici. Il manque la balise `object`, `applet`, `map`, `iframe`, `button`, `ins`, `del`.

J'avoue que je ne saisis pas bien pourquoi cette balise h3 n'est pas acceptée. Si on ne peut plus créer d'url à partir des titres, ça n'est pas très pratique. Plus moyen de créer des tables des matières cliquables par exemple .

A moins que j'ai oubliée quelquechose d'important mais je vois pas quoi...

C'est une mauvais interprêtation du message d'erreur : tu as placé une balise de type bloc (h3) dans une balise de type en-ligne (a), ce qui n'est pas valide.
Si tu veux un titre sous forme de lien, il faut faire l'inverse : inclure le lien dans le titre.
Modifié par Raphael (20 Sep 2005 - 18:31)

Ben oui, ça a l'air si évident maintenant que tu le dis . Le pire c'est que je l'avais bien codé fut un temps et puis, je sais plus pourquoi j'ai inversé l'ordre des balises...

Surement parce que le rendu visuel ne me convenait pas...

Va comprendre Charles !