5

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.

drudge
  • 30,947
  • 7
  • 31
  • 41
Frank Vilea
  • 7,763
  • 20
  • 61
  • 85
  • 1
    Please post some `` so we may better assist. – pixelbobby May 25 '11 at 15:12
  • possible duplicate of http://stackoverflow.com/questions/1708833/adjust-list-style-image-position – Dave Kiss May 25 '11 at 15:17
  • There are no `list-style-*` properties that use `px`. http://reference.sitepoint.com/css/listproperties – drudge May 25 '11 at 15:17
  • It seems I confused it with the background: url. I really thought there was a similar property for list-style-image.. Now I understand why I couldn't find anything about it.. Thanks @ all – Frank Vilea May 25 '11 at 15:50

4 Answers4

11

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;
thirtydot
  • 210,355
  • 44
  • 377
  • 337
clairesuzy
  • 26,108
  • 7
  • 51
  • 51
4

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.

silex
  • 4,175
  • 4
  • 20
  • 27
0

Created a jsFiddle for you to work with. I adjusted the background image position so it would look more like a bullet.

pixelbobby
  • 4,160
  • 4
  • 26
  • 44
0

According to Mozilla's Developer Docs on list style, you cannot position the list marker using CSS. The closest is list-style-position, which only lets you position the marker as inside or outside the list elements.

If you want to position the image, you're going to have to edit the image itself, or use the image as a background instead.

thedaian
  • 1,338
  • 9
  • 11