Como posso dar a cada um a sua própria imagem Bala ?

Question

Eu tentei

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

com

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

sem sucesso. Apenas um disco aparece. Se eu quiser cada item da lista indivíduo a ter a sua própria bala, como eu posso fazer isso com css, sem o uso de imagens de fundo .

Edit: Eu descobri que, apesar do que o Firebug diz-me, a regra list-style-image está sendo substituído de alguma forma. Se eu inline regra, assim:

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

então tudo está bem. Como não tenho outras regras no caso de teste eu estou correndo que contém ul ou li no seletor, eu não sei por que inlining dá um resultado diferente.

Answer 1

Em primeiro lugar determinar se você está em "peculiaridades" mode ou não, porque para muitas propriedades CSS ele faz a diferença.

Em segundo lugar, o W3C especifica que a URL deve ser entre aspas duplas (embora eu não utilizar as aspas, qualquer um). Vá com a especificação para salvar-se problemas para baixo da linha.

Se você estiver especificando "rigorosa" em sua DOCTYPE, o navegador pode exigir as aspas duplas, por padrão.

Answer 2

Tente isto:

#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

Eu não tenho certeza se este é o seu problema, mas você estiver usando links relativos às suas imagens. Quando você usa os links relativos em css, é relativo ao arquivo css, mas se for embutido, será em relação à página html.

Answer 4

A coisa é, eu tentei o código que funciona. A única vez que não faz é se as imagens não estão presentes. Talvez você precisa verificar para ver que as imagens especificadas no CSS são realmente nas imagens da pasta ou não incorreto.

NOTA:. No Firefox e IE

Answer 5

Eu sugiro fazê-lo de forma ligeiramente diferente, no CSS - ou seja:.

#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

Você pode verificar que essas imagens são onde você pensa que são. Este exemplo funciona bem menos que as imagens estão faltando.

Answer 7

Eu nunca teria pensado. Se eu citar a url, assim:

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

ele começa a trabalhar. I unquote-lo, e ele pára. Eu pensei que não deveria fazer a diferença.

Obrigado por sua ajuda, todos.

Answer 8

Você poderia tentar adicionando-type list-style: none; ao contato-list #? Talvez até mesmo em vez de seu list-style:. Declaração

Answer 9

Dói-me a sugerir isso, mas você já tentou o! Flag importante? Além disso, ele se comporta o mesmo em outros navegadores? E se isso é algo que você tem em seu arquivo Firefox userChrome.css?

Answer 10

Você poderia tentar adicionar! Importante depois que a propriedade list-style-image, que iria impedir que ele seja substituído.

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