28173 sujets

CSS et mise en forme, CSS3

[Résolu]Menu en block, affichage défectueux avec IE

Bonjour à vous,

Un premier message c'est toujours émouvant Smiley birthday .

Voilà, je vous explique brièvement la difficulté que je rencontre (et qui ne se retrouve pas vraiment par la recherche, bien qu'il y ait des cas un peu semblable):
Je suis en train de créer un site (XHTML Strict 1.0 + CSS 2.0), et je rencontre un problème d'affichage du menu avec Internet Explorer. J'essaie de le régler, même si je trouve malheureux que les gens naviguent encore beaucoup avec cet outil. Parce qu'une image vaut mieux qu'un long discours, voilà ce que ça donne: http://img98.imageshack.us/my.php?image=site021ud.gif
(Sur l'image, le "Nouveauté" est en a:hover)

Ce qui gène ici, d'après mes tests, c'est le display:block du CSS. Mais je ne suis pas parvenu à régler le problème.

<div id="menu">
<h2>Menu</h2>
<ul>
<li><a href="index.htm" title="Page principale">Accueil</a></li>
<li><a href="nouveautes.htm" title="Actualités du site">Nouveautés</a></li>
<li><a href="dossiers.htm" title="Tous les articles">Dossiers</a></li>
<li><a href="liens.htm" title="Une sélection de 20 liens">Liens</a></li>
<li><a href="apropos.htm" title="Informations complémentaires">A propos</a></li>
</ul>
</div>


#menu { float:left; width:150px; }

#menu h2{
	background:#FFF;
	color:#FF9900;
	border-bottom:2px solid #FF9900;
	font-style:italic;
	text-decoration:none;
	text-align:left;
	padding-left:15px;
	margin-bottom:0;
}

#menu ul {
	list-style-type:none;
	margin:0;
	padding:0;
	border-right:2px solid #FF9900;
}

#menu a:link, #menu a:visited, #menu a:active {
	display:block;
	color:#000;
	margin:0;
	padding:2px 0 2px 12px;
	text-decoration:none;
}

#menu a:hover{
	background-color:#FFECCE;
	color:#000;
}


J'espère sincèrement que vous pourrez m'aider, parce que, à part sur ce point, je suis très fier de mon site.
Dorian
Modifié par dodormir (04 Feb 2006 - 15:17)
Bonjour et bienvenue!


#menu a:link, #menu a:visited, #menu a:active {
	display:block;
	color:#000;
	margin:0;
	padding:2px 0 2px 12px;
	text-decoration:none;
}


Pourquoi tu donnes la propriété block a tes liens et ne modifie pas plutôt les LI?
Les élément de type block genere un saut de ligne avant et aprés donc le problèlme vient peut-être de là.
En réalité, si le "block" est dans les liens, c'est parce que je souhaiterais qu'au survol de la souris, le fond du lien s'active sur toute la ligne, pour rendre l'effet de survol. Tu peux voir l'exemple sur l'image que j'ai mis dans mon post, avec le liens "nouveautés".

Si je mets le "block" dans li, le background lors du survol commence au bord de l'écran (là, ok) mais s'arrète non pas à la ligne orange, mais au bout de ce qui est écrit. Après le "s" de "Nouveautés" par exemple.

Smiley ohwell
Salut,

C'est un bug de IE. Il y a plusieurs solutions. Ajoute simplement une hauteur sur #menu a:link, #menu a:visited, #menu a:active. Par exemple "height: 20px;" (à toi de régler Smiley smile )

@+
Modérateur
Bonjour,

sinon essai un :
li {line-height:0;}
aussi etrange que cela parraisse ... Smiley smile ... pour le menu incriminé .

A plus
Après avoir essayé les deux méthodes proposées, c'est celle de Allan qui fonctionne correctement !

Cependant, j'ai modifié la taille en pixel pour la remplacer par 1.2 em. Ca permet ainsi à mon contenu de rester correct lorsqu'on agrandit la police. (Je crois que j'ai bien fait, non?)

Merci beaucoup !

(Je mets résolus à ce topic)
Sujet clos
Aller à