[Résolu] Connaissiez-vous le "one pixel jog" ;o) ?

Bonjour,

J'ai un problème de 1px d'espace sous mon menu bleu sur firefox (ok sur explorer) et un problème au survol sur les deux sur la gauche des liens de ce même menu.
J'ai essayé de trouver mais là c'est le blocage.
Si quelqu'un peut jeter un oeil.


La css :

* {

	margin: 0;
}

body {
	background: #eee url(image/bg.jpg) repeat-x;
	font-family: Arial, Helvetica, sans-serif;
}

form {
	margin: 0;
	padding: 0;
}

#total {
	width: 90%;
	margin-left: 5%;
}
/* Le top menu */
#top {
text-align: right;

}
#top ul {
  margin: 0;
  padding-bottom: 0.4em;
}

#top ul li {

display: inline;
  margin: 0;
  padding: 0;
  list-style: none;


}

#top li a {
	padding: 0 0.2em 0 0.2em;
   		font: 400 0.8em arial, sans-serif;
	color: #666;
  	border-right: 1px solid #fff;
}

#top li a.last {
	border-right: 0;
}

#top li a:hover {
	color: #ff9900;
}



/* Le menu */
#header p {
	font-size: 1em;
	padding: 1em;
}
#menu  {
 background: #25C9CF;
 border-right: 5px solid #fff;
 border-left: 5px solid #fff;

}

#menu ul {
   margin: 0;
   padding: 0;
  font: 400 1.2em arial, sans-serif;
 
}

#menu ul li {
  display: inline;
  list-style: none;
}

#menu ul li a {
padding: 0 0.4em 0 0.4em;
	color: #fff;
	border-right: 5px solid #fff;
	text-decoration: none;
	background: #25C9CF;


}

#menu ul li a:hover {
  background: #666;
  color: #fff; 
}



h1 {
	font-size: 1.6em;
	font-weight: 600;
	color: #fff;
	/* background: #25C9CF; */
	background: #97CA1E;
	border: 5px solid #fff;
	padding: 0.5em;
}

h2 {
	font-size: 1.3em;
	font-weight: 500;
	color: #fff;
	background: #ff9900;
	border: 5px solid #fff;
		border-bottom: 0;
	padding-left: 0.2em;
}

h3 {
	font-size: 1.2em;
	font-weight: 500;
	color: #fff;
	background: #fec529;
	border: 5px solid #fff;
		border-bottom: 0;
	padding-left: 0.2em;
}

h4 {
	font-size: 1em;
	font-weight: 600;
	color: #ff6600;
	background: #eee;
	border: 5px solid #fff;
		border-bottom: 0;
	padding-left: 0.2em;
}

h5 {
	font-size: 0.8em;
	font-weight: 400;
	color: #fff;
	background: #ccc;
	border: 5px solid #fff;
		border-bottom: 0;
	padding-left: 0.2em;
}

p {
	font-size: 0.9em;
	font-weight: 400;
	color: #555;
	background: #eee url(image/bg1.gif) repeat-y right;
	border: 5px solid #fff;
		border-bottom: 0;
	padding-left: 0.2em;	
}

#form p {
	padding: 0.2em;
	text-align: center;	
}

#footer p {
	text-align: right;
	font-size: 0.8em;
	font-weight: 400;
	color: #eee;
	background: #666;
	border: 5px solid #fff;
	padding-right: 0.2em;	
}

.width {
	width: 100%;
}

.both {
clear: both;
}

a {
	background: transparent;
	color: #ff9900; 
}

Si quelqu'un peut m'aider...

Merci
Modifié par jpsartre (13 Jan 2007 - 23:21)

J'ai réduit le code de la partie concernée pour y voir plus clair :

/* Le menu */
#header p {
	font-size: 1em;
	padding: 1em;
}


#header ul {
 background: #25C9CF;
 border-right: 5px solid #fff;
 border-left: 5px solid #fff;
   margin: 0;
   padding: 0;
  font: 400 1.2em arial, sans-serif;
 
}

