How can I give each <li> its own bullet image?

Question

I have tried

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

with

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

to no avail. Only a disc appears. If I want each individual list item to have it's own bullet, how can I accomplish this with css, without using background images.

Edit : I have discovered that, despite what firebug tells me, the list-style-image rule is being overridden somehow. If I inline the rule, like so:

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

then all is well. Since I have no other rules in the test case I'm running that contains ul or li in the selector, I'm not sure why inlining gives a different result.

Answer 1

Try this:

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