Update: this problem has found a very satisfactory solution, but in production side effects popped up which I describe in this thread.
So, I'm using a custom counter in my OLs to get numbering like "1 - 1.1 - 1.1.1"
Works fine.
But when I do this, the indentation of the LI is wrong. The text aligns with the left edge of the number, not with the right edge (like standard OLs do).
Edit: To get the numbers layouted the way I want, I had to mess with the standard paddings/margins of the OL.
Now the text aligns with the left edge of the number, not with the right edge (like standard OLs do).
I've tried numerous things, but somehow I can't seem to control the left edge of the LI content.
Also, this feature apparently isn't used terribly often, so web searches didn't yield any hints :-(
Does anybody have an idea what I've been missing?
Below, you find both the CSS and the HTML, and I have put a test case into this cssdesk: http://cssdesk.com/EzPBG
CSS:
ol.wrong {
margin-left: 0;
padding-left: 20px;
counter-reset: counter_level1;
list-style: none outside none;
display: block;
line-height: 18px;
width: 500px;
}
ol.wrong li {
position: relative;
list-style: none;
margin-right:20px;
}
ol.wrong li:before {
display: inline-block;
position: relative;
content: counter(counter_level1) ". ";
counter-increment: counter_level1;
font-weight: bold;
width: 20px;
}
ol.wrong ol {
counter-reset: counter_level2;
}
ol.wrong ol li {
margin-right:0px;
}
ol.wrong ol li:before {
width: 40px;
margin-left: 20px;
content: counter(counter_level1, decimal) "." counter(counter_level2, decimal) ". ";
counter-increment: counter_level2;
}
HTML
<ol class="wrong">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>
</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>