List item's margin and padding

[mboehler3]

I'm having trouble styling my list items with my own list item image. Here's the image that I want to use for the list item: . This image is very small, 20x22, and leaves just a couple pixels of white space to the right of the "X."Here is the code for my page:

<ul class="using-other"><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a felis fermentum ipsum imperdiet eleifend eu vel velit.</li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a felis fermentum.</li></ul>

And CSS:

ul.using-other {list-style-image:url('compare-check.gif'); margin:0 0 0 35px;padding:0}ul.using-other li {padding:0;margin:0}

Now the problem is how this renders in a browser. It displays like this:ImageI want the "X" mark aligned with the text better. It seems like the text is not aligned to the top, which is what I want - to push up the text while keeping the image at the same position. How can I accomplish that?

[ShadowMage]

I wonder if setting the line-height of your li to the same as the height of your image would work...

[ste]

I usually achieve this without list-style-image instaed I just use a background on the LI's and offset the image with background-position, to prevent the text from overlapping I add some padding.This worked for me on a previous project. http://www.centsense.ie/parents (You can see the ul at the bottom of this page)

ul.ticked {list-style-type: none; margin: 30px 30px 30px 10px;}ul.ticked li {padding: 0 0 6px 20px; background: transparent url("../images/tick.gif") no-repeat; background-position:0 3px;}