immagini negli ul, li

[cbiacca]

ciao,
mi ritrovo davanti ad un problema di cui non capisco l'origine (a parte il fatto che ie e firefox interpretano i css in modo diverso).

ho questo codice html:

<td>
<ul id="mainlevel">
<li class="mainlevel"><a>A</a>
<li class="mainlevel"><span>B</span>
<li class="mainlevel"><a>C</a>[/list]
</td>

ora quello che vorrei è che, mentre A e C visualizzassero un'immagine di fianco (un pallino rosso), B non deve visualizzare nulla - fungendo da una specie di separatore tra le due voci.

Per farlo, nel css ho inserito:
ul, li {
list-style-image: url(immagine.jpg);
list-style-type: none;
}
span.mainlevel { list-style-image: none; }

con IE7 funziona tutto correttamente. Tuttavia, Firefox2.0 mi continua a mostrare l'immagine. Dove sbaglio?

[thomas_anderson]

ciao!
il selettore di classe da te usato si riferisce all'elemento span a cui, come di norma, non si applica la proprietà 'list-style-image'. Questa proprietà va applicata all'elemento li con classe corrispondente. se vuoi eliminare l'immagine sempre dal secondo elemento di una lista, puoi scrivere:

ul#mainlevel>li+li {list-style-image: none;}

Nei CSS3 sarà possibile scrivere:

ul#mainlevel>li:nth-child(2) {list-style-image: none;}

per una compatibilità con IE6 ti consiglio di usare una classe diversa per li.