¿Cómo puedo dar a cada < li > su propia imagen de bala?

Question

He intentado

<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);
}

en vano. Solo aparece un disco. Si quiero que cada elemento de la lista individual tenga su propia viñeta, ¿cómo puedo lograr esto con css, sin usar imágenes de fondo .

Editar: he descubierto que, a pesar de lo que Firebug me dice, la regla de lista de estilo de imagen se anula de alguna manera. Si alineo la regla, así:

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

entonces todo está bien. Dado que no tengo otras reglas en el caso de prueba que estoy ejecutando que contengan ul o li en el selector, no estoy seguro de por qué la alineación da un resultado diferente.

Answer 1

Primero determine si está en "peculiaridades" modo o no, porque para muchas propiedades CSS hace la diferencia.

En segundo lugar, el W3c especifica que la URL debe estar entre comillas dobles (aunque tampoco uso las comillas). Ve con la especificación para ahorrarte problemas en el futuro.

Si está especificando " estricto " en su DOCTYPE, entonces el navegador puede requerir comillas dobles, según el estándar.

Answer 2

Prueba esto:

#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

No estoy seguro si este es tu problema, pero estás usando enlaces relativos a tus imágenes. Cuando utiliza enlaces relativos en css, es relativo al archivo css, pero si está en línea, será relativo a la página html.

Answer 4

La cosa es que probé su código, funciona. El único momento en que no lo hace es si las imágenes no están presentes. Tal vez necesite verificar que las imágenes que especifique en el CSS estén realmente en las imágenes de la carpeta o que no estén mal escritas.

NOTA: tanto en Firefox como en.

Answer 5

Sugeriría hacerlo de forma ligeramente diferente, en el CSS, es decir:

#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

Puede verificar que esas imágenes estén donde cree que están. Este ejemplo funciona bien a menos que falten las imágenes.

Answer 7

Nunca lo hubiera pensado. Si cito la url, así:

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

comienza a funcionar. Lo cito y se detiene. Pensé que eso no debería hacer la diferencia.

Gracias por su ayuda a todos.

Answer 8

¿Podría intentar agregar list-style-type: none; a # lista de contactos? Quizás incluso en lugar de su estilo de lista: declaración.

Answer 9

Me duele sugerirlo, pero ¿has probado la! bandera importante? Además, ¿se comporta igual en otros navegadores? ¿Qué sucede si esto es algo que tiene en su archivo Firefox userChrome.css?

Answer 10

Puede intentar agregar! important después de la propiedad list-style-image, lo que evitaría que se anule.

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;
}