Menu css che mette bordi a caso?

[Sonikag]

ho un menu css così:

 
<ul class="menu">
	[*]home
	[*]v2
	[*]v3
	[*]v4
	[/list]

.menu, .menu li, .menu ul, .menu a{
display: inline;
	list-style-image: none;
	list-style-type: none;
	margin:0px;
		padding:0px;
}

#home2{
   padding:0; padding-left:0px;
   margin:0; margin-left:0px;
   width:149px; height:93px;
   font:normal bold 1em Verdana, Arial, Helvetica, sans-serif;
   color: #fff;
   text-align: left;
   vertical-align: top;
   background:transparent url(interfaccia/home2.jpg) no-repeat 100% 0;
   display:block;
   float: left;
   border-left:0px solid #fff;
   border-right:2px solid #fff;
   	   text-decoration: none;
}
body>#home2{
   padding:0; padding-left:0px;
   margin:0; margin-left:0px;
   width:147px; height:93px;
   font:normal bold 1em Verdana, Arial, Helvetica, sans-serif;
   color: #fff;
   text-align: left;
   vertical-align: top;
   background:transparent url(interfaccia/home2.jpg) no-repeat 100% 0;
   display:block;
   float: left;
   border-left:0px solid #fff;
   border-right:2px solid #fff;
   	   text-decoration: none;
}
#home, #home:link, #home:visited, #home:active {
   padding:0; padding-left:0px;
   margin:0; margin-left:0px;
   width:149px; height:93px;
   font:normal bold 1em Verdana, Arial, Helvetica, sans-serif;
   color: #fff;
   text-align: left;
   vertical-align: top;
   background:transparent url(interfaccia/home1.jpg) no-repeat 100% 0;
   display:block;
   float: left;
   border-left:0px solid #fff;
   border-right:2px solid #fff;
   	   text-decoration: none;
}
body>#home, #home:link, #home:visited, #home:active {
   padding:0; padding-left:0px;
   margin:0; margin-left:0px;
   width:147px; height:93px;
   font:normal bold 1em Verdana, Arial, Helvetica, sans-serif;
   color: #fff;
   text-align: left;
   vertical-align: top;
   background:transparent url(interfaccia/home1.jpg) no-repeat 100% 0;
   display:block;
   float: left;
   border-left:0px solid #fff;
   border-right:2px solid #fff;
   	   text-decoration: none;
}
#home:hover {
   background:transparent url(interfaccia/home2.jpg) no-repeat 100% 0;
}

Gli altri id sono identici a home solo che cambia l'immagine di rolloveer.
Il problema è che quando imposto l'id home2 al bottone attivo mi si aggiunge un bordo di 3px circa a sinistra e solo con ff.

[Sonikag]

ho risolto il problema sostituendo

body>#home, #home:link, #home:visited, #home:active {


con

body>#home, body>#home:link, body>#home:visited, body>#home:active {


però non capisco perchè con mozilla ci siano spazi tra una voce e l'altra.

[Sonikag]

ho fatto questa prova:

   padding:0; padding-left:0px;
   margin:0; margin-left:0px;
   width:151px; height:93px;
   font:normal bold 1em Verdana, Arial, Helvetica, sans-serif;
   color: #fff;
   text-align: left;
   vertical-align: top;
   background:transparent url(interfaccia/servizi1.jpg) no-repeat 100% 0;
   display:block;
   float:left;
   border-left:4px solid #fcc;
   	   text-decoration: none;

nonostatne margin e padding siano a 0 tra il bordo e l'imagine di sfondo ci sono alcuni px vuoti!

[Sonikag]

Ho capito il problema!!!
In ff non vede le dimensioni corrette impostate nel foglio stile!

#home2{
   padding:0; padding-left:0px;
   margin:0; margin-left:0px;
   width:151px; height:93px;
   font:normal bold 1em Verdana, Arial, Helvetica, sans-serif;
   color: #fff;
   text-align: left;
   vertical-align: top;
   background:transparent url(interfaccia/home2.jpg) no-repeat 100% 0;
   display:block;
      float:left;
   border-left:4px solid #fff;
   	   text-decoration: none;
}
body>#home2{
   padding:0; padding-left:0px;
   margin:0; margin-left:0px;
   width:147px; height:93px;
   font:normal bold 1em Verdana, Arial, Helvetica, sans-serif;
   color: #fff;
   text-align: left;
   vertical-align: top;
   background:transparent url(interfaccia/home2.jpg) no-repeat 100% 0;
   display:block;
    float:left;
   border-left:4px solid #fff;
   	   text-decoration: none;*/
}

ff prende le dimensioni di #home2 e non di body>home2