Geckozone

Bonjour,

Je rencontre un problème avec mozilla pour l'affichage d'une page.
(aucun problème avec IE, Opéra), par ailleurs, cette page est validée par le w3c en HTML 4.01 transitional.

J'ai découpé une image pour l'optimiser.

Avec mozilla cela donne ça :

http://fredroy71.free.fr/mozilla/

Pouvez-vous m'indiquer d'où vient le problème ?

Merci d'avance.

Bonjour,

Une chose m'étonne. Je vois

Code : Tout sélectionner

<table border="0" cellpadding="0" cellspacing="0" width="645" bordercolor="#FFCC33">

et si je fais le total des largeurs renseignées pour les cellules des lignes du tableau, j'obtiens 646.
1 pixel de trop suffit pour que tout soit décalé me semble-t-il... mais pourquoi pas avec IE ou Opera

Cela ne change rien, même si je retire la taille de la table cela ne fonctionne pas sur Mozilla, mais c'est toujours nikel sous IE.

Ce que je ne comprends pas c'est la raison pour laquelle le document est validé par le w3c et que cela ne fonctionne pas sur ce navigateur ultra performant ?!?

Tu as utilisé le DOCTYPE complet html transitionnel :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Le fait de mettre l'URI de la DTD du HTML 4.01 Transitional fait passer Gecko (le moteur de rendu de Mozilla) en mode « respect strict des standards ». Or, selon le standard HTML les attributs width et height sont obsolètes pour les cellules d'un « table », par conséquent en mode « respect strict des standards » les width et height de tes cellules sont ignorés et Gecko calcule les tailles de façon automatique.

Pour voir dans quel mode se trouve Gecko, sous Firebird, il suffit de faire un clic droit/Page Info ou Ctrl+J.

À noter que IE passe aussi en mode « respect strict des standards » mais ça passe quand même, sûrement parce qu'il a une gestion moins fine de ce qui est standard et de ce qui ne l'est pas

Maintenant, comment résoudre ton problème ?

Solution à court terme : repasser les navigateurs en mode « Quirks » (le contraire du mode « respect strict des standards », à savoir un mode qui émule les bugs et les anciennes fonctionnalités des vieux navigateurs).

Pour repasser en mode Quirks, tout en ayant une page valide, il suffit de supprimer l'URI vers la DTD dans ton DOCTYPE :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Solution à long terme : revoir ton design, se passer du table layout, utiliser CSS pour le positionnement...

Formidable cela fonctionne

tu es un génie

Merci beaucoup pour toutes ces précisions.

J'en profite puisque tu sembles bien connaîtres les standarts pour te poser une question.

Comment opères-tu par le biais des css pour centrer un tableau quelque soit la résolution ou la taille de la fenêtre du navigateur ?

J'ai utilisé (pour un autre site que je souhaite mettre aux normes) le code suivant :

Code : Tout sélectionner

table { border : 0 none inherit; width : 100%; margin-top : 25%; margin-bottom : 25%;}

mais, je ne sais pas si c'est vraiment la bonne procédure ?

Merci d'avance pour ta réponse.

On doit pouvoir mettre le tableau dans un conteneur qui sera lui centré.
Exemple ici :
Alsacréations

Mais si tu commences à vouloir te mettre au css, autant le faire complètement est abandonner tout simplement le tableau

Exemple pour un site sans tableaux :
Toujours Alsacréations

Bonne lecture

En fait pour cette page, je n'utilise pas de tableau mais une balise div.

Je souhaite que cette balise

Code : Tout sélectionner

<div id="logo"> ici mon logo </div>

Se trouve exactement au milieu de la page quelque soit la taille de l'ecran.

Par ailleurs, je souhaite le positionner verticalement et non horisontalement. J'ai donc mis le code suivante :

Code : Tout sélectionner

#logo {
	background-image: url(/accueil/newpicindex/lignefond.gif);
	width: 100%;
	margin-top: 25%;
	text-align:center;

}

Ma page est là.

Je souhaite mettre tout mon site au XHTML, cela va être chaud

Bonjour,

Pour centrer un bloc horizontalement, il suffirait de donner la valeur auto à margin-left et margin-right... si IE le comprenait

Il faut donc utiliser une astuce : un bloc conteneur dans lequel tu placeras ton bloc avec le logo

Code : Tout sélectionner

.conteneur {
  text-align: center;
}
#logo {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  text-align: left;
}

Code : Tout sélectionner

<div class="conteneur">
<div id="logo">ton logo</div>
</div>

D'autres exemples de centrage sur openweb

Pour centrer un bloc à la fois horizontalement et verticalement :
http://batraciens.net/css-astuces/centrage-1.htm
http://www.wpdfd.com/editorial/thebox/deadcentre3.html

Geckozone

Problème d'affichage sur image découpée

Problème d'affichage sur image découpée