CSS: Positioning of list-style-image

Question

I have a list with list-style-image:url("../images/prices/tick.png");

How can I position the image correctly so that the image and the text are on the same y coordinate? Wasn't there a way to define it right after the url with url("link") 20px 30px?

I can't seem to find the info online on how it was done again.

Solution 1

I think you're thinking about using a background-image rather than the list-style-image..

so set the list-style to none and put a background-image on the li - then yes you'll be able to position it a bit more accurately using the background-position part of this:

background: url("link") no-repeat 20px 30px;

Solution 2

You can try something like this:

ul {
    list-style:none;
}
li {
    background:url(image.gif) no-repeat 0 0;
    padding-left:16px;
}

So background position and padding value could be configured.

Comments

[breezy]

Beat me to the punch! I was writing this exact method.