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.
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.