Lista sovrapposta in Firefox

[Fayble]

In un div da 130px, per un menu utilizzo:

#nav ul {
	clear: both;
	margin: 0px;
	padding: 0px;
}

#nav li {
	list-style: none;
	background: url(../img/gif.gif) no-repeat;
	background-position: left 0.1em;
	font-size: 0.9em;
	font-weight: bold;
	padding-left: 3px;
	line-height: 1.3em;
	height: 1.3em;
}

Lato HTML:

<div id="nav">
    <ul>[*]A[*]B[*]C[*]D[/list]
</div>

Quando ingrandisco il carattere con IE (CTRL + scroll) tutto OK, con FF invece, appena la lunghezza del testo supera quella del contenitore, le voci di lista si sovrappongono. Come mai?!?

[whiteduke]

Prova ad inserire display: inline negli attributi del tag[*].
Ciao

[Fayble]

Purtroppo non va, perché non vanno a capo le voci di lista.

[pierofix]

Credo sia dovuto al fatto che usi dimensioni in px. Molto meglio em o %. Eventualmente, per ovviare, invece di dare una dimensione all'height prova a dare un padding top e bottom.

[Fayble]

Ho risolto eliminando la proprietà height e lasciando solo line-height.

Grazie.