cadres, W3C et Firefox

nadar · Message par **nadar** » 22 avr. 2005, 00:29

Bonjour,

Depuis un moment que cela me travaille, je (tente de) me lance : modifier tout doucement, et à mon rythme, mon site en respect du W3C (transitional, pour le moment).

Mais attention, pas tout d'un coup : par exemple, je garde encore mes JavaScript (le truc pour respecter W3C n'a pas été facile à trouver ...)

Après quelques difficultés générales résolues, me voilà bloqué par Firefox (et d'autres ???) : les cadres !

Pour exemple simple (et uniquement pour expliquer mon problème), je crée une page-test comprenant seulement un cadre de 4 cellules (2 superposants 2), sans me préoccuper de quoi que ce soit d'autre sauf de rendre ses encadrements invisibles.
Je découpe une photo en 4 parties égales, chacune de ces parties trouvant sa place dans chacune des 4 cellules.

Bien sûr, en html simple (<html><head>..... </body></html>), que ce soit sous MSIE ou Firefox, je vois mon image reconstituée (comme si je ne l'avais pas découpée/placée dans 4 cellules d'un cadre).

Dès que j'installe le DOCTYPE, ajoute bien alt="" / en fin de img src etc, bien évidemment cette page simple est validée W3C !!!

Ben oui, sous MSIE, je retrouve bien mon image "normale, mais sous FF ....

mon image est coupée horizontalement, comme SI j'avais défini une hauteur de cellule SUPÉRIEURE à la hauteur des images !!!

Qu'est-ce que je n'ai pas compris dans les cadres en W3C ??????

FF_Olivier · Message par **FF_Olivier** » 22 avr. 2005, 01:09

Je crois que tu veux parler de <table> plutôt que de cadres (<frame>), non ?

Cela dit, pourrais-tu nous donner un lien vers une page d'exemple du problème, ou alors recopier ici dans une balise

Code : Tout sélectionner

 le code-source html incriminé ?

nadar · Message par **nadar** » 22 avr. 2005, 01:19

Oups, la gaffe !

Tu as bien sûr raison, FF_Olivier, j'ai fait un lapsus et il faut bien lire : "table" !

Tu peux voir un exemple (différent de celui expliqué ci-dessus)
http://www.amour-tendresse.com/pages/sansnom1.php

J'ai mis un peu n'importe quoi dans le tableau, mais on voit bien (sous FF, PAS sous MSIE) que les cellules sont d'une hauteur supérieure aux images ...

Et http://validator.w3.org/ me dit bien :
" The document located at <http://www.amour-tendresse.com/pages/sansnom1.php> was checked and found to be valid XHTML 1.0 Transitional. "

nadar · Message par **nadar** » 22 avr. 2005, 01:21

J'ajoute que j'ai déjà mis en W3C la page d'accueil qui a aussi une table, mais sans cellules superposées.
Mais attention, si tu regardes ma page d'accueil, tu risques de regarder le site au lieu de bosser !!!!!!!

FF_Olivier · Message par **FF_Olivier** » 22 avr. 2005, 01:40

À cette heure-ci je ne bosse plus, je vais me coucher

!

Plutôt que :

Code : Tout sélectionner

<td width="479">
            <p><img src="../Images/menu/fermer.gif" width="149" height="46" border="0" alt="" /></p>
        </td>

... essaie sans les  :

Code : Tout sélectionner

<td width="479"><img src="../Images/menu/fermer.gif" width="149" height="46" border="0" alt="" /></td>

nadar · Message par **nadar** » 22 avr. 2005, 01:51

Eh bien FF_Olivier, j'espère que tu vas (ou que tu as, si tu me lis après-dodo) passer une bonne nuit

Parce que grâce à ton aide, je vais m'endormir avec le sourire !

Problème résolu (et en plus j'allège les pages !), je te remercie

calimo · Message par **calimo** » 22 avr. 2005, 13:01

Le lien http://www.amour-tendresse.com/pages/sansnom1.php ammène à une erreur 404...

Pour moi c'est un problème de page interprétée en mode standard/quirk mais sans code c'est impossible à vérifier

FF_Olivier · Message par **FF_Olivier** » 22 avr. 2005, 14:36

calimo a écrit :Le lien http://www.amour-tendresse.com/pages/sansnom1.php ammène à une erreur 404...

Je pense que Nadar n'avait créé cette page que pour illustrer son pb, et a dû l'effacer depuis qu'une solution a été trouvée.

calimo · Message par **calimo** » 22 avr. 2005, 20:54

J'aurais quand-même bien aimé regarder la page parce que si c'est bien comme je pense un problème de mode de rendu quirk/standard il est important de le corriger avant de continuer sans quoi Nadar risque de le regretter par la suite

nadar · Message par **nadar** » 23 avr. 2005, 00:31

Bonsoir,

Je prends seulement connaissance de vos messages cette nuit ...
Tu as raison, FF_Olivier, j'ai immédiatement supprimé cette page provisoire puisque ton aide réglait effectivement mon problème, et j'ai foncé vers mes pages !

Pour calimo, je ne sais pas ce que tu appelles "rendu quirk/standard" !
Je t'ai remis une page identique, à la même adresse
http://www.amour-tendresse.com/pages/sansnom1.php

Pour moi, (en W3C seulement), et en laissant les , les images 1 et 2 sont identiques (2 rectangles séparés par un espace), alors que :
* pour l'image 1, la hauteur des cellules n'est pas spécifiée
* pour l'image 2, j'ai spécifié une hauteur de cellules de 50 pixels (soit le DOUBLE de la hauteur des images constituantes).

Si j'enlève les , je vois évidemment toujours la même chose en image 2, MAIS l'image 1 cette fois est devenue un rectangle de surface double des 2 rectangles de l'image 2 !

En clair, en W3C avec les Firefox voit une hauteur de cellule SUPÉRIEURE à la hauteur des images placées dans ces cellules.

Sans les , Firefox voit bien une seule image !

Je laisse l'image jusqu'à ta réponse ...

nadar · Message par **nadar** » 23 avr. 2005, 00:33

Oubli : je présume que vous comprenez que, quand je parle de W3C, cela signifie que j'ajoute le DOCTYPE enhaut de page !

calimo · Message par **calimo** » 23 avr. 2005, 09:34

En fait il faut savoir que les navigateurs actuels ont 2 modes de rendu. Un mode dit "standard" qui essaye de respecter plus ou moins les standards (p.ex le modèle de boîte), et un mode "quirk". Le mode quirk est un mode étrange et plus ou moins aléatoire dans lequel le navigateur a des comportement bizarres dans un but de rétrocompatibilité. Par exemple il va utiliser le modèle de boite de Microsoft dans lequel les marges sont contenues dans la largeur/hauteur (dans le modèle de boîtes du W3C au contraire les marges n'entrent pas dans le calcul des dimensions).
C'est le plus visible, mais Mozilla va également adopter un certain nombre de comportement pas standard du tout dans ce mode quirk, par exemple le support partiel de document.all, la correction de certaines erreurs, la compréhension de certains attributs propriétaires ou de syntaxes incorrectes. Il en va plus ou moins de même dans les autres navigateurs.

Le problème, c'est si le doctype que tu utilise fait passer un navigateur en mode "quirk" et l'autre en mode "standard". Ils vont donc forcément avoir des réactions et des comportements non seulement imprévisibles (pour celui qui est en mode Quirk), mais surtout totalement différent entre eux vu que l'un respecte les standards et pas l'autre

Donc il faut regarder la table des standard/quirk par navigateur et par doctype et trouver un doctype qui fasse que tous les navigateurs se comportent de la même manière. Coup de chance tu as bien choisi

Comme c'est une cause d'erreurs très fréquente, je préférais être sur que ce n'était pas ça

nadar · Message par **nadar** » 23 avr. 2005, 14:13

Merci beaucoup ami calimo pour ta longue et intéressante explication (sur un sujet dont je n'avais même pas l'idée), et tu me rassures en outre sur mon doctype !

En fait, je me suis appuyé sur un site que j'ai trouvé excellent et qui m'a décidé à me lancer, moi, pôvre webmestre amateur ...
Je le conseille à tous les débutants XHTML, et donc il mérite un peu de pub : http://openweb.eu.org/

Il m'a en outre fait connaître l'astuce de "faire passer" - ou plutôt rendre transparents - mes codes JavaScript que je veux garder pour le moment, car j'estime qu'ils apportent une aide intéressante pour la navigation dans le site.

Ceci dit, si le truc donné ci-dessus par FF_Olivier est bon pour les images, il me gêne pour le texte (parfois, pas toujours, je ne sais pourquoi) et je ne peux supprimer dans ce cas le si je veux que ce texte soit justifié, ou aligné par exemple !

Mais bon, j'avance tout doucement, et j'ai actuellement la moitié de la Version Française du site qui est en standard MODERNE ! Youpie !

Merci à vous deux.

calimo · Message par **calimo** » 23 avr. 2005, 15:04

Openweb est une excellente référence, tu peux y aller sans soucis effectivement

Pour revenir au sujet, pourquoi ne pas tout simplement définir les images comme fond de cellule des tableaux ?

Code : Tout sélectionner

td {
	background-image : url("../Images/menu/espace1.jpg");
}

Ce serait beaucoup plus élégant, ça ferait une meilleure séparation contenu/style, ça éviterait le alt="" (une image vide, sa place c'est dans la CSS), et ça s'adapterait automatiquement au contenu

Je crois que c'est la prochaine étape dans tes modifications

Juste encore quelques petits détails :

Tu dis souvent en W3C. Le W3C est une organisation (World Wide Web Consortium), ce n'est donc pas un standard en soi. Par contre le W3C édicte des standards : HTML, CSS, etc. Donc ta page pour être précis ne valide pas W3C mais valide HTML/CSS, chose que tu vérifie grâce au validateur fourni par le W3C
Je te rends attentif aux règles de Compatilité HTML qu'il est indispensable de respecter si tu traites ton XHTML comme du HTML, en particulier il faut spécifier l'attribut lang pour définir la langue (tu n'utilise que xml:lang, alors qu'il faut utiliser soit lang, soit les deux). Le validateur ne te le signale pas, mais c'est quand-même une erreur. Comme il ne les signale pas, mieux vaut être attentif à ces 13 points

nadar · Message par **nadar** » 24 avr. 2005, 02:04

Salut calimo, et de nouveau merci pour tes précisions.

calimo a écrit :Pour revenir au sujet, pourquoi ne pas tout simplement définir les images comme fond de cellule des tableaux ?
Code : Tout sélectionner
td {
	background-image : url("../Images/menu/espace1.jpg");
}
Ce serait beaucoup plus élégant, ça ferait une meilleure séparation contenu/style, ça éviterait le alt="" (une image vide, sa place c'est dans la CSS), et ça s'adapterait automatiquement au contenu
Je crois que c'est la prochaine étape dans tes modifications

Je n'ai pas très bien compris (mais je vais faire des essais, après, dans la "prochaine étape"

).
Qu'appelles-tu une "image vide" ??? Je précise, si tu n'as pas regardé autre chose que la page "sansnom", que des images, ce n'est pas ce qui manque, dans un site de ... photographe

En outre, mon menu est fait d'images dans un tableau à multiples cellules (ne le regarde pas, un "puriste" comme toi va hurler ...)

calimo a écrit :(...) Donc ta page pour être précis ne valide pas W3C mais valide HTML/CSS

D'accord, c'est par flemme pour moi bien peu puriste : W3C est plus court à écrire que HTML/CSS.
J'ai honte

calimo a écrit :il faut spécifier l'attribut lang pour définir la langue (tu n'utilise que xml:lang, alors qu'il faut utiliser soit lang, soit les deux).

Là encore, j'ai du mal à te comprendre, tout ça est assez nouveau pour moi.

Si j'ai bien compris les infos Openweb, j'ai indiqué (en VF dans cet exemple, pour le EN, les 2 s'inversent évidemment ...) :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
et si par hasard un passage est en EN, je le signale par


En outre (car d'après Openweb, ce n'est pas la même chose, l'un représentant la page, l'autre le texte de la page), j'indique dans les meta :
<meta http-equiv="Content-language" content="fr" />

Sinon, je viens de mettre http://www.la-grange.net/w3c/xhtml1/#guidelines
en marque-page pour achever de remplir mes petits neurones .....

Mais STOP, ami calimo, tu veux me faire fumer ma petite tête

Et pour le moment, je me la prends, cette petite tête pour que Firefox ARRÊTE de me séparer les cellules de ce tableau de 10 kms entre-elles !!!!!!!!!!!!
Tu vas hurler, ici aussi, devant ce code, mais j'en veux j'en veux j'en veux :

<table cellpadding="0" cellspacing="0" width="100%"><tr>
<td width="48%">Femme à l'extrême fraîcheur de la jeunesse</td>
<td width="4%" height="20">OU</td>
<td width="48%">femme plus mûre en plénitude,</td>
</tr><tr>
<td>fine</td>
<td height="20">OU</td>
<td>arrondie,</td>
</tr><tr>
<td>tranquillement assurée</td>
<td height="20">OU</td>
<td>si joliment timide ...</td>
</tr></table>

Pour info, "ri" = right, "le" = left, et "jo" = #FDFDC3 (jaune clair)

Geckozone

cadres, W3C et Firefox

cadres, W3C et Firefox

Qui est en ligne ?