Menu con voci a spazio fisso

[marviv]

Ciao a tutti.
Premetto che non sono un esperto di css; di solito i problemi li risolvo a "martellate" cioè continuando a tentare nuove soluzioni finchè trovo quella che funziona.
Stavolta non ci sono riuscito.
Il codice del menu è il seguente:

<DIV id="outer">
<UL id="point">
  <LI><A title="Home" href="/default.asp"><B>Home</B></A></LI>
  <LI><A title="<%=NomeArea%>" href="/spoleto.asp"><B><%=NomeArea%></B></A></LI>
  <LI><A title="<%=NomeRegione%>" href="/umbria.asp"><B><%=NomeRegione%></B></A></LI>
    <LI><A title="Da visitare: Punti di Interesse ed Eventi" href="/attrazioni.asp"><B>Attrazioni</B></A></LI>
  <LI><A title="Strutture Turistiche: Ricettivit&agrave; e Ristorazione" href="/strutture_turistiche.asp"><B>Strutture</B></A></LI>
  <LI><A title="Trasporti-Shop" href="/trasporti_shop.asp"><B>Trasporti-Shop</B></A></LI>
  <LI><A title="Versione Mobile/App" href="/mobile.asp"><B>Mobile</B></A></LI>
  <LI><A title="Informazioni" href="/informazioni.asp"><B>Info</B></A></LI>
</UL>
</DIV>

Il CSS è il seguente:

#outer {padding:2px 0; border:0px solid #a50; border-color:#18AC99; background:#106156; margin:0px 0 0px 0;}
#point {display:table; padding:0; margin:0 auto; list-style:none; white-space:nowrap;}
#point li {display:table-cell; margin:0; padding:0;}
#point li a {float:left; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:0.8em; height:3.1em; line-height:3.1em; letter-spacing:1px; padding:0 1em; text-decoration:none; color:#fff; background:#106156; border-right:0px solid #1BBCA7; border-left:0px solid #1BBCA7;}
#point li a:hover, #point li a.current {background:#1BBCA7; color:#fff;}
#point li a:hover b, #point li a.current b {display:block; float:left; background:transparent url(/images/logo/arrow_up.gif) no-repeat center bottom; cursor:pointer} 

Il menu visualizza con ampiezza variabile, in funzione della lunghezza del testo, la voce al passaggio del mouse.
Come si fa ad ottenere invece spazi fissi (ad es. 150px) per ogni voce ?

Grazie 1000
Marco

[Fandango Visual]

Se ho capito bene vuoi che ogni voce del menu abbia la stessa larghezza giusto? Premetto che io di solito preferisco usare le percentuali rispetto alla dimensione fissa in pixel, quindi puoi fare così (ti scrivo cosa aggiungere):

#point {width: 100%;}
#point li{width: 12.5%;}
#point li a{width: 80%; padding: 0 10%;}

Ho messo 12.5% perché ho banalmente diviso lo spazio intero del menu in 8 (essendo 8 le voci del menu), il padding l'ho cambiato e gli ho messo la percentuale perché lasciandolo in em con le altre misure in percentuale l'ultima voce sarebbe uscita a destra.
Fammi sapere se era questo che volevi

[marviv]

Ciao Fandango e grazie per la risposta.
Non funzica. la larghezza è corretta in quanto adesso è fissa, ma quando ci passi sopra con il mouse , l'hover è spostata verso destra. Spero di essermi spiegato: l'area del pulsante visualizzato è spostato a destra e invece dovrebbe essere centrato sul testo del pulsante.

[Fandango Visual]

Ok allora aggiungi questo codice

#point li a, #point li a:hover {text-align: center;}

Inoltre toglierei il float: left; da #point li a:hover b, #point li a.current b altrimenti fa casini sull :hover

[marviv]

Perfetto Fandango, funziona perfettamente.

Grazie 1000

[Fandango Visual]

Figurati, buon lavoro!