Как я могу дать каждому <li>свое собственное изображение маркера?

Question

Я пытался

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

с

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

безрезультатно. Появляется только диск. Если я хочу, чтобы у каждого отдельного элемента списка был свой маркер, как я могу сделать это с помощью css, без использования фоновых изображений .

Edit: я обнаружил, что, несмотря на то, что Firebug говорит мне, правило изображения стиля списка каким-то образом переопределяется. Если я приведу правило, вот так:

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

тогда все хорошо. Поскольку у меня нет других правил в выполняемом тестовом примере, который содержит ul или li в селекторе, я не уверен, почему встраивание дает другой результат.

Answer 1

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