5568 sujets

Sémantique web et HTML

Pages :
Bonjour, je suis passé dernièrement à IE9 (après IE8 où tout fonctionnait) pour tester mes sites, et j'ai remarqué quelques bug (nouveaux).
Pour exemple ce site http://www.doujan.fr/Boutique-en-ligne-Couches-lavables la colonne de droite s'affiche normalement sur mozilla (mon navigateur par défaut) et pas sur IE9.
J'ai fait des test apriori c'est le width:210px qui pose problème, si je l'enlève ça devient comme souhaité, mais je ne veux pas, ça fera planter sur les autres navigateurs. Ce qui est étonnant c'est que sur d'autre page du même site avec quasi la même architecture, le problème n'y est pas.

Sur d'autres sites aussi, j'ai remarqué des (petits) trucs curieux.
Est-ce que vous en avez remarquez aussi ? où ce sont mes css qui ne sont pas fait comme il faut ?

IE9 revient à l'époque IE6 ou quoi ?
Bonjour,

lulldelull a écrit :
Est-ce que vous en avez remarquez aussi ?

Pas spécialement. Le support de CSS 2.1 est déjà très bon dans IE8, pas de raison particulière qu'il y ait plein de régressions dans IE9.

lulldelull a écrit :
où ce sont mes css qui ne sont pas fait comme il faut ?

Probablement. (Quoi qu'elles aient l'air plutôt correctes.)

