Allineamento verticale: liste, line-height e...

[The Captain]

Ho un problema con l'allineamento tramite line-height (tipico, credo)...
ho un menù orizzontale fatto via lista non ordinata (ul):

html

    <div id="menu_destra">
        <ul>
            <li class="first"><span>Benvenuto, [b]...[/b]</span>
            [*][url="javascript:void(0)"]<span>Link 1</span>[/url]
            [*][url="javascript:void(0)"]<span>Link 2</span>[/url]
            [*][url="javascript:void(0)"]<span>Link 3</span>[/url]
            [*][url="javascript:void(0)"]<span>Link 4</span>[/url]
        [/list]
    </div> 

css (ho eliminato le parti non strettamente necessarie)

#menu_destra li {
	display: block;
	list-style: outside none;
	width: 100%;
	margin: 0;
	padding: 2px 0;
	height: auto !important;
	height: 24px; /* <- Per IE6 */
	min-height: 24px
	[...]
}
#menu_destra li a,
#menu_destra li.first {
	line-height: 24px
}

Per centrare il testo verticalmente uso line-height.

esempio:


Il problema è che, ovviamente, quando il testo va a capo, c'è uno spazio maggiore tra una riga e l'altra, per via, appunto, del line-height:


Che, sinceramente, non è il massimo.
Avete qualche idea che non sia l'utilizzare display: table-cell?

[Mich_]

Il line-height e` un trucco che funziona solo se il testo e` su una unica riga.
In alternativa si dovrebbe usare il display:table-cell (e/o altri attributi per le tabelle), che pero` non e` supportato da IE6.

Ci sono altre possibilita`, che dipendono dal contesto e dal contenuto.
Una e` l'uso dei posizionamenti e dei margini negativi, cosa che pero` non e` cosi` semplice e non sempre applicabile (e` necessario conoscere o le dimensioni del contenitore o del contenuto); ma il problema piu` grosso e` l'interazione di un blocco posizionato con gli altri blocchi.

[The Captain]

Originariamente inviato da Mich_
Il line-height e` un trucco che funziona solo se il testo e` su una unica riga.
In alternativa si dovrebbe usare il display:table-cell (e/o altri attributi per le tabelle), che pero` non e` supportato da IE6.

Ci sono altre possibilita`, che dipendono dal contesto e dal contenuto.
Una e` l'uso dei posizionamenti e dei margini negativi, cosa che pero` non e` cosi` semplice e non sempre applicabile (e` necessario conoscere o le dimensioni del contenitore o del contenuto); ma il problema piu` grosso e` l'interazione di un blocco posizionato con gli altri blocchi.

Lo so che il line-height è un trucco, in realtà non dovrebbe neanche modificare la posizione verticale degli elementi ma solo del testo, è un pò come il text-align: center per centrare gli elementi in IE5 and below.

Il posizionamento assoluto e i margini negativi sono inutilizzabile nel mio caso, dato che il blocco si espande se il testo è su più righe quindi è praticamente impossibile sapere l'altezza del blocco.

Dovrei trasformare la lista in una tabella ma è semanticamente sbagliato e non mi esalta molto, come idea.

[Mich_]

Vediamo se a qualcun altro viene in mente un'idea migliore.

Altrimenti un posto dove cercare e` tra i layout o i menu pronti, che in parte trovi citati tra i "link utili"

[ResianTaxidrive]

io per la stessa cosa ho dovuto fare due stili alternativi, uno per ie e uno per firefox; avevo trovato un accrocchio che funzionava con explorer ma per ff no e ho dovuto usare il display cell.