menu orizzontale css: block e inline problemi

[MaPPaZZo]

ciao a tutti, sono alle prime armi con i CSS e sto cercando d capire quali sono le regole generali da seguire. Ho creato il seguente codice:

#menu_principale {     
margin:0;     
padding:0; 
float:left;     
list-style:none;     
height:30px;     
line-height: 30px;     
text-decoration: none; 
} 

#menu_principale a {     
display:block;     
height:30px;     font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;     
font-weight: bold;     
text-align: center;     
background-image: url(nav_background.gif);     
padding-right: 20px;     
padding-left: 20px;     
text-decoration: none;     
color: #666; 
} 
.home a:hover {background-image:url(bg_home.gif) !important; color: #fff !important;} 
.reports a:hover {background-image:url(bg_reports.gif)!important;} 
.community a:hover {background-image:url(bg_community.gif)!important;} 
.news a:hover {background-image: url(bg_news.gif) !important;} 
.events a:hover { background-image: url(bg_events.gif ) !important ; } 

con firefox tutto ok, ma internet explorer dispone i blocchi verticalmente.
Ho applicato allora il display inline al posto del display block e il problema si è risolto con IE, ma con FF perdo la proprietà in altezza.

Ho creato le altre classi per poter dare colori diversi agli stati di hover corrispondentemente ai diversi bottoni, ma questo funziona.

Come risolvo per la visualizzazione?

Grazie ;-)

[oronze]

gli elementi inline perdono le proprietà che hai citato tu....potresti far flottare i vari[*] con float:left; è possibile che in base al tuo layout si incasini tutto....se ciò dovesse succedere prova a inserire un div vuoto subito dopo l'ultimo float: left e mettici clear:both;
puoi anche provare con display:inline-block; ma io personalmente non l'ho mai usato quindi non so come si comporta con i browser

[MaPPaZZo]

perfetto, funziona benissimo!!!

lo stato di hover con colori di sfondo va bene, ma se volessi fare in modo che il bottone rimanga selezionato ( effettuando un controllo sulla pagina attuale con php che switcha la classe), che classe dovrei creare???

ho cercato info sulle pseudoclassi ma nn ci ho capito piu di tanto...

mi viene in mente di copiare le stesse proprietà degli stati hover ma chiamarli con nomi diversi, e farli applicare nei momenti opportuni...

posso fare na roba del genere?

.home a:hover .homeattiva {.........} 

e applicare la classe homeattiva quando deve stare schiacciato?

ho provato ma mi perde la larghezza della classe .home a....il codice adesso è modificato cosi:

#menu_principale {
    margin:0;
    padding:0;
    list-style:none;
    height:30px;
    line-height: 30px;
    text-decoration: none;
}
#menu_principale li{
display:inline;
} 
#menu_principale a {
    display:block;
    float:left;
    height:30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: bold;
    text-align: center;
    background-image: url(images/nav/nav_background.gif);
    text-decoration: none;
    color: #494949;
}
.home a {
width:118px; 
} 
.home a:hover {
background-image:url(images/nav/bg_home.gif) !important; color: #fff !important;
} 

e cosi via poi per gli altri sfondi....

dove sbaglio?