List item's margin and padding

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, 20×22, and leaves just a couple pixels of white space to the right of the “X.”

Here is the code for my page:

<!--c1-->

CODE

<!--ec1--><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><!--c2-->

<!--ec2-->

And CSS:

<!--c1-->

CODE

<!--ec1-->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}<!--c2-->

<!--ec2-->

Now the problem is how this renders in a browser. It displays like this:
Image

I 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?

http://bit.ly/oCN01m