Buon giorno forum.

Sono uno sviluppatore web alle prime armi (professionalmente parlando) e sto cercando di imparare qualcosa di più sullo stile "pure-CSS" (senza usare tabelle per la formattazione della pagina) e di capire se effettivamente può essere una buona idea nei suoi vari aspetti (pro e contro)

Nel costruire un mio semplice sito personale, quindi, mi sono concesso il lusso di crearne anche una versione "CSS-only"

L'url del sito è in firma, mentre la versione "solo CSS" si trova all'indirizzo

http://www.larianaweb.com/css%20only...erimentale.asp

Il problema è la barra orizzontale di navigazione (quella blu con i pulsanti azzurri, per intenderci ), che non riesco ad ottenere in modo uniforme nei vari browsers.

Mentre in IE6 è accettabile, in Mozilla è inguardabile (con i pulsanti che si sovrapongono parzialmente...) e in NN viene resa bene o malissimo a seconda delle dimensioni settate per il testo (il che non dovrebbe essere).

Non ho ancora avuto il coraggio di guardare la pagina con altri browsers

La parte del CSS che riguarda la barra è:

codice:
#barra {
position: absolute;
top: 100px;
left: 0;
width: 100%;
height: 27px; 
background-image: url('../../images/navbg.gif');
}

#navcontainer
{
position: absolute;
top: 1px;
left: 161px;
height: 27px;
margin: 0 auto;
font-family: verdana, serif;
font-size: 0.8em;
text-transform: lowercase;
}

ul#navlist
{
font-size: 0.8em;
list-style: none;
padding: 0;
margin: 0 auto;
width: 83%;
}

ul#navlist li
{
display: block;
float: left;
width: 16%;
margin: 0;
padding: 0;
}

ul#navlist li a
{
text-align: center;
display: block;
width: 100%;
padding: 0.5em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: #ffffff;
text-decoration: none;
background: #4477dd;
}

ul#navlist li a:hover, ul#navlist li#active a:hover
{
text-align: center;
color: #ffffff;
background: transparent;
border: none;
margin: 1px;
}
... c'è poco da ridere, è la prima volta che ne faccio una!

Consigli?

Grazie a tutti in anticipo.

Marco