Affichage différent avec Firefox/Safari sur Mac et IE 6 sous Windows

Bonjour à tous
J'ai vu que de nombreux sujets traitaient de ce problème, mais je n'ai pas trouvé quelque chose d'analogue à mon problème.
Par ailleurs celui-ci ne relève ni de la différence de traitement de la propriété "width" (http://www.christopher-jablonski.com/fr/reperes/ie6.shtml), ni du doublement de left margin avec left float (http://www.positioniseverything.net/explorer/doubled-margin.html)
La page en question se trouve ici :
http://paceol.fr/
La photo qui est en dessous du menu devrait être à droite.
Le menu ne se présente pas de la même façon.
Le reste du site est conforme.

salut,

sans ton css difficile de voir

tu as mis des paddings sur tes div, si c'est le cas ie rajoute les paddings sur ta largeur.

ex: tu as une div de 100px tu mets un padding de 10px = une largeur de 120px
Modifié par flattazor (03 Mar 2009 - 20:39)

Hello,

flattazor a écrit :
sans ton css difficile de voir

Euh... avec la page en ligne c'est encore mieux non ?

flattazor a écrit :
tu as mis des paddings sur tes div, si c'est le cas ie rajoute les paddings sur ta largeur.

Les différences n'interviennent que si IE est en mode Quirks mais avec un doctype en bonne et due forme (comme c'est le cas ici) il n'y a pas de différence.

J'opterais plutôt pour un problème de calcul d'arrondi des tailles en pourcents (différent selon IE... et les autres) ou un problème de HasLayout mais comme je n'ai pas le temps maintenant je te laisse voir de ton côté !
Modifié par Heyoan (03 Mar 2009 - 21:07)

Alors en repassant par là on pourrait effectivement remplacer le width:30% de #menu par width:28% pour que ça "passe" dans IE6 et IE7... mais il y a mieux à faire car le rendu n'est pas terrible :

1) corriger les 12 erreurs de validation.

2) comme expliqué dans cette astuce les valeurs par défaut des margin et padding d'une liste ne sont pas les mêmes dans chaque navigateur et il faut donc les redéfinir.

3) le DIV #menu est inutile puisqu'on peut se servir directement de l'élément UL (en lui affectant l'id en question.

4) l'attribut align="center" est obsolète : pour la présentation il faut utiliser les CSS

5) tu fais un mauvais usage de alt sur ton image. Bien que IE (6 et 7) l'interprète comme un title cet attribut sert à donner une alternative textuelle lorsque les images sont désactivées/indisponibles et il faudrait donc reprendre le "contenu" de l'image. (En fait il faudrait revoir globalement la sémantique de ta page).

6) mais au fait : pourquoi ce margin négatif sur ton conteneur "englobant" ?

7) etc... (prendre le temps de lire les articles de la section Apprendre )


Ce qui donne par exemple :

css

#englobante {
	width:850px;
	margin: 2px auto;
}
	
#menu
{
	margin: 2% 0 0 0;
	padding: 8px 8px 8px 24px;
	float:left;
	background-color:#FBFDAA;
}

#contenu {
	margin: 2% auto 2% 30%;
	text-align: center;
}

#accroche {
	color:#022C56;
	margin: 2% auto
}

html

<ul id="menu">
...
</ul>
<div id="contenu>
	<img src="images/image_centrale.jpg" title="50% decredit d'impot, jusqu'a 70% d'Úconomie" width="489" height="325" alt="Pompes à chaleur, Eoliennes, Panneaux solaires" />
	<h4 id="accroche">
	Pour faire rimer économie avec écologie<br />
	Pour améliorer son bien être en protégeant l'environnement</h4>
</div>

J'ai laissé le h4 mais à priori tu ne l'as utilisé que pour mettre ton texte en gras et il vaudrait mieux faire usage de font-weight: bold.

Concernant le rendu "étrange" de ton menu dans IE6 lire Impact sur le rendu de la mise en forme du code HTML.
Modifié par Heyoan (03 Mar 2009 - 23:48)