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

Could you try adding list-style-type: none; to #contact-list? Perhaps even instead of your list-style: declaration.

Answer 2

I would suggest doing it slightly differently, in the CSS - i.e.:

#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 3

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

Answer 4

#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 5

The thing is, I tried your code it it works. The only time it doesn't is if the images are not present. Maybe you need to check to see that the images you specify in the CSS are actually in the folder images or not misspelled.

NOTE: IN both firefox and ie.

Answer 6

You might double check that those images are where you think they are. This example works fine unless the images are missing.

Answer 7

I'm not sure if this is your problem, but you're using relative links to your images. When you use relative links in css, it is relative to the css file, but if it is inlined, it will be relative to the html page.

Answer 8

It pains me to suggest it, but have you tried the !important flag? Also, does it behave the same in other browsers? What if this is something you have in your Firefox userChrome.css file?

Answer 9

You could try adding !important after the list-style-image property, which would prevent it from being overridden.

Answer 10

I never would have thought. If I quote the url, like so:

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

it starts working. I unquote it, and it stops. WTF? That's not supposed to make a difference.

Thanks for your help, everyone.

Answer 11

First determine whether you are in "quirks" mode or not, because for many CSS properties it makes a difference.

Secondly, the W3c specifies that the URL should be in double quotes (although I don't use the quotes, either). Go with the spec to save yourself trouble down the line.

If you are specifying "strict" in your DOCTYPE, then the browser may require the double quotes, per the standard.