Décalage entre IE6 et Firefox

Bonjour à tous,

Cela fait une heure que je cherche le pourquoi du comment mais je craque, j'ai un décalage entre ie6 et Firefox et je ne sais pas d'où ça vient.

Si quelqu'un a une idée, je le remercie par avance

http://img208.imageshack.us/img208/3120/tempvx.gif

#col-footer-1  { overflow:hidden; padding: 25px 0 0 30px; float:left; line-height:1.2em; text-align: left; }
#col-footer-1 img { width:108px; height:154px; }
#col-footer-2  { overflow:hidden; padding: 35px 0 0 30px; width:750px ; float:left; line-height:1.2em; text-align: center; }
address   {  padding:0; margin:0; float:left; overflow:hidden;  font-style:normal; font-size: 12px; color: #FFF; width: 780px; }
h3 { display: inline; border: 1px solid #FFFFFF; font-size: 10px; color: #FFF; margin: 0; padding-right: 10px; }
	h3.last { border: 0px; }
	h3 a.facebook { color: #FF9900; }
	h3 a { color: #FFF; text-decoration: none; }
	h3 a:hover { text-decoration: underline; }

Modifié par pika28 (12 Nov 2010 - 18:54)

A priori, IE6 ajoute un margin quand on passe le balise <h3> en display:inline. Mon probleme aurait-il un rapport avec les différences de HasLayout ?

Hello...

Je n'ai pas creusé plus que ça, mais à vue de nez je dirais que c'est un cas de 3px jog.

Mettre une marge gauche de -3px sous IE6 (avec un commentaire conditionnel) devrait régler ça.

A+

Florian_R a écrit :
Hello...

Je n'ai pas creusé plus que ça, mais à vue de nez je dirais que c'est un cas de 3px jog.

Mettre une marge gauche de -3px sous IE6 (avec un commentaire conditionnel) devrait régler ça.

A+

Effectivement, ca peut être une solution, mais j'aimerais bien comprendre la cause profonde et éviter les commentaire conditionnel

Plus d'info sur le 3px jog (ou 3px gap).

Comme je te l'ai précisé, j'ai juste jeté un œil distrait, je ne peux pas t'assurer que c'est bien ça.

Je ne pense pas car j'ai la l'effet inverse, IE6 est impeccable alors que Firefox me rajoute non pas 3 mais quatre pixels.

Une page en ligne peux-être?

Problème résolu
Modifié par pika28 (12 Nov 2010 - 18:55)

CSS et XHTLM valide en strick en plus, je ne vois pas

Bonjour, une autre indication, ajouter * { margin:0 ; padding 0 } dans le CSS ne change rien, je ne vois vraiment pas d'ou ça peut venir

Personne n'a d'idée.

Re...

En fait, avec les modifications que tu as apporté, ton décalage sous Firefox est dû au display: inline; et à la mise en forme de ton html.


Hope this help
Modifié par Florian_R (02 Nov 2010 - 15:38)

Que me suggères tu? Remplacer les balises <h3> par d'autres mais je penses que le choix du h3 est mieux pour le référencement. Ou y a t-il autre chose de plus à faire?

Plusieurs choses :

Je ne suis pas sur du tout de l'influence du h3 sur le référencement, et encore moins sur des liens dans le footer. De toute façon ta hiérarchie de titre doit être faite de façon à refléter le plan de ton document, pas à chercher à mettre en valeur du keyword à tout prix.

Personnellement, j'opterais pour une liste ordonnée, d'autres pour le footer préfère un paragraphe avec tout les liens à la suite, séparé par des pipes (|).

Ensuite, quelque soit le balisage que tu emploieras, c'est au niveau de la css que ça se joue. Si tu préfères la méthode inline, formate ton html en conséquence, comme dans l'article que je t'ai cité.

Si tu préfère les floats, règle ton souci de marge sous ie avec un commentaire conditionnel.

Ok je pense comprendre, je vais faire des tests, soit je mets tous sur la même ligne, soit je passe en <p> avec des des pipes (|), soit je provoque le probleme de layout...

J'essai tout à l'heure

Re, problème résolu en mettant tous les h3 sur la même ligne.
Modifié par pika28 (12 Nov 2010 - 18:55)