Problème étrange avec le DOCTYPE et W3C

Version imprimable

08/12/2014, 10h22
ganon551

Problème étrange avec le DOCTYPE et W3C

Bonjour à tous,

Je me préparait à mettre en ligne un site de minification CSS, quand j'ai voulu le faire valider HTML5 (même si l'outil pour la version 5 semble être en "beta").
J'ai donc changé mon doctype pour la version HTML5, et là certains éléments de ma page ne s'affichent plus correctement.

Pour information, voici la page en doctype 4.0 transitional :

http://cssmini.org/

Et avec le doctype html 5 :

http://cssmini.org/en/

Les deux textarea ne prennent plus la hauteur qui leur est spécifiée dans le CSS (qui lui est validé CSS 3). Et le bouton facebook n'est plus centré verticalement.

Par ailleurs, la validation W3C semble ne pas prendre en compte les changements. Pour la page française, j'ai corrigé toutes les erreurs, mais la revalidation me les montre toujours.
Pour la version anglaise, j'obtiens des erreurs incompréhensibles (d'autant que le code est en tout point semblable à la version française), j'ai par exemple :

Error Line 2, Column 16: Stray start tag html.
<html lang="en">

Alors que le html tag est bien fermé en bas de page.

Si quelqu'un ici peut m'éclairer sur ces problèmes, surtout le coup des textarea qui foirent. Sinon je repasse en 4.0 ce sera plus simple :D

Par avance merci :)

EDIT : Bon, après un n-ième rafraîchissement de la page, tout fonctionne, alors que je n'ai pas touché au code. Peut-être une latence de maj côté serveur ?
Par contre le problème de validation W3C reste le même.
08/12/2014, 10h49
thelvin

Hello,

Je ne suis pas sûr de bien comprendre ce que tu as fait au juste avec le validateur.

À l'instant où j'écris ces lignes, tes deux doctypes se terminent par /> ce qui est une erreur. Du coup ils sont ignorés, le navigateur considère qu'il n'y a pas de doctype, et affiche la page en quirks mode. Dans ce cas, difficile de dire précisément comment les règles CSS s'appliquent. Il vaut mieux être en mode standard quand on veut étudier ce genre de choses.

Mais l'erreur sur le doctype, c'est évidemment la première chose que te dira le validateur W3C. Je vois mal comment tu aurais pu passer à côté.

À noter aussi qu'en HTML 4.0 il n'y a pas d'élément <section> ou le droit de finir une balise par /> ou tous ces trucs du HTML5, donc le validateur ne te servira pas à grand-chose.
08/12/2014, 11h27
ganon551

Merci de ta réponse.

En fait j'ai ajouté le "/" au doctype justement suite à l'erreur "strip doctype" du validator. Je n'avais pas le "/" quand j'ai posté, je l'ai rajouté après.

Si je l'enlève j'obtiens des textarea qui ne sont pas à la bonne taille, voici la page avec le doctype au "bon format :

http://cssmini.org

C'est de ma faute, je pensais avoir solutionné mon problème, mais comme tu le fais remarquer le "/" empêchait le navigateur de prendre en compte le doctype.

Du coup mon problème est le même qu'avant l'edit.

Donc, comment le fait de mettre le doctype html 5 peut empêcher mes textarea de prendre la hauteur spécifiée dans le css ? Que signifie l'erreur du W3C ?

Merci :)

EDIT : Si je passe la hauteur des textarea en pixels ça fonctionne, le problème est que je ne connais pas vraiment la hauteur voulue, je voudrais qu'elle change en fonction de la résolution. Sans passer par du JS si possible.

EDIT 2 : Bon après avoir essayé plusieurs hacks, je passe finalement par du javascript. Cela m'embête mais bon , tant pis. Par contre pas de solution pour le bouton FB.

EDIT 3 (désolé) : Le bouton FB s'aligne bien si on outrepasse son style en lui rajoutant un "vertical-align:top;" :)
08/12/2014, 15h21
Muchos
1. Les deux versions du site ont un doctype HTML5.
2. Le HTML5 n'est valide dans aucun des cas. La page en version EN semble contenir le BOM (d'où mode Quirks).
3. Inutile de se lancer dans des hacks :(
08/12/2014, 19h14
ganon551

Merci de ta réponse.
Les deux pages sont en html 5 parceque depuis mon dernier message j'ai confié à JS la gestion de la hauteur des textarea (j'ai mis un min-height au cas où pour ceux n'ayant pas javascript).

Pour le hack ça n'en est pas vraiment un, je force juste un style au bouton facebook, le problème semble récurrent avec FB et twitter.

Pour le BOM je ne comprend pas, sur notepad j'ai bien utf-8 sans BOM, je ne sais pas quoi faire pour le coup.
11/12/2014, 12h40
ganon551

Désolé du double post, je reviens pour vous dire que le sujet est résolu et pour exposer les solutions.

Le problème d'encodage venait d'un .htaccess qui spécifiait l'iso comme charset par défaut, c'est donc arrangé.

Ensuite pour mon problème avec le W3C, il doit y avoir une mise en cache, qui n'arrive pas toujours il faut croire puisque sur un autre site (chez le même hébergeur), les modifications semblent effectives tout de suite sur le validator.

Bref si comme moi vous corrigez les erreurs du W3C mais qu'il vous les indique toujours, il faut ajouter une fausse variable GET à la fin de l'url a valider.
Par exemple si vous voulez faire valider http://test.com, tapez http://test.com/?x=1
Cela force le validator a effectivement re-checker l'adresse plutôt que la version cache.

Je ne sais pas d'où ça vient en tout cas cette solution fonctionne pour moi et mes pages sont validées :)