Problemi di rendering in menu orizzontale

[samiel]

Ho realizzato un menu orizzontale con questo codice:

#navbarwrapper {clear:both; width:98%; height:50px; margin:0 auto; background-color:#1E247C}
#navbar ul{height:50px; line-height:2.8; list-style:none; margin:0 auto; padding:0; text-align:center; background-color:#1E247C}
#navbar li{display:inline; margin:0 auto; padding:4px 6px; background:white; color:#E03011}
#navbar a{background:white; padding:4px 0 3px; color:#1E247C; text-decoration:none}
#navbar a:hover{background:white; color:black; text-decoration:underline}

In IE (ho verificato le versioni 5.5, 6 e 7) le caselle non erano separate,
col rosultato che li menu appariva come un'unica striscia bianca con le voci.
Allora ho adottato una versione alternativa con un commento condizionale:

#navbarwrapper {clear:both; width:98%; height:50px; margin:0 auto}
#navbar ul{height:30px; line-height:50px; list-style:none; text-align:center; background-color:#1E247C}
#navbar li{display:inline; margin:0 4px; background:white; color:#E03011}
#navbar a{background:white; color:#1E247C; text-decoration:none}

Ora le voci sono separate, ma le caselle molto più ampie di quanto
dovrebbero e, non capisco il motivo, la casella selezionata (effetto hover)
risulta puù stretta delle altre.
Se non capite che cosa intendo, vedete qui con Firefox e poi con IE:
http://samiel.netsons.org
Come potrei migliorare la resa ed evitare quelo strano effetto di restringimento?

Grazie
M.

[ashtur1]

1.prova al li a dargli invece che display:inline; float:left; e vedi se i margini del li ti funzionano correttamente...occhio al doppio margine in ie nelle versioni piu vecchie della 7.


se non funziona
2. prova a dare display:block; al tag a e conseguentemente dare il margine direttamente all' a

[samiel]

Nel primo caso il menu risulta tutto allineato a sinistra,
nel secondo diventa addirittura certicale. Sempre se
ho interpretato bene i tuoi suggerimenti...

M.