28172 sujets

CSS et mise en forme, CSS3

[Résolu] Soulignement fonctionne sous FF, pas sous IE

Salut
J'aimerais comprendre pourquoi mon soulignement (au survol) fonctionne sous FF mais pas sous IE.
http://collectif7.free.fr/test.html

Ce morceau de code est extrait d'une page (et d'un css) que j'ai simplifiés au maximum pour isoler l'origine du pb. J'espère que j'en ai pas enlevé trop!
En tout cas, j'ai compris que si j'enlève float:left, ça fonctionne! mais alors ma liste n'est plus horizontale... une idée?

ul#menu {
	list-style: none;	/* supprime les puces */
}

ul#menu li {
	margin-left: 10px; 	/* espacement */
	float: left; 		/* alignement horizontal */
}

ul#menu li a {
	text-decoration: none;/* supprime le souligné*/			
}

#menu li a:hover {
	border-bottom:2px solid red;
}

Modifié par toper (15 Nov 2009 - 12:25)
Ce que je soupçonne: un bug de dessin des éléments dans Internet Explorer 6 et 7, plus ou moins lié au HasLayout. Ce bug ne devrait pas être présent dans IE8 (c'est toujours ça de gagné).

La situation:
- les LI sont flottants, et par conséquent ont le layout dans IE6-7;
- les A sont en display:inline (par défaut), donc la bordure rajoutée dépasse de la zone décrite par le LI parent;
- IE 6 et 7 ont la fâcheuse tendance, dans un certain nombre de cas de figure, à masquer tout ce qui dépasse d'un élément qui a le layout (les LI, ici).

Pas sûr ceci dit que ce problème se manifeste avec IE7. Même si l'IE Team ne s'est pas attaqué au HasLayout en préparant IE7, ils ont tout de même corrigé pas mal de bugs de ce genre.

Note en passant: quand on indique un problème sur IE, toujours indiquer la ou les versions d'IE concernées. Merci.

Solution possible au problème:
- passer les LI en display: inline (peut suffire);
- si besoin de mise en forme un peu complexe sur les LI, garder le display:inline, passer le float:left et l'essentiel des styles directement sur les A.
Merci Florent pour l'explication détaillée. Y'a pas à dire c'est un métier Smiley cligne
Pour info, ma version d'IE est la 7.

a écrit :
- passer les LI en display: inline
ne change rien
a écrit :
- si besoin de mise en forme un peu complexe sur les LI, garder le display:inline, passer le float:left et l'essentiel des styles directement sur les A.
pas essayé...

- car la solution de pfoofen fonctionne Smiley biggrin

Merci les gars!
toper a écrit :
- car la solution de pfoofen fonctionne Smiley biggrin

Par contre je suis presque sûr qu'elle déclenchera un bug sous IE6 (dont la parade consiste à passer les liens en float:left eux aussi). Smiley smile
Florent V. a écrit :

Par contre je suis presque sûr qu'elle déclenchera un bug sous IE6 (dont la parade consiste à passer les liens en float:left eux aussi). Smiley smile


Non, j'ai testé et RAS Smiley smile
bonjour,

En effet la balise a a quelque bug d'affichage dans IE 6que l'on oubli avec sa disparition .

Selon les contexte , plusieurs solution permettent d'arranger ça :

display:inline-block; ou zoom:1; ou float . Ces regles ont pour effet d'activer le layout (modifie le contexte de formatage propre au version de IE anterieur a 8 )

Il y a aussi le line-height , qui augmente la hauteur d'affichage de cette balise (fixer a 1.5em par exemple pour une bordure de 2px ) .
Ce line-height peut-etre appliqué a <a> directement , l'idéal est de l'appliqué a li afin qu'il absorbe dans sa hauteur l'apparition de cette bordure ponctuelle et que le rendu soit a peu prés le même partout.

Enfin , si le line-height pose probleme , le layout pas souhaité , reste encore le position:relative; qui force l'affichage et laisse apparaitre les bordures basses cachées.

Le choix de l'une ou l'autre des solutions sera determiné par les autres besoin de mise en forme .

GC
Sujet clos
Aller à