Home/ Questions/Q 58937
In Process

The Archive Base Latest Articles

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

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.

Share