Menu Orizzontale allineato con Explorer, ma non con Firefox

[ChemicalMe]

[Mi scuso per non aver messo un titolo consono, pensavo fosse sufficiente dire che riscontravo un problema con il css che in un browser si leggeva e in un altro no.. in effetti avrei dovuto essere più specifica, quindi riapro il topic sperando di non commettere altre infrazioni, il regolamento lo avevo letto già prima]


Riporto il problema già segnalato, che nel frettempo grazie all'utente che aveva risposto al topic mi ha portato ad aggiustare almeno in parte la situazione.

La struttura è questa:
C'è un'immagine di base come sfondo della barra dei pulsanti (con contorni arrotondati eccetera), sopra appaiono dei pulsanti composti da semplice testo, ed il loro sfondo cambia (di immagine) al passaggio del mouse.

Il problema è che il testo dei pulsanti è tutto sulla sinistra, e se provo a cambiare il float, da left a center, succede qualcosa di illogico, ovvero l'allineamento è perfetto, ma con Firefox lo sfondo dei pulsanti improvvisamente assume le dimensioni del testo, e non quelle preimpostate.
Allego il codice che ho riadattato su quello fornitomi dall'altro utente, sistemando gli inconvenienti della width fissa e del display: block:

<style type="text/css">

#pulsanti {
BACKGROUND: url(pulsanti.png);
background-repeat: no-repeat;
height: 68px;
width: 800px;
MARGIN: 0px 0px;
TEXT-ALIGN: center;
}

#pulsanti UL {
PADDING-RIGHT: 0px;
DISPLAY: inline;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
}
#pulsanti LI {
PADDING-RIGHT: 0px;
DISPLAY: inline;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
}
#pulsanti A {
text-decoration: none;
PADDING-RIGHT: 20px;
PADDING-LEFT: 20px;
BACKGROUND: url(sfondopulsanteoff.png);
FLOAT: left;
TEXT-ALIGN: center;
PADDING-BOTTOM: 0px;
COLOR: #000393;
LINE-HEIGHT: 60px;
PADDING-TOP: 0px;
HEIGHT: 68px;
}
#pulsanti A:hover {
BACKGROUND: url(sfondopulsanteon.png);
height: 68px;
TEXT-DECORATION: none;
COLOR: #ffffff;
}

</style>
</head>


<DIV id=pulsanti>
<font face="Arial" size="4">
<LI>Testo
<LI>Testo
<LI>Testo
<LI>Testo</LI>[/list]</DIV>

Spero di non aver fatto pastrocchi.
Grazie in anticipo!

[fede89verona]

Hai un indirizzo, al quale possiamo vedere anche il risultato con le immagini corrette?? scaricando il codice e salvandolo in una pagina html non si capisce molto, in quanto non abbiamo le immagini (con queste potremo vedere l'effetto che dici tu tra IE e MOZZILA)...

Parentesi: che versione di IE utilizzi??
grazie

[ChemicalMe]

Ciao fede
Utilizzao IE 7
No, però ho messo le immagini on line quindi è uguale, ecco il codice con i link aggiornati:

<style type="text/css">

#pulsanti {
BACKGROUND: url(http://i49.tinypic.com/21ngkn5.png);
background-repeat: no-repeat;
height: 68px;
width: 800px;
MARGIN: 0px 0px;
TEXT-ALIGN: center;
}

#pulsanti UL {
PADDING-RIGHT: 0px;
DISPLAY: inline;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
}
#pulsanti LI {
PADDING-RIGHT: 0px;
DISPLAY: inline;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
}
#pulsanti A {
text-decoration: none;
PADDING-RIGHT: 20px;
PADDING-LEFT: 20px;
BACKGROUND: url(http://i46.tinypic.com/2upxq9k.png);
FLOAT: left;
TEXT-ALIGN: center;
PADDING-BOTTOM: 0px;
COLOR: #000393;
LINE-HEIGHT: 60px;
PADDING-TOP: 0px;
HEIGHT: 68px;
}
#pulsanti A:hover {
BACKGROUND: url(http://i45.tinypic.com/iz9jiv.png);
height: 68px;
TEXT-DECORATION: none;
COLOR: #ffffff;
}

</style>
</head>


<DIV id=pulsanti><ul>
<font face="Arial" size="4">
<LI>Testo
<LI>Testo
<LI>Testo
<LI>Testo</LI>[/list]</DIV>

[ChemicalMe]

Non so più come provare a rigirare questo codice per farlo venire giusto.
Come mai centrando il float lo sfondo non segue più l'altezza prefissata, ma si riduce invece ad una riga sottile? Ha senso?

[ChemicalMe]

nessuno sa aiutarmi? é_è

[ChemicalMe]

Ragazzi io nel frattempo vi aggiorno... ho risolto tutto.. sono fiera di me U_U