"list-style-image" picture identation in Opera via CSS

Question

Opera has unacceptable rendering of image-bullet positioning of list items. Look at demo page with Opera and different browser.

Style:

   /* body {line-height:150%;} */
   ul {list-style: none outside url('img/bullet-lilac.gif');

HTML Sample:

<ul>
 <li><a href="">Ut enim ad minim veniam</a></li>
 <li>Sample item</li>
</ul>

Bullets in Opera are indented to top of the line. That's too bad. Is there any solutions of some kind of hacks?

Not interested in background-image tricks.

Screenshot. Opera on background, Chrome on foreground

Answer 1

I'm not familiar with the particular problem you describe, and I don't know whether there is some specific fix for it, but one workaround is using background-image / background-position which is easier to fine-tune:

li { 
     background-image:url(img/bullet-lilac.gif); 
     background-position: left center;
   }

(You'll need a certain amount of padding-left to make space for the bullet)