How to have nested number lists in Confluence

David Csikkel_3oukhx

Hello, 

I have found recommended solution:

1. Go to the space that you would like this numbering be implemented on
2. Go to Space Tools > Look and Feel > Stylesheet
3. Edit > copy and paste the following code > Save

ol {
    counter-reset: item;
}
ol li {
    display: block;
    position: relative;
}
ol li:before {
    content: counters(item, ".")".";
    counter-increment: item;
    position: absolute;
    margin-right: 100%;
    right: 10px; /* space between number and text */
}

It works but... very big BUT... it breaks confluence pages on many places:

1) broken breadcrumbs navigation

2) broken comments

 

Can you propose any solution for default behavior (not based on writing special macro for nested number list)?

 

Thanx a lot in advance for any suggestions

David csikkel

 

 

 

 

 

Bill Bailey

I think the issue is that you CSS rules apply to all nested lists, which can impact a lot of menu items. You need to restrict your CSS to apply only to your content, which inside a container with class .wiki-content.

So for example, your rules should be:

<span>.wiki-content ol</span> {
    <span>counter-reset</span>: item;
}
<span>.wiki-content ol</span> <span>li</span> {
    <span>display</span>: block;
    <span>position</span>: relative;
}
<span>.wiki-content ol</span> <span>li</span><span>:before</span> {
    <span>content</span>: <span>counters</span>(item, <span>"."</span>)<span>"."</span>;
    <span>counter-increment</span>: item;
    <span>position</span>: absolute;
    <span>margin-right</span>: <span>100%</span>;
    <span>right</span>: <span>10px</span>; <span>/* space between number and text */</span>
}

You may have to play with the selectors a bit (like <span>.wiki-content ol ></span> <span>li</span>), maybe make the rule for li without the ol, for example:

<span>.wiki-content </span><span>li</span> {
    <span>display</span>: block;
    <span>position</span>: relative;
}

The point is to make the CSS more focused.