Heading auto-numbering with CSS works for all but top-level

Question

I have been trying to implement heading auto-numbering in my Mindtouch wiki using a standard CSS counter mechanism. The CSS is being applied to the website with Stylish extension in Chrome.

Weirdly, the top-level headings (h2 in my case; h1 is reserved for the page title) are not working correctly, but everything else is. Here's the output I get on a test page:

1 Heading 2
1 Heading 2
0.1 Heading 3
0.2 Heading 3
0.2.1 Heading 4
0.2.2 Heading 4
0.3 Heading 3
1 Heading 2

I'm not sure what could cause this to happen, or even how to track it down. If anyone has a few pointers I would greatly appreciate it.

On jsfiddle the same CSS and same HTML get the desired result. (1, 2, 2.1, 2.2, 2.2.1, 2.2.2, 2.3, 3)

Here is the CSS I'm using (pasted straight from Stylish):

<style>
   div#pageText {
     counter-reset: h2counter;
   }   
   h2:before{
     counter-increment: h2counter;
     content: counter(h2counter) " ";
   }
   h2 { counter-reset: h3counter; }
   h3:before{
     counter-increment: h3counter;
     content: counter(h2counter) "." counter(h3counter) " ";
   }
   h3 { counter-reset: h4counter; }
   h4:before{
     counter-increment: h4counter;
     content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) " ";
   }
   h4 { counter-reset: h5counter; }
   h5:before{
     counter-increment: h5counter;
     content: counter(h2counter) "." counter(h3counter) "." counter(h4counter) "." counter(h5counter) " ";
   }
   </style>

And finally, here is the HTML straight from a sample wiki page, just in case the extraneous junk makes a difference (it doesn't seem to make any difference on jsfiddle).

<div class="pageText" id="pageText">
    <div id="section_1">
        <span id="Heading_2"></span>
        <h2 class="editable">
            <span>Heading 2</span>
            <div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
            </div>
        </h2>
    </div>

    <div id="section_2">
        <span id="Heading_2_2"></span>
        <h2 class="editable">
            <span>Heading 2</span>
            <div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
            </div>
        </h2>

        <div id="section_3">
            <span id="Heading_3"></span>
            <h3 class="editable">
                <span>Heading 3</span>
                <div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
                </div>
            </h3>
        </div>

        <div id="section_4"><span id="Heading_3_2"></span>
            <h3 class="editable">
                <span>Heading 3</span>
                <div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
                </div>
            </h3>

            <div id="section_5">
                <span id="Heading_4"></span>
                <h4 class="editable">
                    <span>Heading 4</span>
                    <div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
                    </div>
                </h4>
            </div>

            <div id="section_6" class="">
                <span id="Heading_4_2"></span>
                <h4 class="editable">
                    <span>Heading 4</span>
                    <div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
                    </div>
                </h4>
            </div>
        </div>

        <div id="section_7">
            <span id="Heading_3_3"></span>
            <h3 class="editable">
                <span>Heading 3</span>
                <div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
                </div>
            </h3>
        </div>
    </div>

    <div id="section_8">
        <span id="Heading_2_3"></span>
        <h2 class="editable">
            <span>Heading 2</span>
            <div class="editIcon"><a href="#" onclick="return Deki.LoadEditor(this);" onmouseover="showEditArea(this);" onmouseout="hideEditArea(this);" title="Edit section" style="visibility: hidden; "><span class="icon"><img src="/skins/common/icons/icon-trans.gif" class="sectionedit" alt="Edit section"></span></a>
            </div>
        </h2>
    </div>
</div>

Not that I'm aware of. Certainly nothing I've added, and there's no right-left languages in use on the wiki. — neilw, Oct 18 '12 at 20:57
Link to the actual target page. Perhaps CSS precedence is overriding your changes. Use the `!important` flag as in http://jsfiddle.net/fUafp/. — Brock Adams, Oct 18 '12 at 20:59
`! important` is bad coding practice. You should just adjust your selectors to be more specific. — Roddy of the Frozen Peas, Oct 18 '12 at 21:05
@RoddyoftheFrozenPeas That's not true even for ordinary pages, though I agree its legit uses are rare. But for ***Stylish***, `!important` is not only excellent practice, it is frequently required. — Brock Adams, Oct 18 '12 at 21:09
Here is a test page that demonstrates: [link](http://developer.mindtouch.com/User:Neilw/Testing/Auto_heading_numbering_test) — neilw, Oct 18 '12 at 21:10
Also, in this case !important does not seem to make a difference. — neilw, Oct 18 '12 at 21:12
Actually, I just pasted the style from my fiddle into a Stylish script for that test page, and it worked perfectly in FF stylish. Alas, I must bugout for a few hours, will then investigate Chrome stylish. — Brock Adams, Oct 18 '12 at 21:15
It worked for me as well when I copy-pasted the style from your post. Odd. — Roddy of the Frozen Peas, Oct 18 '12 at 21:18

score 1 · Answer 1 · answered Oct 18 '12 at 21:49

Oof, I am embarrassed. It appears that the problem was the enclosing <style> tag I put in my CSS. Obviously Stylish is providing that itself.

I cannot say I completely understand the behavior that was demonstrated when the <style> tag was there (which can be recreated in jsfiddle as well). I guess it's just the HTML parser gagging on the first CSS rule element and then recovering for the rest.

In any case, it is now working.

Heading auto-numbering with CSS works for all but top-level

1 Answers1