[HTML] Le doctype ne cause que des problemes chez moi

Version imprimable

Bonjour!

Je lis partout que les doctype permettent d'avoir un comportement moins dependent des navigateurs et plus rationnel. Or je constate tout a fait le contraire: sans doctype comportement a peu pres identique pour tout les navigateurs, resultat conforme au code html. Avec doctype tout va de travers, les resultat deviennent différents selon les navigateurs, et absolument pas conforme a mon code htlm...
Est-ce que j'ai choisit le mauvais doctype? Quelqu'un peu m'expliquer d'ou viennent ces problemes?

Regardez le code tres simple suivant:
Code:

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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style>  </style> </head> <body> <table height="200" width="200" border="0" cellspacing="0" cellpadding="0"><tr> <td width="200" height="200" bgcolor="#EEEEEE" valign="top" align="center"> <div style="position:relative; left:20; top:0; background-color:#0000FF; height:200; width:100; z-index:3;"> mot </div> </td></tr></table> </body> </html>
Il devrait afficher un rectangle gris de 200x200 (la table) avec dedans un rectangle bleu de 100x200, décalé horizontalement de 20px par rapport au centre du carré. C'est effectivement ce qui se passe sans doctype.
Avec doctype:
-dans div, left:20; n'est pas traité
-la balise div ne mesure pas 100x200 mais se réduit en hauteur a la hauteur du texte a l'intérieur et s'etale en largeur sur toute la largeur de la cellule du tableau
-align:center; du tableau n'est pas pris en compte (ca ne se voit pas sur cet exemple, mais ca se voit sur un autre exemple tout aussi simple)

Que faire? le code html semble vraiment interprété n'importe comment!

11/09/2007, 15h49
Bisûnûrs

Citation:

Envoyé par lysandre

Je lis partout que les doctype permettent d'avoir un comportement moins dependent des navigateurs et plus rationnel. Or je constate tout a fait le contraire: sans doctype comportement a peu pres identique pour tout les navigateurs, resultat conforme au code html. Avec doctype tout va de travers, les resultat deviennent différents selon les navigateurs, et absolument pas conforme a mon code htlm...
Est-ce que j'ai choisit le mauvais doctype? Quelqu'un peu m'expliquer d'ou viennent ces problemes?

:arrow:

Citation:

Envoyé par MasterOfChakhaL

cette balise indique quelle "grammaire" tu vas utiliser.
C'est cette ligne qui indique au navigateur comment il devrait interpréter ton code. Et a plus forte raison, le validateur a besoin de cette précision, sinon, il ne peut pas te dire si tu es valide sans que tu lui indique à quoi tu te conformes.

Si cela casse ton design, c'est parce que les différentes normes ne sont pas interprétées de la même manière. En l'absence de précision, le navigateur se débrouille comme il peut et tous les navigateurs ne se débrouillent pas de la même manière... Ce n'est pas à 100% vrai car les éditeurs suivent les recommandations du w3c avec une rigueur qui leur est propre, mais indiquer un doctype te permet, entre autres, d'uniformiser le rendu de tes pages sur les différents navigateurs existant.

Je te suggères de choisir ton doctype (tu trouveras beaucoup d'infos facilement avec notre ami google) puis de corriger les différents problèmes.

Citation:

Envoyé par lysandre

le code html semble vraiment interprété n'importe comment!

Ou alors c'est mal codé, au choix. Sans DOCTYPE, le navigateur se débrouille comme il peut avec le code qu'il voit. Avec DOCTYPE, il sait comment interpréter tel ou tel élément.

Dans ton cas, tu ne renseignes pas les unités dans ton CSS, cause de tous tes soucis.

left:20; => left:20px;
width:100; => width:100px;
height:200; => height:200px;

L'unité n'est pas optionnelle mais obligatoire en CSS.
Seul cas où elle ne l'est pas, lorsque la valeur est 0.

ah oui ca marche un peu mieux...
Par contre la propriété left n'est toujours pas interprétée.
Je remet le code au cas ou, mais je ne crois pas qu'il y ait de nouvelle coquille...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style>  </style> </head> <body> <table height="200px" width="200px" border="0px" cellspacing="0px" cellpadding="0px"><tr> <td width="200px" height="200px" bgcolor="#ECEBE6"> <div style="top:0px; left:20px; background-color:#ABCDEF; height:200px; width:100px; z-index:3;"> mot </div> </td></tr></table> </body> </html>
Je trouve ca quand meme tres peu pratique qu'il y ait trente-six mille facon d'interpréter le html selon les navigateurs, les doctypes,...
Une des raison pour lequel j'adore le php: contrairement a actionscript et surtout html, jamais eu de mauvaises surprises :P

11/09/2007, 16h06
Keihilin

Citation:

Envoyé par lysandre

Une des raison pour lequel j'adore le php: contrairement a actionscript et surtout html, jamais eu de mauvaises surprises :P

Ha ? Et avec PHP tu génères quoi ?
11/09/2007, 16h12
lysandre

Citation:

Envoyé par Keihilin

Ha ? Et avec PHP tu génères quoi ?

Je veux dire bien sur que la page html générée a partir du php est toujours conforme a ce qui est attendu, jamais de mauvaise surprise en ce qui concerne le code purement php (en tout cas jamais eu).

L'un de vous aurait-il une idée a propos de l'attribut left?
11/09/2007, 16h15
Bisûnûrs

Citation:

Envoyé par lysandre

ah oui ca marche un peu mieux...
Par contre la propriété left n'est toujours pas interprétée.
Je remet le code au cas ou, mais je ne crois pas qu'il y ait de nouvelle coquille...

Si c'est le code tel que tu l'as, c'est normal. :roll:

D'une part, tu as enlevé le position:relative, donc le left n'est pas interprété, d'autre part, les seules valeurs que tu avais à modifier sont celles décrites dans mon post précédent.

J'ai dit :

Citation:

L'unité n'est pas optionnelle mais obligatoire en CSS

En revanche, en HTML il ne faut pas mettre l'unité lorsqu'il sagit de px.
11/09/2007, 16h21
lysandre

pfff... oui tu as raison, j'ai fait quelques expériences et oublié de remettre le position:relative;
Le pire est que j'ai relu mon code plusieurs fois sans le voir :?

Ok donc pour le htlm le px n'est pas necessaire. Etant donné que je me retrouve comme alice au pays des merveilles, je préferais etre sur (au cas ou un couple navigateur/doctype exige le px en html...).

Bon comme d'habitude grand merci bisûnûrs!