How to vertical space blank under <li> bullet background?

Question

This is css

li { background: transparent url(bullet-arrow.png) no-repeat left 4px; 
     padding-left: 10px; 
     list-style-image: none; 
     list-style-position: outside; 
     list-style-type: none; }

this is current output

I need in this format

Answer 1

just an idea... could you please try to set display:block (or, maybe, display:inline-block) for your li?

Answer 2

This should work.

li
{
  list-style-image:url('bullet-arrow.gif');
  list-style-position: outside;
}

(I submitted to early and then had to edit. Sorry!)