Menu Rollover: differenza tra IE e FF

[heternova]

Ciao,
mi rivolgo a voi perchè ho quasi esaurito le mie risorse. Ho fatto un menu con rollover: ogni voce di menu è un'immagine diversa e quindi ho il css seguente:

#mainNav {
margin: 0px;
padding: 0px 0px 0px 10px;
border: 0px;
width: 790px;
height: 25px;
position: relative;
z-index: 3;
list-style: none;
}

ul#listNav{
margin: 0px;
border: 0px;
padding: 0px 0px 0px 0px;
list-style: none;
float: left;
}

li.navba a {
display: inline;
list-style: none;
margin: 0px 0px 0px 12px;
padding: 0px;
height: 20px;
width: 120px;
float: left;
background-image: url(../img/buttonba.jpg);
background-repeat: no-repeat;
text-indent: -6000px;
}

li.navba a:hover {
background-image: url(../img/buttonbahover.jpg);
}

li.navequipe a {
display: inline;
margin: 0px 0px 0px 28px;
padding: 0px;
height: 20px;
width: 60px;
float: left;
background-image: url(../img/buttonequipe.jpg);
background-repeat: no-repeat;
text-indent: -6000px;
}

li.navequipe a:hover {
background-image: url(../img/buttonequipehover.jpg);
}
......
.....
...
..
..
.


Come vedete per ogni voce della lista[*] (navba, navequipe, ecc...) ho una classe diversa per poter fare il rollover. In Firefox, Opera, Seamonkey per Windows tutto bene, in Internet Explorer 6 per Window le voci di menu, al posto di vedersi una accanto all'altra, come mi sarei aspettato con float:left, sono scalate di una riga, dando l'effetto scala. La cosa strana è che si trovano dentro allo stesso <ul>:

http://hydogg.com/bandeannoncevideo.html


Non riesco a capire come mai con la proprietà float:left, IE non metta una voce affianco all'altra, ma le scala di una riga. Dov'è l'inghippo?

Grazie a tutti per il prezioso aiuto
Heter

[heternova]

Dopo vari test sono arrivato a questo:

li.navba a {
display: block;
list-style: none;
margin: 0px 30px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0px 0px 0px 0px;
height: 20px;
width: 120px;
float: left;
background-image: url(../img/buttonba.jpg);
background-repeat: no-repeat;
text-indent: -6000px;
}


Se al link do un margine sinistro di 30px, in Firefox viene visionato correttamente, mentre in IE la distranza è molto maggiore. ????

Poi ho tentato con em, ma allo stesso valore, 2em, la distanza differisce tra i due navigatori. Come si spiega?

[heternova]

ok, mi spiace per questo monologo:

ho trovato l'errore. a ogni link[*] avevo aggiunto la proprietà float:left, che aggiungeva un margine (?) in IE. Tolto i float ai link, ho messo:

ul li{float:left;}

e ora funziona.