List Type Image Query

Question

I have a green triangular image that I would like to use against particular list items but unsure how to do.

I created a class called .bullet and set list-type-image to my green triangular image.

Then set <ul class="bullet"><li>a</li></ul> but to no avail as I would've thought that "a" would come up as "> a"

Any ideas?

Thanks.

Answer 1

Another approach is to use a CSS background image:

ul.bullet { list-style-type: none; margin: 0; padding: 0; }
ul.bullet li { background: url(greentriangle.gif) top left no-repeat; padding-left: 10px; }

<ul class="bullet">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

If you wanted to only apply the green triangle to specific list items, you could have a normal triangle image in addition to your green triangle image:

ul.bullet { list-style-type: none; margin: 0; padding: 0; }
ul.bullet li { background: url(normaltriangle.gif) top left no-repeat; padding-left: 10px; }
ul.bullet li.green { background: url(greentriangle.gif) top left no-repeat; padding-left: 10px; }

<ul class="bullet">
    <li>One</li>
    <li class="green">Two</li>
    <li>Three</li>
</ul>

You'll probably also need to adjust the padding and the positioning of the images you used to make them look just right.

Hope that helps you, tonsils!

Answer 2

Can you post your CSS?

it should look like this:

list-style-image: url(greentriangle.gif)