Come posso dare a ciascuno < li > la sua immagine proiettile?

Question

Ho provato

<ul id="contact_list">
    <li id="phone">Local 604-555-5555</li>
    <li id="i18l_phone">Toll-Free 1-800-555-5555</li>
</ul>

con

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    list-style-image: url(images/small_wood_phone.png);
}

#contact_list #i18l_phone
{
    list-style-image: url(images/i18l_wood_phone.png);
}

inutilmente. Viene visualizzato solo un disco. Se voglio che ogni singolo elemento dell'elenco abbia il proprio punto elenco, come posso farlo con css, senza usare immagini di sfondo .

Modifica: ho scoperto che, nonostante ciò che mi dice Firebug, la regola delle immagini in stile elenco è stata in qualche modo ignorata. Se inline la regola, in questo modo:

    <li id="phone" style="list-style-image: url(images/small_wood_phone.png);">Local 604-555-5555</li>

allora va tutto bene. Dal momento che non ho altre regole nel caso di test in esecuzione che contenga ul o li nel selettore, non sono sicuro del motivo per cui l'inline fornisce un risultato diverso.

Answer 1

Per prima cosa, determina se sei in " stranezze " modalità o no, perché per molte proprietà CSS fa la differenza.

In secondo luogo, il W3c specifica che l'URL dovrebbe essere tra virgolette doppie (anche se non uso nemmeno le virgolette). Vai con le specifiche per salvare te stesso guai lungo la linea.

Se stai specificando " rigoroso " nel tuo DOCTYPE, il browser potrebbe richiedere le doppie virgolette, secondo lo standard.

Answer 2

Prova questo:

#contact_list li
{
    list-style: none;
}

#contact_list li#phone
{
    list-style-image: url('images/small_wood_phone.png');
}

#contact_list li#i18l_phone
{
    list-style-image: url('images/i18l_wood_phone.png');
}

Answer 3

Non sono sicuro che questo sia il tuo problema, ma stai utilizzando collegamenti relativi alle tue immagini. Quando si utilizzano collegamenti relativi in ??CSS, è relativo al file CSS, ma se è in linea, sarà relativo alla pagina HTML.

Answer 4

Il fatto è che ho provato il tuo codice, funziona. L'unica volta che non lo è è se le immagini non sono presenti. Forse è necessario verificare che le immagini specificate nel CSS siano effettivamente nelle immagini della cartella o non siano state scritte in modo errato.

NOTA: IN firefox e ie.

Answer 5

Suggerirei di farlo in modo leggermente diverso, nel CSS - cioè:

#contact_list
{
  list-style: none;
}

#contact_list li {
  padding-left: 20px; /* assumes the icons are 16px */
}

#contact_list #phone
{
  background: url(images/small_wood_phone.png) no-repeat top left;
}

#contact_list #i18l_phone
{
  background: url(images/i18l_wood_phone.png) no-repeat top left;
}

Answer 6

Potresti ricontrollare che quelle immagini siano dove pensi che siano. Questo esempio funziona bene a meno che non manchino le immagini.

Answer 7

Non avrei mai pensato. Se cito l'URL, in questo modo:

#contact_list #phone
{
    list-style-image: url("/images/small_wood_phone.png");
}

inizia a funzionare. L'ho annullato e si ferma. Ho pensato che non avrebbe dovuto fare la differenza.

Grazie per il vostro aiuto, tutti.

Answer 8

Potresti provare ad aggiungere list-style-type: none; a # elenco contatti? Forse anche al posto del tuo stile di elenco: dichiarazione.

Answer 9

Mi fa male suggerirlo, ma hai provato la! bandiera importante? Inoltre, si comporta allo stesso modo in altri browser? E se questo è qualcosa che hai nel tuo file userChrome.css di Firefox?

Answer 10

Potresti provare ad aggiungere! important dopo la proprietà list-style-image, che ne impedirebbe l'override.

Answer 11

#contact_list
{
    list-style: disc none inside;
}

#contact_list #phone
{
    background-image: url(images/small_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}

#contact_list #i18l_phone
{
    background-image: url(images/i18l_wood_phone.png) no-repeat top left;
    padding-left: <image width>px;
}