[RESOLU] Espace en trop uniquement dans IE6

Bonjour,

J'ai un petit soucis qui apparaît uniquement sous IE6. J'ai également testé sous Firefox, IE7, Opéra et Safari, tout marche parfaitement.

C'est pour ce site : il y a un espace entre le contenu principal en blanc et le sous-menu en beige (qui est vide pour la page d'accueil).

Si vous cliquez sur le menu Band Infos par exemple, le sous-menu contient des éléments, et du coup l'espace est encore plus important.

Je suis sûr que c'est lié au sous-menu (<div id="subnav"> dans le code), car si je le supprime, le problème disparaît.

Comme vous pouvez le voir dans le code, j'ai tout mis sur une seule ligne, mais ça ne change rien. J'ai également été voir les solutions proposées dans les sujets trouvés grâce à une recherche sur le forum, mais je n'ai pas réussi.

J'ai déjà été confronté au problème du 3 pixel Jog pour ce site, mais j'ai l'impression que là il s'agit d'un autre soucis.

Bref, je suis preneur de vos avis et conseils.

Merci !
Modifié par laBAP (03 Aug 2007 - 14:42)

Bonjour,
cet espace vient de ton line-height de 140% qui faut annuler:

le code corrigé et simplifié:

#subnav {
  height: 16px;
  background: url(subnav_b.jpg) no-repeat;
}
#subnav li {
  float: left;
  list-style: none;
  text-indent: -999em;
}
#subnav a {
  display: block;
  line-height: 16px; /*déclaration réglant ton problème*/
}

Les height 100% ne servaient pas à grand chose ici.
le float:left fait passer la valeur calculée du display à block de manière transparente donc le display:block est inutile dans ce cas.
Une boîte de bloc (élément doté d'un display:block sois par la CSS de l'auteur sois par le rendu par default du navigateur) prend tout l'espace disponible en largeur donc inutile de le combiner à un width:100%.
Modifié par Hermann (02 Aug 2007 - 22:43)

Merci de cette réponse très détaillée ! J'ai appris des choses .

En fait je pensais qu'en donnant une hauteur en pixels à mon div, puis en donnant une hauteur de 100% au ul, puis aux li, puis aux a, ils allaient tous hériter de la hauteur du div.

Bref, tes explications corrigent le problème quand il y a quelque chose dans le sous-menu.

Mais quand celui-ci est vide (c'est-à-dire qu'il y a juste un div vide), il reste un espace d'un pixel sous IE6. J'ai essayé de mettre un line-height dans le div, mais ça ne change rien.

Je ne vois pas trop d'où il peut venir celui-là .

En tout cas encore merci pour ta réponse !

Avec un font-size:1px, tu n'auras plus d'espace.

#subnav {
  height: 16px;
  font-size: 1px;
  background: url(subnav_b.jpg) no-repeat;
}

Pour les explications, voir la FAQ.
Modifié par Hermann (03 Aug 2007 - 13:59)

Hermann a écrit :
Pour les explications, voir la FAQ.

Item de FAQ à prendre avec des pincettes, toutefois. C'est un peu vague/inexact/incomplet (même si l'information de base est juste).

Parfait !

Merci pour vos réponses.