Je commencerais par vérifier quel est le mode de rendu utilisé par IE9 pour afficher ta page (vu qu'il embarque plusieurs modes de rendu: Quirks, compatibilité IE7, compatibilité IE8, et standards IE9 de mémoire). Tu veux bien sûr être en mode de rendu IE9. Tu peux vérifier le mode de rendu utilisé (et inspecter un peu ta page pour voir ce qui gênerait IE9) en utilisant les outils pour développeur intégrés à ce navigateur.
À vérifier aussi: que le commentaire placé avant ton Doctype ne fait pas passer IE en mode Quirks (il me semble que c'était un bug d'IE 6-7 corrigé dans IE8, ceci dit).

Oh, et corriger toutes les erreurs HTML qui concernent des erreurs de syntaxe élémentaire (des problèmes d'imbrication de balises par exemple). Un code HTML invalide peut te donner un DOM différent dans chaque navigateur (suivant la manière spécifique dont le navigateur corrige à la volée tes erreurs), et donc tes styles CSS ne s'appliquent même pas à la même structure de page d'un navigateur à l'autre.
Merci fvsch,

a écrit :
Oh, et corriger toutes les erreurs HTML qui concernent des erreurs de syntaxe élémentaire (des problèmes d'imbrication de balises par exemple)

Peux-tu me donner un exemple de ce que tu remarques?
En fait, j'ai réussi en faisant quelques modifs dans le CSS à faire ce que je voulais.
Mais je trouve curieux ces bugs alors que tout fonctionnait sur IE8 et 7.

Je découvre avec ta réponse les paramètres du mode Quirks que je ne connaissais pas. Dans le doute j'ai enlevé le commentaire avant le charset.

Merci en tous cas.
Modifié par lulldelull (28 Jun 2011 - 19:22)
Merci mais je ne tiens pas trop compte des erreurs W3C, trop contraignantes.
C'est un choix que j'ai fait pour l'instant. Je sais ça peut heurter certaines personnes, mais dès qu'il y a du flash, du javascprit..., bouh... un casse tête.
Dans ce cas, ne te plaint pas qu'il y a des défauts d'affichages...

ps. : Flash et JS ne causent pas d'erreurs de code, il suffit juste de savoir les intégrer.
Ok, merci.

J'estime savoir intégrer un site. Être valide W3C est une seconde étape pour moi (ça va en chauffer plus d'un je sais, ne vous défoulez pas trop hein Smiley smile ). Je souhaite m'y mettre, mais je ne prends souvent pas le temps de peaufiner ceci.
Pour ce site j'utilise deux CMS (Thelia pour la boutique en plugin de SPIP). Pour prendre les 60erreurs recensées là par validator.w3.org , je trouve les explications et lignes d'erreurs (qui ne correspondent pas avec mon code) pas très compréhensibles. A moins que je les interprètes mal, ce sont trop de paramètres que je ne maitrisent pas assez.

Pour prendre la première erreur :
Line 37, Column 42: there is no attribute "onLoad"
Or onload est bien dans le code.
En dessous, le " (de MM_preloadImages) est souligné et est en rouge, je ne sais pas pourquoi et comprends pas le lien avec le message au-dessus...
Bref, faut être calé... je ne le suis pas donc...
lulldelull a écrit :

Pour prendre la première erreur :
Line 37, Column 42: there is no attribute "onLoad"
Or onload est bien dans le code.
En dessous, le " (de MM_preloadImages) est souligné et est en rouge, je ne sais pas pourquoi et comprends pas le lien avec le message au-dessus...
Bref, faut être calé... je ne le suis pas donc...


Être calé, ou simplement connaître les bases de la syntaxe XHTML (puisque c'est le Doctype que tu utilises).

En XHTML les attributs doivent s'écrire en minuscules. Donc "onLoad" doit s'écrire "onload".

C'est pourtant clairement expliqué sur la page du validateur juste en dessous de ton erreur :

a écrit :

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case)
lulldelull a écrit :
ok, pour ce cas précis, le "onload" en question est en minuscule.


On doit pas regarder la même page...


<body class="page_rubriquethelia" [b]onLoad[/b]="MM_preloadImages('../../IMG/bouton_panier_on.png')">

Modifié par jb_gfx (29 Jun 2011 - 13:03)
Ok, autant pour moi alors.
Je voudrais juste aussi rebondir sur
a écrit :
C'est pourtant clairement expliqué sur la page du validateur juste en dessous de ton erreur

Est-ce que validome.org est aussi fiable que validator.w3.org ?
En français ça fait un obstacle en moins Smiley smile
Modifié par lulldelull (29 Jun 2011 - 13:19)
Il faut garder en tête que le validateur n'est qu'un outil qui est là pour t'aider à repérer les éventuels problèmes, mais l'analyse qu'il produit n'est pas une vérité universelle et absolue. Par exemple tu peux très bien avec une syntaxe correcte et une sémantique complètement fausse, dans ce cas le validateur ne te sera d'aucune aide pour corriger ton code.

L'inverse est aussi vrai, par exemple les attributs ARIA ne sont pas pris en compte par le validateur alors qu'ils font partie des standards.

Par contre le validateur est très utile pour corriger des erreurs telles que des balises mal imbriquées ou mal fermées. Ce genre d'erreur peut vraiment poser des erreurs de rendu. D'ailleurs tu en as sur ton site.

Pour résumer le validateur est un outil pratique, qui permet de gagner du temps, mais il ne remplace pas l'apprentissage et la connaissance des différents standards (ni ne le bon sens).
Modifié par jb_gfx (29 Jun 2011 - 13:47)
Sur les erreurs rapportées, il y en a pas mal qui sont liées à l'utilisation de l'élément EMBED qui n'existe pas en HTML4 ou XHTML1. Tu peux éventuellement utiliser OBJECT seul (sans doubler par un EMBED). Si tu choisis d'ignorer ces erreurs (qui effectivement n'auront pas d'impact sur ta mise en page), à toi de repérer les erreurs qui sont liées à l'utilisation d'EMBED (à ignorer) et les autres (peut-être à corriger).
À vue de nez, il y a pas mal d'erreurs de type there is no attribute something liées à l'utilisation d'EMBED.

Ensuite tu as des problèmes qui viennent du fait que tu as mis des éléments de type bloc (H2, P...) à l'intérieur de liens, ce qui n'est pas possible en HTML4/XHTML1. De plus les filtres de SPIP se sont peut-être mêlés de tout ça et tu obtiens des choses clairement fausses comme ceci:
<p class="spip"></a></p>
(Si l'erreur ne saute pas aux yeux, il y a des révisions de bases de HTML à faire. Smiley cligne ))

Les problèmes d'imbrication de ce genre expliquent la plupart de tes erreurs document type does not allow element "..." here.

Ensuite, tu as mis un DIV comme enfant direct d'un UL:
<ul>
  <div>>> ACCUEIL BOUTIQUE</div>
  <li>...</li>
  ...
</ul>
Ce qui n'est bien sûr pas permis en HTML, une liste ne pouvant contenir directement que des éléments de liste (sinon c'est pas une liste, quoi). Smiley smile

Aussi toute une série d'erreurs à cause du caractère "&" qui doit être écrit "&amp;" si tu veux qu'il soit considéré comme un "&" littéral (par exemple dans une URL). Autrement, il est considéré comme marquant le début d'une entité HTML. (Problème à corriger si tu peux, mais qui n'a généralement pas de conséquences néfastes.)

lulldelull a écrit :
Pour prendre la première erreur :
Line 37, Column 42: there is no attribute "onLoad"
Or onload est bien dans le code.

Ça ne veut pas dire «il n'y a pas d'attribut onLoad dans le code», mais «il n'y a pas d'attribut onLoad dans la version de HTML utilisée pour valider ce document».
Pages :