28220 sujets

CSS et mise en forme, CSS3

Bonjour,
Sur un de mes projets, mon menu réagit au passage de la souris au dessus des liens (une bordure apparaît au dessus et au dessous)... Comme IE ne peut faire ça que sur des <a> et non sur des <li> (d'après ce que j'ai remarqué), j'ai mis le <a> avec la propriété "display: block" (pour que les bordures prennent toute la largeur du bloc parent.

Sous Firefox, tout se passe bien, par contre, vous l'aurez deviné, sous IE, le résultat est quelque peu décevant (pas catastrophique non plus !) : Un margin s'est mis en dessous de mes liens ce qui fait que les différents éléments du menu sont séparés par au moins 10 pixels.

Un "margin: 0" ne change rien, j'ai essayé beaucoup de choses (mettre "margin: 0; padding: 0;" sur divers éléments, rien n'y fait.

Je vous met la partie du code en question, si vous voulez la page, demandez ! Smiley cligne
<ul>
	<li><a href='informatique.htm'>Informatique</a></li>
	<li><a href='#'>Technologiques</a></li>
	<li><a href='#'>Conseils en organisation</a></li>
</ul>

#menu a {
	border-top: 1px solid #2F7F36;
	border-bottom: 1px solid #2F7F36;
	display: block;
	margin: 0;
}

#menu a:hover {
	border-top: 1px solid white;
	border-bottom: 1px solid white;
}


Merci de votre aide...
ApOpH!s.
Modifié par ApOpH!s (30 May 2005 - 19:55)
Administrateur
Je pense qu'il faut spécifier une hauteur (height) à tes liens, ou une hauteur de ligne (line-height)
Merci Rapahël, le "height" marche parfaitement...
Le "line-height" ne marche pas car quand j'atteint la bonne hauteur de ligne sur IE, celles de Firefox sont trop rapprochées, c'est en relatif et pas en absolu.