CODEWITHSUNDEEP
cssstyling
Dustman
Dustman

Reputation: 5261

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

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.

Upvotes: 19

Views: 26306

Answers (11)

Anne Porosoff
Anne Porosoff

Reputation: 1941

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

Upvotes: 9

Dustman
Dustman

Reputation: 5261

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. I thought that's not supposed to make a difference.

Thanks for your help, everyone.

Upvotes: 2

flamingLogos
flamingLogos

Reputation: 6009

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.

Upvotes: 3

James Anderson
James Anderson

Reputation: 163

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

Upvotes: 0

Eric Wendelin
Eric Wendelin

Reputation: 44349

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?

Upvotes: 1

Russell Leggett
Russell Leggett

Reputation: 8883

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.

Upvotes: 7

hugoware
hugoware

Reputation: 36397

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

Upvotes: 2

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103135

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.

Upvotes: 3

Marius
Marius

Reputation: 58931

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

Upvotes: -1

Remy Sharp
Remy Sharp

Reputation: 4560

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

Upvotes: 2

Eric Wendelin
Eric Wendelin

Reputation: 44349

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

Upvotes: 1

Related Questions