[Résolu]Difference de quelque pixel entre IE et Firefox.

Bonjour,

Étant nouveau et débutant en CSS je cherche une solution pour afficher de manière identique une page Internet, sous Firefox 1.5 tout se passe bien, mais sous Internet Explorer 6 j'ai un décalage.

En effet à gauche du logo on voit une bordure de quelque pixel sous IE :
http://www.reva-asso.biz/test/debugie.htm

J'ai essayé plusieurs solutions text-align: center; ...

Mais rien n’y fait.

Auriez-vous une idée ?

Merci de votre aide.
Modifié par reva (16 Nov 2006 - 22:15)

Bonjour reva,

Bienvenue sur le forum !

Je pense que tu es victime du "Three Pixels Jog".
Bug connu de IE.
Fais une recherche sur le forum avec "Three Pixels", et tu auras une idée du nombre de victimes !
Modifié par papillon41 (14 Nov 2006 - 16:18)

Merci papillon41 pour ta réponse si rapide,

Effectivement après avoir compté les pixels ils sont bien au nombre de 3.
donc après recherche sur le forum la solution semble être sur mon bloc div
#headerlogo de rajouter :

#headerlogo {
background-color: inherit;
width: 229px;
height: 64px;
margin-left: 38px;
padding: 0px;
border: none;
left: 0px;
/* bug IE Three pixels jog */
position: relative;
left: -3px;
margin-right: -3px;
}

Et oh bonheur ça marche, mais ça décale d'autan sur Firefox la solution semble les commentaires conditionnels pour IE :

#headerlogo {
background-color: inherit;
width: 229px;
height: 64px;
margin-left: 38px;
padding: 0px;
border: none;
left: 0px;
/* bug IE Three pixels jog */
<!--[if gte IE 5]>
position: relative;
left: -3px;
margin-right: -3px;
<![endif]-->
}

La par contre sous IE la modification n'est pas prise en compte, faut-il que j'utilise deux feuilles de style et détecter le navigateur en PHP ? ou aurais-je mal écrit le commentaire conditionnel ?
J'ai entendu parler de feuille corective, pour IE qu'est-ce que c'est ?

Merci.

Bonne idée l'utilisation des commentaires conditionnels.
Voir l'excellent article de Laurent Denis : Les syntaxes de commentaires conditionnels pour IE Windows
Nota : Ils se placent dans le "html", pas dans la "feuille de style".
Modifié par papillon41 (14 Nov 2006 - 21:09)

Merci,

J'ai essayé, mais IE ne les prend pas en compte :

<style type="text/css" media="all">
	@import url(debugie.css);
<!--[if gte IE 5]>
#headerlogo {
position: relative;
left: -3px;
margin-right: -3px;
}
<! endif -->
</style>

J'ai vu sur le forum l'utilisation du tiret dans la feuille de style et ça marche, mais c'est pas valide W3C ?

_position: relative;
_left: -3px;
_margin-right: -3px;

Toujours sur cette page :
http://www.reva-asso.biz/test/debugie.htm

J'ai d'autre souci l'id="haut" se décalle vers le haut au lieu du bas sur IE,
quelque pixel blanc avant le bouton inscription et à priori c'est pas le bug "Three Pixels Jog".
Le bas des blocs affiche des décalages et le pied de page droit a disparu.
L'affichage est correct sous Firefox.
Aprés beaucoup de test j'ai plu trop d'idée...

Merci pour votre aide.

reva a écrit :

J'ai essayé, mais IE ne les prend pas en compte :

<style type="text/css" media="all">
	@import url(debugie.css);
<!--[if gte IE 5]>
#headerlogo {
position: relative;
left: -3px;
margin-right: -3px;
}
<! endif -->
</style>

Essaye plutôt :

<style type="text/css" media="all">
	@import url(debugie.css);
</style>

<!--[if gte IE 5]>
<style type="text/css" media="all">
	#headerlogo {
		position: relative;
		left: -3px;
		margin-right: -3px;
	}
</style>
<! endif -->

Modifié par 20cent (14 Nov 2006 - 23:07)

Merci 20cent ça marche nickel, au passage je trouve sympa ton site Internet j'aime l'harmonie colorée.



Pour ce qui est du pied de page droit qui a disparu, vous auriez une idée ?

Cordialement.

Bonsoir,

Personne n'a d'idée ?

j'ai appliqué un display: none; sur l'id #footercentre et j'ai pu constater que c'est bien ce div qui pousse le bord gauche il y a une différence de 300 px environ entre IE et Firefox, j'ai isolé le code et le pied de page à partir de l'id "pied" s'affiche corectement sur IE et Firefox.
Ca pourrait être un cumul du flux des id supérieurs ?

Un coup de pouce svp.

Merci.

Bonjour,
Pour ton footer, il semblerait que tu ais oublié :

#footerdroit {
position: relative;
left: -3px;
margin-right: -3px;
}

dans tes commentaires conditionnels pour IE.

Bonsoir,

Mille mercis papillon41, je suis en train de me rendre compte de tout le potentiel des commentaires conditionnel c'est vraiment excellent j'ai pu résoudre tous les problèmes dans IE et tous caller au Pixel prêt.

Longue vie à Alsacreations .

Merci.