#header ul li {
  display: inline;
  list-style: none;
}

#header ul li a {
padding: 0 0.4em 0 0.4em;
	color: #fff;
	border-right: 5px solid #fff;
	text-decoration: none;
	background: #25C9CF;


}

#header ul li a:hover {
  background: #666;
  color: #fff; 
}

Merci de jeter un oeil ...

Bonjour Jean-Sol Partre ,

Tu trouveras sans doute cet article intéressant : Impact sur le rendu de la mise en forme du code HTML.

Dans le cas de ton menu, je n'ai pas exploré bien loin mais les li sont en affichage de type en-ligne, donc les espaces blancs (espaces, tabulations, sauts de ligne) seront pris en compte comme des espaces au niveau du rendu.

Ah, un lecteur de Boris Vian...

Merci beaucoup,

Très bien vu, j'ai mis les li sur la même ligne sans espace et c'est ok pour l'espace de gauche. Je n'avais jamais remarqué ça... bon à savoir.
Mais je n'arrive pas à enlever mon espace de 1px sous les liens sur Mozilla.
Si tu vois quelque chose pour m'aider.

Merci,

jpsartre a écrit :
Mais je n'arrive pas à enlever mon espace de 1px sous les liens sur Mozilla.

À vrai dire, je ne vois pas vraiment de quel espace tu veux parler...

J'ai fait une impression d'écran et la flèche rouge montre l'espace (sur Mozilla, ok pour IE)



Ce n'est pas grand chose mais j'aimerais bien comprendre cette étrangeté. Si tu as une idée...

Merci
Modifié par jpsartre (12 Jan 2007 - 23:37)

J'ai mis un border pour enlever cet espace :

#header ul li {
/* J'ai dû mettre un border pour enlever l'espace de 1px */
border-bottom: solid 1px #fff;
  display: inline;
  list-style: none;
}

Mais c'est vraiment du bricolage;
Si quelqu'un peut m'expliquer,

Merci,

jpsartre a écrit :
J'ai mis un border pour enlever cet espace :
Mais c'est vraiment du bricolage;
Si quelqu'un peut m'expliquer

Ben j'ai toujours pas réussi à retrouver ce bug. Même en supprimant la bordure que tu as rajoutée, en supprimant la taille de caractères minimale pour voir si ça venait d'un problème de dimensions dû au texte... pas réussi à obtenir cette ligne bleue.
Quelle est la version de Firefox utilisée pour le test ? À vue de nez, aucun problème avec Firefox 2.0.

Quoi qu'il en soit, je remarque que tu utilises beaucoup les bordures pour créer des espaces « blancs », plutôt que les marges par exemple. Pas sûr que ça soit la meilleure chose à faire. C'est un peu tiré par les cheveux, en fait...

en fait j'utilise : Firefox/1.5.0.9...
Je vais télécharger le 2.0
Je mets donc en résolu pour ce problème d'espace
Sinon, pour les bordures à remplacer par un margin c'est vrai que ça a l'air plus judicieux.
Je vais essayer de le faire,

Merci pour ton aide et à bientôt

J'ai enlevé les border et mon code est réduit et ça a l'air bien moins farfelu.

Merci encore

En fait je viens de mettre firefox 2.0 et j'ai toujours ce pixel d'espace entre mes liens du menu principal ( * Accueil * Page 1 * Page 2 * Page 3) et le bas du menu. Comme visible sur l'impression d'écran plus haut.
Ce n'est pas très grave mais je me demande vraiment ce que c'est, surtout que ça ne le fait pas avec IE 7.

Si quelqu'un voit le problème :

<div id="header">


    <h1>Le test</h1>

	<ul>
      <li><a href="index.php">Accueil</a></li><li><a href="#">Page 1</a></li><li><a href="#">Page 2</a></li><li><a href="#">Page 3</a></li>
    </ul>

    <p class="both">Le site de test.</p>
</div>    

et la css :

