Log in / Register

Forum › Bugs

Incorrect indenting of custom numbered list

jan_tosovsky
My goal is to wrap ordered list entries numbers into parentheses, i.e. (a), (b), ...
While the following code works, the final indentation differs from Chrome/FF rendering. It starts in the left margin.

<html>
<head>
   <style type="text/css">
      ol {list-style-type: none; margin-left: -1.4em}
      li:before {content: "(" counter(section, lower-alpha) ") "; position: absolute; left: -1.4em;}
      li {counter-increment: section; position: relative;}
   </style>
</head>
<body>
   <h1>Title</h1>
   <ol>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
   </ol>
</body>
</html>


PrinceXML 9.0 rev 5, Win7 64-bit
  1. indent.html‎ 0.4 kB
  2. indent.png‎ 3.9 kB
mikeday
Why not just use li::marker? Or use div for that matter, if you are not using the list-item counter. What is the negative margin and negative left position for?
jan_tosovsky
Thanks for the hint, but li::marker seems to be supported only partially if used according to http://www.w3.org/TR/css3-lists/#marker-pseudo-element
li::marker {
   content: "(" counter(counter) ")";
}

I am getting zero instead of the correct number.
My solution is based on this code http://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses
I just used negative values to shift numbers to the edge of the body area.
jan_tosovsky
Oops, I forgot to copy counter increment part. After some tweaking I finally get what expected using this code:
ol {margin-left: 1.8em}
li::marker {
   content: "(" counter(counter) ")";
}
li {
    display: list-item;
    counter-increment: counter;
}


But to be honest, my first example rendering differs from major browsers and it should be IMHO fixed anyway.
mikeday
List items automatically increment the "list-item" counter, so you could just use that. We will take a look at the indent issue.