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:

Codice PHP:
#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 ;-)