CSS list with images as bulletpoints

[chuckee]

Hi,
I have a list which uses an image (a tick) as the bullet point, however I was wondering if it is possible for me to move the text of each bullet point down a few pixels in relation to each image.

In other words, at the moment the text for each bullet point appears too high in relation to each of the actual bullet point images.

Here is the code:

<ul id="list_benefits" >
<li>The is the first line</li>
<li>This is the second line</li>
<li>Yet another line</li>
</ul>

and the CSS is this:

#list_benefits li {
color:black;
padding: 0;
list-style-type: none;
background-image: url(/images/tick.gif);
background-repeat: no-repeat;
padding-left: 3.4em;
margin-bottom: 15px;
background-position: 2em;
}

I thought that using margin-top would help, but this moves both the bullet point and the text the same distance. I just want to shunt the text down a bit, and not the image.

Thanks!

[Marshall]

Change this:
#list_benefits li {
color:black;
padding: 0;
list-style-type: none;
background-image: url(/images/tick.gif);
background-repeat: no-repeat;
padding-left: 3.4em;
margin-bottom: 15px;
background-position: 2em;
}

To this:

ul {
list-style-image: url(/images/tick.gif);
}
li {
color:black;
padding: 0;
padding-left: 3.4em;
margin-bottom: 15px;
background-position: 2em;
}

Adjust your margins and padding as needed.

Marshall

[chuckee]

Marshall, thanks very much for that. It is awesome that people like you help people like me :) We really appreciate all the support!

[Marshall]

You're welcome. But also thank WebmasterWorld. Where do you think I learned most of what I know. Just giving back.

:)

Marshall