css to align a tick image with text?

[Matt Seigneur]

Can i use css to align a "tick" image with text that goes next to it? Its to list benefits

I thought line-height would of done the trick but that just seperates each benefit more lol

Cheers
Matt

[affMonkey]

you can change list item marker to an image with css as the example here shows

[imode]

You could use css.

<ul>
<li class="benefits">Example</li>
</ul>

.benefits li {
    background:url('tick.png') no-repeat; 
    padding-left:20px; /* width of your tick plus the space /*
}

Hope that helps.

[Matt Seigneur]

strange in the site Tryit Editor v1.4
it works fine but if i do it on my site it doesnt work!?

[affMonkey]

wanna post ya site and i will have a look? or pm me

[jonsp]

Originally Posted by Matt Seigneur strange in the site Tryit Editor v1.4 it works fine but if i do it on my site it doesnt work!?

It would probably be best to remove the bullets from the ul, eg

<style type="text/css">
#yourList{
margin:0;
padding:0;
list-style: none;
}
#yourList li{
background-image: url(tick.gif);
background-repeat:no-repeat;
padding-left:30px;
}
</style>

<ul id="yourList">
<li>item one</li>
...etc

You could mess around with background-position: [horizontal] [vertical] to get the bullet positioned exactly right. Also use margin-bottom on the li to get the spacing right.

Cheers,
Jon

[Matt Seigneur]

Thanks for the replies guys.. affmonkey sorted it for me in the end