0

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

List with different browsers

animuson
  • 53,861
  • 28
  • 137
  • 147
Andrew Rumm
  • 1,268
  • 4
  • 16
  • 39

3 Answers3

3
  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)

Community
  • 1
  • 1
Knu
  • 14,806
  • 5
  • 56
  • 89
  • 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. – Andrew Rumm Jan 26 '11 at 23:02
0

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)

Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • I know about that solution. But i am interested in other one. With `list-type-image` – Andrew Rumm 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 07:35
0

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.

webinista
  • 3,750
  • 1
  • 20
  • 21