spazio di un li tramite css

[Simpz]

Salve a tutti,
io ho un menu così fatto

<div id="menu">
 <ul>
    <li class="menualto">nbsp;
    <li class="menualto">nbsp;
    <li class="menualto">nbsp;
    <li class="menualto">nbsp;
    <li class="menualto">nbsp;[/list]
</div>

e vorrei che ogni[*] avesse una lunghezza prefissta grande quanto l'immagine di sfondo che gli voglio mettere quindi mi sono andato a spulciare un pò di siti e ho trovato un frammento di css fatto in questa maniera

#menu li
{
    display: inline;
    width: 500px;
    height: 100px;
}
.menualto a
{
    background: url(../img/bottone_bianco.png) no-repeat;
    width: 100px;
    height: 38px;
}
.menualto a:hover
{
    background: url(../img/bottone_hover.png) no-repeat;
}

Ma la spaziatura di 100px e di 38px come detto dal css non la prende... cosa ho sbagliato? Qualcuno mi sa dare qualche dritta? (non funge ne su firefox ne su ie6)

Grazie a tutti

Simpz

P.S. ho omesso i & in nbsp

[Mich_]

Non puoi fissare le dimensioni di un oggetto inline.
Devi lasciare che il[*] rimanga di tipo block.
E forse devi definire anche il tag <a> di tipo blocco.

Se avevi inserito l'inline per affiancare i blocchi, avevi sbagliato approccio: affiancare dei blocchi si realizza mediante il float.

[Simpz]

l'inline l'ho messo per far li che il menu di navigazione sia orizzontale invece che veritcale... c'è un altro metodo invece che definire l'inline per avere un menù orizzontale?

[fcaldera]

#menu li
{
    float: left;
    display: inline;
    width: 500px;
    height: 100px;
}
.menualto a
{
    background: url(../img/bottone_bianco.png) no-repeat;
    display: block;
    text-indent: -9999em;
    width: 100px;
    height: 38px;
}
.menualto a:hover
{
    background: url(../img/bottone_hover.png) no-repeat;
}

E invece di mettere gli spazi, metti un testo accessibile a ciascun link (che non sarà visibile settando un text-indent negativo)



ps. settare la classe 'menualto' per tutti i list-item è inutile... puoi rimuoverli e cambiare le regole css in accordo.