[différence IE6 / FF] Layout

Bonjour!

Je cherche *pourquoi* il y a une telle (énorme!) différence de rendu entre IE 6 (pas encore testé sous IE 7) et Firefox... Pour le code xHTML / CSS suivant:

http://barresi.ch/test-ie6/

Qui a une idée / une piste?

Autre chose qui me rendrait service. Voyez-vous un myen plus "fiable" de fixer la position de façon plus homogène mon bouton "> SUITE" dans les boxes? Car selon le navigateur sa position via float est assez aléatoire...

D'avance merci!

PS: ne tenez pas compte du design, ce n'est qu'une maquette vide...

:salut:
Je ne vois de différence à première vue ente FF2 et IE7. :?
Si tu me files une impression sous IE6 je pourrais peut-être te filer un coup de main.

Bonjour, trotters213!

Merci pour ta réponse.

C'est déjà bon / rassurant de savoir que IE 7 rend bien la chose.

Voici deux printscreen montrant le rendu sous Firefox (comme voulu) et sur IE 6...

http://barresi.ch/test-ie6/printscreen-ff.png
http://barresi.ch/test-ie6/printscreen-ie6.png

Il y a une différence d'interprétation entre les 2 naviguateurs. Le mieux est d'optimiser ton site pour Firefox, puis ensuite de mettre des conditions pour le rendre compatible sous IE, car IE est bourré de bugs. Tout le monde pourra te confirmer cela. IE est une vrai merde pour les webmasters, impossible d'optimiser le site correctement. C'est pour cela qu'il faut priviligier FF à IE. Mais ne délaisse pas pour autant la facette IE, rend ton site compatible sous les 2 naviguateurs pour attirer un maximuim de visiteurs, vaut mieux qu'ils ne soirent pas effrayés par un défaut du site dut a leur naviguateur.


Si tu veux utiliser des conditions, voici la démarche :

Bien sur que si tu peux mettre une condition.

<!--[if !IE]><-->
<h1>Titre de la page</h1>
<!--><![endif]-->

Voila la commande qu'il faut introduire dans ton code.



Tu peux bien sur le moduler comme bon te semble :

<!--[if !IE]><-->
Vaut mieux ne pas utiliser IE, il est truffé de Bugs !
<!--><![endif]-->

Ici, cette phrase s'affichera uniquement sur un navigateur autre que IE grace au tag " !IE " (signifie "différent" de IE).


Aprés tu peux ossi introduire 2 css différents si le naviguateur est IE ou non :

<!--[if IE]>
<link href="style_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if !IE]><-->
<link href="style_ff.css" rel="stylesheet" type="text/css" />
<!--><![endif]-->

Ici, le naviguateur chargera "style_ie.css" si le naviguateur est IE (grace à [if IE] ), tandis qu'il chargera style_ff.css si votre naviguateur n'est pas IE (grace à [if !IE] ).


Voila, je pense avoir traité toute cette partie de manière convenable.

Si tu parles du gros qui s'étends sur le bas, ça ressemble furieusement à un pb de haslayout.

Pour t'en assurer tu peux ajouter ceci dans ton css (donne le layout à tous les éléments)

Code:

---

* {zoom:1;}

---

Si cela résoud ton problème il ne te reste plus qu'à identifier quel/s) élément doivent recevoir le layout pour que cela s'affiche correctement. Cela pourrait bien être ton #maincontent qui est doté de layout sur IE7 avec le min-height mais pas sur IE6. Donc tu pourrais essayé quelque chose du genre, après avoir viré le zomm:1:

Code:

---

* html #maincontent {height:1%;}

---

Citation:

---

Envoyé par IroShimO

Bien sur que si tu peux mettre une condition.
<!--[if !IE]><-->
<h1>Titre de la page</h1>
<!--><![endif]-->

Voila la commande qu'il faut introduire dans ton code.

Tu peux bien sur le moduler comme bon te semble :

<!--[if !IE]><-->
Vaut mieux ne pas utiliser IE, il est truffé de Bugs !
<!--><![endif]-->

Ici, cette phrase s'affichera uniquement sur un navigateur autre que IE grace au tag " !IE " (signifie "différent" de IE).

---

Je te conseille vraiment de ne pas commencer à faire ce genre de chose mais plutôt de faire en sorte d'avoir un code "cross-browser" mais en codant proprement.