Problème ligne blanche sous Firefox

Bonjour,

J'ai un petit problème et je m'arrache les cheveux, je ne trouve pas !
Je code un template pour une boutique Prestashop mais voilà sous Safari le menu apparaît comme je le voudrais alors que sous Firefox il y a une vilaine ligne blanche au dessus et un écart de 1px à gauche.

J'ai vraiment besoin d'aide donc merci d'avance à tous ceux qui prendront la peine de m'aider.

--Edité--

HTML :

<div class="sf-contener">
          <ul class="sf-menu">
            ...
</ul>
</div>

Une partie du CSS :

.sf-contener {
	overflow: hidden;
  clear: both;
  margin: 10px 0;
  height: 32px;
  text-transform: uppercase;
  padding-left: 7px;
  background: transparent url(../gfx/menu/menu.png) no-repeat left center;
}
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
  float: left;
  width: 980px;
	line-height:	1.2;
	/*background: transparent url(../img/blocktopmenu.gif) repeat-x;*/
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			20em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu img {

}
.sf-menu span {
  vertical-align: 7px;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}

Modifié par GuilVII (07 Mar 2011 - 11:54)

Bonjour,

aurais-tu une version de ce bloc qu'on pourrait explorer dans firebug ?

A première vue il y a plusieurs éléments qui pourraient causer ça, à commencer par ta grande image au-dessus dont tu n'as pas mis le code.

Ca pourrait également venir du line-height de .sf-menu, ou des float et clear... Si tu as firebug c'est le moment de t'amuser à désactiver les propriétés une par une

Bon courage en tout cas!
Modifié par Ten (22 Feb 2011 - 13:36)

Tout d'abord merci de ta réponse.

La grande image au dessus dont tu parles n'en est pas une, c'est l'image background donc rien à voir avec le logo transparent dessus avec un padding-bottom: 22px; que si je modifie, sous Safari ça ne ressemble plus à rien donc le problème ne vient pas de là.

Le site est en ligne donc tu peux inspecter sous Firebug car moi je trouve rien à part le height de sf-contener :

http://www.golfacademyfrance.com

Merci encore Ten

Quelle version de Fx as-tu ?

Sous la mienne (3.6.13), je ne vois que le décalage d'un pixel à gauche, pas en haut.

Le premier truc qui me saute aux yeux c'est qu'à priori, pour le décalage à gauche, ça n'est pas ton menu qui est décalé mais ton élément derrière le logo. Quand je survole id="page", je vois clairement que l'image derrière ton menu en sort. Ce fond est appliqué sur le body, et ton id="page" est centré, ce qui signifie simplement que ces éléments n'ont pas la même largeur.

Changes la largeur de id="page" par 982px.

Le miracle opère chez moi, j'espère que c'est le cas aussi chez toi

Par contre aucune trace du décalage vertical.. Qu'en est-il ?

Bon courage, j'espère t'avoir aidé!

Un bon vieux problème de différence dans le calcul du centrage.
Tu as deux éléments centrés horizontalement:
- une image de fond dans BODY;
- ton div#page (centré via marges automatiques).
Tous deux ont une largeur paire en pixels, mais si le conteneur (BODY) a une largeur impaire il faut laisser un nombre pair de pixels d'un côté et un nombre impair de l'autre pour centrer l'élément. Les algorithmes des navigateurs pour gérer ça peuvent être différents. Dans Opera et Chrome, j'arrive à avoir un décalage horizontal d'un pixel dans certains cas, et un bon alignement dans d'autres.
La solution consiste à... éviter ce cas de figure! Dans ce cas précis, je m'arrangerais pour avoir le maximum d'éléments du fond dans le header. L'ombre de gauche peut être un élément placé en absolu à gauche avec une image de fond, ou bien on peut garder une image de fond mais qui contient uniquement l'ombrage (gauche et droite, pas en bas), le fond sombre et les bordures de 1px était dessinées par #header ou son contenu.

(Dans l'absolu j'aurais évité ces effets d'ombrage complètement incohérents entre eux. Taper sur le designer.)

Pour l'espace vertical en trop, c'est dû à la hauteur de div#logo qui peut être calculée un peu différemment (en fonction de la fonte par exemple). Dans ce cas précis tu peux te permettre un height. Dans des cas où tu as des contenus un peu plus complet dans un bloc, on préfèrera utiliser min-height plutôt que height (et prévoir un rendu correct dans le cas où la hauteur prise par le contenu n'est pas la hauteur optimale prévue).

A vrai dire j'ai la même version que toi (3.6.13) mais je suis sous mac, même si ça ne change rien je pense.

C'est fou cette histoire !

J'ai fait ce que tu m'as dit pour l'id=page je l'ai passé à 982px, sous Firefox le menu n'a pas bougé mais ça me l'a décalé sous Safari.
Ce qui semble bizarre c'est que sous Safari il est parfait comme je voudrais et sous Firefox j'ai toujours le décalage horizontal ET vertical.

Peut-être qu'une fonction CSS du code n'est pas bien supporté sous Fx ? M'enfin ça m'étonnerait avec la nouvelle version

Ca me rend vraiment fou...

Merci aussi à toi fvsch pour ton analyse détaillée.

Je vais essayer tout ce que tu m'as dit fvsch et je vous tiendrai au courant.

Merci encore