Display: block et les listes

Salut,

Je fais un menu vertical et j'ai mis les liens en display: block; pour qu'ils soient cliquables sur 100% de la largeur. Jusque là, ok mais le problème viens de... IE ! On s'en serait douté...

Voilà ce que ca donne sous Firefox :
http://*****.net/Firefox.png

Et sous IE :
http://*****.net/FuckIE.png

Vous voyez le problème avec l'espace en trop ?

Voilà le code HTML :

     <div id="menu">
        <h1><a href="./" title="Accueil"><span class="m_accueil">Accueil</span></a></h1>
	<h1><span class="TitleBuy">Acheter</span></h1>

	<ul class="liste_menu">
		<li><a href="./liste.php?a=1&amp;t=1" title="Achat d'une maison"><span class="m_acheter">Maison</span></a></li>
		<li><a href="./liste.php?a=1&amp;t=2" title="Achat d'un appartement"><span class="m_louer">Appartement</span></a></li>
		<li><a href="./liste.php?a=1&amp;t=3" title="Achat d'un fonds de commerce"><span class="m_fdcomm">Fonds de commerce</span></a></li>
	</ul>

et la feuille de style CSS :

div#menu {
        position: absolute;   
        width: 160px;
}
div#menu h1 {
        font-size: 1em;
	margin: 10px 0 5px 0;
}
div#menu a {
	font-weight: bold;
	text-decoration: none;
	color: #F2E0BD;
	display: block;
	padding-left: 10px;
}
ul.liste_menu {
        margin: 0;
        padding: 0;
        list-style-type: none;
}
div#menu .TitleBuy, div#menu h1 a {
	padding: 0 0 0 5px;
}
div#menu a:hover, div#menu h1 a:hover {
	color: #9FB6CC;
	background-color: #F2E0BD;
	-moz-border-radius: 0 10px 0 0;
}

Le problème vient quand je met display: block; pour div#menu a{}...
J'ai essayé les margin et padding à 0 mais ça n'a rien changé.

Quelqu'un a une idée pour résoudre ça ?

Merci
Modifié par Surfoo (15 Sep 2009 - 11:05)

complète le style de div#menu a avec _height : .1em.

renseigne la valeur de la propriété width pour div#menu a

Merci beacoup, ca fonctionne très bien avec les 2 solutions.