#header ul {
 background: #25C9CF;
  margin: 6px 3px 6px 3px;
   padding: 0;
  font: 400 1.2em arial, sans-serif;
}

#header ul li {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

#header ul li a {
	padding: 0 0.6em 0 0.6em;
	color: #fff;
	border-right: 5px solid #fff;
	text-decoration: none;
	background: #25C9CF;
	margin: 0;

}

#header ul li a:hover {
  background: #666;
  color: #fff; 
}

Merci d'avance
Modifié par jpsartre (13 Jan 2007 - 02:29)

Ça n'a sans doute rien à voir avec ton problème, mais :

#header ul {
  font: 400 1.2em arial, sans-serif;
}

À ma connaissance, les navigateurs ne gèrent correctement que deux niveaux de graisse : normal et bold. Je ne sais pas si c'est une limite de l'implémentation de CSS par les navigateurs, ou si c'est lié à la disponibilité des différentes graisses pour une fonte donnée (la plupart des fontes hors fontes professionnelles pour la PAO ont uniquement les graisses normales et fortes, mais rarement des graisses intermédiaires... d'autres encore n'ont qu'une graisse normale).

Oui, c'est vrai, merci,
je devrais simplement mettre bold.

Et sinon, pour mon pixel, le "one pixel jog" de FF?

Si quelqu'un peut m'indiquer une piste.

Merci encore

Salut,

Ce pixel est en dessous ou au dessus selon la taille du texte...
Le plus simple serait de s'y prendre autrement : float:left
Modifié par Alan (13 Jan 2007 - 20:48)

J'ai regardé pour la taille du texte... C'est tout de même étrange.
Sinon, j'ai essayé avec le

float: left;

sur

#header ul 

et mon pixel est encore là.
Si tu peux m'en dire plus.

Je pensais à float:left pour les items (li), à la place du display:inline (en faisant les quelques adaptations nécessaires)

Merci,
j'ai essayé ça :

#header ul {
 background: #25C9CF;
 margin: 6px 3px 6px 3px;
 padding: 0;
 font: 1.2em arial, sans-serif;
 width: 100%;
}

#header ul li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
}

#header ul li a {
	padding: 0 0.6em 0 0.6em;
	color: #fff;
	border-right: 5px solid #fff;
	text-decoration: none;
	background: #25C9CF;
	margin: 0;
}

Mais mon fond bleu disparaît sous FF à droite du menu. Et la marge blanche disparaît sous le menu.
Et comment se fait-il qu'un float: left suffise à mettre le li en ligne?

par rapport à ce code on peut ajouter :
par exemple overflow:hidden à #header ul pour le forcer à contenir ses flottants (voir la FAQ pour les explications)
et display:block à #header ul li a (l'élément A étant inline par défaut)
Modifié par Alan (13 Jan 2007 - 23:04)

Merci,

ça marche :

#header ul {
 background: #25C9CF;
 margin: 6px 3px 6px 3px;
 padding: 0;
 font: 1.2em arial, sans-serif;
 overflow: hidden;
}

#header ul li {
  float: left;
  list-style: none;
  margin: 0;
  padding: 0;
}

#header ul li a {
	display: block;
	padding: 0 0.6em 0 0.6em;
	color: #fff;
	border-right: 5px solid #fff;
	text-decoration: none;
	background: #25C9CF;
	margin: 0;
}

Je m'en vais lire les explications de ce pas.
Je n'aurais jamais trouvé cela tout seul.
Merci encore,
Modifié par jpsartre (13 Jan 2007 - 23:10)

en revanche je vois que tu as enlevé la largeur... qui était utile à Internet Explorer 5/6 pour ne pas laisser déborder les flottants (un peu trop vieux pour réagir comme les autres au "overflow:hidden".)
Il faudrait au moins utiliser à la place cette déclaration : zoom:1

Bon je voudrais pas trop t'embrouiller... il faudrait plutôt y aller progressivement
Modifié par Alan (13 Jan 2007 - 23:40)