Menu Bevled (3d) probleme avec IE et Firefox

Salut chers amis
J'ai creé un menu, avec lequel qu'on clique ça donne un effet de 3D en Hover...
j'ai deux probleme avec
le premier bleme c'est avec Internet explorer, quand pose le curseur au-dessous du menu, ça donne l'effet du 3DA, mais j'ai tjrs un petit espace au-dessous des eléments de menu ...voici les images pour bien comprendre mon probleme.
Je prefere que vous m'aidez au premier de resoudre ce bleme avant de passer au probleme de Firefox.



Voici le CSS du menu

.bevelmenu{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 140px;
	margin-left: 2px;
}

.bevelmenu li a{
	display: block;
	width: 138px;
	text-decoration: none;
	font-weight: bold;
	text-decoration:none;
	border-color: #B08D59;
	border-top: 1px solid;
	padding-left: 2px;
	color: #993300;
}

.bevelmenu li a:hover{
	color: #FFFFFF;
	background-color: #B38751;
	border-style: outset;
	border: 2px;
	width: 135px;
	padding-top: 0px;
	padding-bottom: 0px;
	border-color: #CCAE8B;
	filter:alpha(opacity=77);
-moz-opacity:77;
opacity:77;}


html>body .bevelmenu li a:active{ /* Apply mousedown effect (non IE browsers only) */
border-style: inset;
}

Voic le HTML du menu

   <td width="148" height="205" valign="top"><p>&nbsp;</p>
               <ul class="bevelmenu">
		    
                  <li><a href="#" >Pr&eacute;face</a></li>
                  <li><a href="#" > Direction du &nbsp;Tourisme</a></li>
                  <li><a href="#" > Pr&eacute;sentation de la &nbsp;wilaya de&nbsp;M'sila</a></li>
                  <li><a href="#" >Aper&ccedil;u historique </a></li>
                  </ul>
               </td>

Modifié par gatesnet (11 Oct 2006 - 21:49)

Bonjour,

Tout d'abord menu principal et non principale ... ça fera beaucoup plus mieux !!

Ensuite, je crois que c'est le border de ton .bevelmenu li a:hover qui te fait ça, plus précisemment border-style: outset; qui te rajoute de la longueur ...

Donne un height à tes éléments et réduit le en hover pour compenser l'augmentation de taille ...