Home/ Questions/Q 8144047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T13:16:04+00:00

I’ve prepared this demo: https://dl.dropbox.com/u/7224702/lists-bug.html It works fine in Firefox, Chrome and IE8 but

  • 0

I’ve prepared this demo:
https://dl.dropbox.com/u/7224702/lists-bug.html

It works fine in Firefox, Chrome and IE8 but is broken in Opera and IE9.

Oh and I don’t want to use list-style-position: inside; because if some <li> is longer then one line the second line is not correctly indented.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Little later then planned but here is my final solution.

    1. Use list-style-position: inside;.
    2. To repair the indenting of second and folowing lines, use negative text-indent (thanks Joey!)
    3. It is not easy to determine the right value for the negative text indent as every browser does things little differently. Knowing that we will need to use something where we can set the width of the marker manually. And that something is pseudo-element :before. (thanks skip405!)
    4. With the :before pseudo-element and right value of the content property we can now use list-style-type: none;
    5. Delete the list-style-position from 1. as it’s useless now.

    You can see working demo here:
    https://dl.dropbox.com/u/7224702/lists-counters.html

    The only drawback is with content: counter(list, disc); in Opera 12. The disc/circle/square values are not working as they sould, values like decimal are alright. I’ve already reported it as a bug so hopefully it’ll be fixed in next version.

    • 0