desx Posté 27 Juin 2004 Posté 27 Juin 2004 Bonjour à toute la communauté, et merci de prendre le temps de lire ces quelques lignes, qui relatent mon problème actuel. Je suis passionné par la conception de site web depuis quelques temps déjà, et je souhaite désormais ne créer que des sites accessibles à tous, quelque soit la configuration ou le système sur lequel ils sont visités. Je viens de terminer une page accessible XHTML 1.0 Strict (validée par le W3C Validator), et celle ci fonctionne parfaitement (au niveau de la mise en page), avec Opera ou Internet Explorer. Le problème se pose lorsque j'essaie d'ouvrir la page avec Mozilla FireFox (non testé avec les autres variantes Mozilla). En effet, tous les tableaux sont légèrement décalés, d'environ 2 pixels vers le bas. Consternation et incompréhension, puisque si je change le DOCTYPE du document en Transitional, la page fonctionne enfin, même sous FireFox. (je confirme bien qu'en ne changeant que le DOCTYPE, les tableaux sont décalés sous FireFox ) Voici les DOCTYPES utilisés : (ne fonctionne pas)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> (fonctionne)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> J'ai ensuite utilisé une autre variante (en ayant spécifié le META pour l'ISO-8859) de DOCTYPE, sans succès : (ne fonctionne pas)<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> (fonctionne)<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> Si vous avez une idée à propos de ce problème, je suis preneur. Merci de l'aide que vous pourriez m'apporter.
Dinostrate Posté 27 Juin 2004 Posté 27 Juin 2004 Bonjour et bienvenue sur le hub Es tu sur d'avoir besoin de <?xml version="1.0" encoding="iso-8859-1"?> Pour ton problème de pixel, je n'ai pas approfondi... Mais la question est ... est-ce que ça en vaut la peine ? Plus les styles utilisés sont élaborés, et moins tu arriveras pas à tout afficher de manière identique dans tous les navigateurs, alors, le mieux est de se ménager des petites marges de manoeuvre... Dino
desx Posté 27 Juin 2004 Auteur Posté 27 Juin 2004 (modifié) Bonjour et bienvenue sur le hub Merci de votre accueil Es tu sur d'avoir besoin de <?xml version="1.0" encoding="iso-8859-1"?> Non, c'est certain, mais c'est une variante officielle que j'ai trouvé sur le W3C. Je voulais simplement vérifier si ce DOCTYPE fonctionnait Mais la question est ... est-ce que ça en vaut la peine ? Je n'ai pas bien saisi le sens de la question... Je pense qu'il est nécessaire à l'heure actuelle de créer des sites aux standard, quelque soit le site. Alors, oui cela en vaut la peine Plus les styles utilisés sont élaborés, et moins tu arriveras pas à tout afficher de manière identique dans tous les navigateurs Il n'y aucun style spécial, mis à part bien entendu les valeurs des tableaux spécifiés dans le CSS vu que le XHTML 1.0 Strict l'oblige... Qu'à celà ne tienne. Je viens de faire un simple test : avec un tableau, et une feuille de style qui contient uniquement les tailles du tableau. Même problème. Une autre alternative se présente : si je place le "DOCTYPE Transitionnal" à la place du "DOCTYPE Strict" (en sachant que les pages sont validées XHTML 1.0 Strict), seront elles où non accessibles (je ne cherche pas forcément à les valider, mais à les rendre accessibles) comme si elles posséderaient le "DOCTYPE Strict" ? Le DOCTYPE renseigne aussi bien le navigateur que le validateur... Je reformule : d'après vous, serait il possible qu'elles ne soient pas accessibles correctement si elles possèdent le "DOCTYPE Transitionnal" à la place de "DOCTYPE Strict", alors qu'elles sont validées XHTML 1.0 Strict ? Modifié 27 Juin 2004 par desx
LaurentDenis Posté 27 Juin 2004 Posté 27 Juin 2004 Vérifie si ce n'est pas un problème de "DocType Switching" : en fonction du DocType spécifié dans le document, le navigateur adoptera l'un ou l'autre mode de rendu graphique: - mode "Standard" (tel que défini par les spécifications du W3C) - mode "Quirks" (tel que défini par le comportement propriétaire d'IE5) - mode "Almost Standards" pour les navigateurs Mozilla uniquement, intermédiaire entre les deux précédents. Selon le mode de rendu graphique, le comportement des tableaux et le calcul des dimensions des boîtes CSS est différent (entre autres). Voir à ce sulet http://www.ericmeyeroncss.com/bonus/render-mode.html Si tu veux creuser la question et vérifier, consulte les tableaux de DocType Switching des différents navigateurs. Tu trouveras ici : http://www.opera.com/docs/specs/doctype/ le tableau pour Opera, et des liens vers les pages équivalentes pour Mozilla et IE [edit] J'oubliais: même si le code est validable strict, il n'y a aucun inconvénient à le servir en transitionnel.
Monique Posté 27 Juin 2004 Posté 27 Juin 2004 (modifié) Bonjour desx, Et bienvenue sur le Hub Je suppose que tu as entendu parler du mode quirks (comme les anciens navigateurs) et du mode standard (comme les navigateurs qui respectent les standards du W3C) ? Selon le doctype renseigné, le navigateur adopte l'un ou l'autre mode. Mais ce n'est pas tout à fait aussi simple... à cause d'un grand nombre de combinaisons possibles entre les versions des navigateurs et les différents type de doctype, par exemple : - modes Quirks dans Mozilla - Opera et le DOCTYPE - IE 6/Windows et le DOCTYPE Tu trouveras un complément d'information et d'autres liens sur Openweb Un problème fréquent : celui d'une page contenant un tableau dont les cellules contiennent à leur tour des morceaux d'images... un article d'Eric Meyer PS : Laurent a été plus rapide Modifié 27 Juin 2004 par Monique
Dinostrate Posté 27 Juin 2004 Posté 27 Juin 2004 Je n'ai pas bien saisi le sens de la question... Je pense qu'il est nécessaire à l'heure actuelle de créer des sites aux standard, quelque soit le site. Alors, oui cela en vaut la peine Je n'ai pas voulu te dissuader d'être conforme aux standards... je voulais simplement dire qu'a un moment donné, il faut prendre des décisions... Par exemple, accepter le transitional plutot que le strict dans certains cas... (cela ne nuira en rien à ta volonté d'être conforme aux standards) Il existe toujours des petites différences de présentation entre les navigateurs, et je pense qu'il vaut mieux essayer de s'accomoder des différences les moins graves plutot que de vouloir être puriste à tout prix... du moment que les standards sont respectés... ... et si la différence de présentation est génante, ou bien sur si tu veux tout simplement approfondir la question, alors, tu as effectivement intérêt a suivre les conseils de Monique et de Laurent. Dino
desx Posté 27 Juin 2004 Auteur Posté 27 Juin 2004 Merci pour toute cette masse de renseignements. Je suis entrain de lire les articles, et je sens que je vais trouver solution à mon problème Remerciements à Dinostrate, Monique et LaurentDenis
desx Posté 1 Juillet 2004 Auteur Posté 1 Juillet 2004 Finalement, les liens fournis n'ont rien donné. J'ai essayé maintes fois de changer le DOCTYPE, en vain. Mais en bidouillant mon code, j'ai trouvé la solution à mon problème, donc je vous en fais part au cas ou certains rencontreraient le même problème... Le pauvre DOCTYPE n'y est pour rien, en fait, même si en ne changeant que celui ci, la page change, ce n'est pas lui le coupable ! La cause de tout ça est la mise en page, tout simplement. Les problèmes que j'ai rencontré sont survenus lorsque le <td> était suivit directement d'une image, ou lorsqu'il ne contenait qu'une image. Exemple : <td><img src="image.png" alt="texte" /></td> Dans ce cas, les navigateurs Gecko type Mozilla (Mozilla, FireFox et NetScape) laissent apparaître un décalage entre la bordure du tableau et l'image elle même... Embêtant ? Oui ! La solution : - Repérez le <td> contenant l'image; - Repérez les valeurs de taille de l'image (exemple width="88" height="31") - Dans votre CSS, concevez l'attribut de l'image : td.essai {background-image:url(image.png); // URL de l'image width:88px; // la taille de l'image height:31px; // la taille de l'image } - Nommez le <td> comme ceci <td class="essai"> (ou le nom spécifié dans le CSS) - Supprimez l'image de la source Et là, même avec le DOCTYPE XHTML Strict, aucun problème avec une dizaine de navigateurs testés, la page est XHTML 1.0 Strict, et le CSS validé. En espérant en avoir aidé certain
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant