[Résolu] Décalage de 1px en fonction de la taille du navigateur

Bonjour à tous ! J'espère que quelqu'un pourra m'aider à corriger un léger (mais incompréhensible) bug css.

En fait, j'ai créé un #footer sans dimensions précises (qui occupe donc toute la largeur de l'écran), avec à l'intérieur un #footer-contenu de largeur 980px positionné au centre avec un margin:0 auto. Jusque là tout va bien.

Dans mon #footer-contenu, j'ai positionné un #footer-logo (original, non ? ) avec le css suivant :

#footer-logo {
display:block; /* car l'élement est un <a> */
width:227px;
height:149px;
background:url(img/bottom-logo.jpg) center no-repeat;
text-indent:-10000px; /* toujours car l'élement est un <a> */
margin-left:-12px;
margin-top:-8px;
float:left; /* pour positionner une liste de liens qui vient se poser juste à droite */
}

Ce qui me donne ceci :

http://i.min.us/imxOQM.png

Par contre, quand je réduis un tout petit peu mon navigateur, cela me donne ceci :

http://i.min.us/imywWQ.png

Regardez bien, le logo est décalé de 1px vers la gauche. Comme si mon margin-left:-12px était réinterprété en -13px en fonction de la taille du navigateur ou de la résolution de l'écran. Ce problème apparaît par exemple sur une résolution en 1920x1200 mais pas sur un 1680x1050.
Ce problème est-il dû à un bug graphique du navigateur ? Des pistes ? Quelqu'un a-t-il déjà rencontré ce problème avant moi ? Merci d'avance !

Mathieu
Modifié par massiou (18 Mar 2011 - 17:30)

Bonjour,

À vue de nez, problème d'arrondi avec une image de fond centrée, et un bloc centré.
- Le viewport peut avoir une largeur variable, paire ou impaire.
- Tes deux éléments (image de fond et bloc) ont peut-être l'un une largeur paire, et l'autre une largeur impaire.
- Pour centrer un élément le navigateur doit parfois laisser un nombre pair de pixels d'un côté et impair de l'autre (les demi-pixels n'existent pas).

Avec toutes ça et les différents algorithmes des navigateurs, tu peux effectivement avoir ce type de décalage d'un pixel. La solution: faire ton découpage autrement. Par exemple l'image de fond du pied de page pourrait avoir uniquement la bande marron.
Modifié par fvsch (18 Mar 2011 - 13:41)

Bonjour,

La solution qui évitera les problèmes :

<img src="img/bottom-logo.jpg" alt="">

Si l'image est réellement un lien, le alt de l'image devra porter l'intitulé du lien.

fvsch a écrit :
Bonjour,

À vue de nez, problème d'arrondi avec une image de fond centrée, et un bloc centré.
- Le viewport peut avoir une largeur variable, paire ou impaire.
- Tes deux éléments (image de fond et bloc) ont peut-être l'un une largeur paire, et l'autre une largeur impaire.
- Pour centrer un élément le navigateur doit parfois laisser un nombre pair de pixels d'un côté et impair de l'autre (les demi-pixels n'existent pas).

Avec toutes ça et les différents algorithmes des navigateurs, tu peux effectivement avoir ce type de décalage d'un pixel. La solution: faire ton découpage autrement. Par exemple l'image de fond du pied de page pourrait avoir uniquement la bande marron.

Merci, tu confirmes ce que l'on pensait dans l'équipe : le décalage est certainement dû à la largeur paire ou impaire du navigateur, qui influe forcément sur la méthode de centrage des éléments. Ce qui est étonnant c'est que le bloc positionné au dessus du footer (qui est aussi centré avec un margin:0 auto;) fait 980px, soit la même taille que le footer. Théoriquement, le navigateur devrait calculer les mêmes espaces droite et gauche pour le bloc positionné au dessus que pour le footer. Mais ce n'est pas le cas et c'est ça qui m'étonne. De plus, c'est un "bug" qui n'apparaît pas sur IE8.

Pour résumer, l'architecture est la suivante :

<div id="main-content">
</div>

<div id="footer">
         <div id="contenu-footer">
         </div>
</div>

Avec le CSS suivant :

#main-content { width:980px; margin:0 auto; }
#contenu-footer { width:980px; margin:0 auto; }

La différence est que le #main-content est positionné par rapport au body, alors que le #contenu-footer est dans une div. Le problème viendrait peut-être de là ?

@Laurie-Anne : merci, mais cela ne changera pas le problème de centrage du contenu du #footer
Modifié par massiou (18 Mar 2011 - 15:02)

Peut-être pas, mais niveau accessibilité et bonne pratique, ce sera un grand mieux.

massiou a écrit :
La différence est que le #main-content est positionné par rapport au body, alors que le #contenu-footer est dans une div. Le problème viendrait peut-être de là ?

Faut voir. Une page en ligne?

Malheureusement non, pas de page en ligne pour le moment mais d'ici lundi certainement. Je vais voir si positionner le #main-content dans un div change quelque chose, mais j'en doute.

J'ai trouvé. En fait, j'avais complètement oublié que j'avais rajouté un border-right de 1px au #main-content. Donc la largeur "absolue" de l'élément n'était pas de 980 mais de 981px. Un chiffre impair pour le main-content, et un chiffre pair pour le footer. Donc logique que la gestion des margin ait posé problème. Morale : ne pas oublier que la taille de la bordure est à prendre en compte dans la largeur d'un élément (erreur de débutant ? ).

Merci à tous quand même