Take the 2-minute tour ×

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


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

HTML Sample:

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

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

List with different browsers

share|improve this question
I cannot reproduce the bug you're trying to resolve on Opera 10.61 on Linux. Can you post a screenshot or something? –  Yi Jiang Oct 11 '10 at 6:40
Updated question with screenshot. –  RayZ Oct 13 '10 at 14:08
confirmed the behavior in the last version of Opera (11.0) –  karlcow Jan 24 '11 at 13:59
add comment

3 Answers

up vote 3 down vote accepted
  1. add a line-height (in em) on the li (you will have to try different values to find the right one)
  2. now the bullets are centered but the lis overlap each other
  3. add padding:X 0; on the li where X is a value in em

In your case here's the emended css:

ul {list-style: none outside url('http://rayz.ru/misc/askdev/list-style-image/pic1.gif')}  
li {line-height:0.8em;padding:0.3em 0}

Which Opera version(s) are you targeting? (if it's OP11 use this hack)

share|improve this answer
sure, Opera 11. –  RayZ Jan 26 '11 at 22:46
Your suggestion looks cool for a non-multilined list elements. So, i need to add more containers in it to make it looks like in other browsers. –  RayZ Jan 26 '11 at 23:02
@RayZ jsfiddle.net/snfyG/3 –  Knu Jan 27 '11 at 14:10
add comment

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-position: left center;

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

share|improve this answer
I know about that solution. But i am interested in other one. With list-type-image –  RayZ Oct 10 '10 at 21:21
propably RayZ needs background image use for another purpose, but Knu gave a quick and good solution. I've checked it and it works like charm. –  David Dec 14 '11 at 7:35
add comment

Seconding Knu's suggestion. Using li{ line-height:.95em; padding-bottom:10px; } provided fairly consistent results in my tests, though you may wish to adjust those values a bit.

I also suggest replacing "none" with another list-style-type value to prevent a display issue in Opera 11. As long as the image is available on the server, the disc shouldn't appear.

share|improve this answer
add comment

Your Answer


