Programmiererforum

body {
font-family: "Helvetica Neue", Helvetica, Arial;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
counter-reset: section-h1 section-h2 section-h3 section-h4;
}
h1 {
counter-increment: section-h1;
counter-reset: section-h2;
}
h1::before {
content: counter(section-h1) ". ";
}
h2 {
counter-increment: section-h2;
counter-reset: section-h3;
}
h2::before {
content: counter(section-h1) "." counter(section-h2) ". ";
}
h3{
counter-increment: section-h3;
counter-reset: section-h4;
}
h3::before {
content: counter(section-h1) "." counter(section-h2) "." counter(section-h3) ". ";
}
h4 {
counter-increment: section-h4;
}
h4::before {
content: counter(section-h1) "." counter(section-h2) "." counter(section-h3) "." counter(section-h4) ". ";
}




first level 1
second level 1
third level 1
third level 2



second level 2
third level 1
third level 2



third level 3
third level 4
third level 5



third level 6
second level 3
third level 1



third level 2
second level 4
third level 1

1. first level 1
1.1. second level 1
1.1.1. third level 1
1.1.2. third level 2
---------------------
1.2. second level 2
1.2.1. third level 1
1.2.2. third level 2
---------------------
1.2.3. third level 3
1.2.4. third level 4
1.2.5. third level 5
---------------------
1.2.6. third level 6
1.3. second level 3
1.3.1. third level 1
---------------------
1.3.2. third level 2
1.4. second level 4
1.4.1. third level 1

Ich möchte, dass Überschriften in meinem HTML automatisch nummeriert werden. Ich bin allerdings auch gezwungen, zu verwenden. Dazu habe ich zum Testen einen HTML-Code erstellt:
[code]




body {
font-family: "Helvetica Neue", Helvetica, Arial;
font-size: 14px;
line-height: 20px;
font-weight: 400;
color: #3b3b3b;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
counter-reset: section-h1 section-h2 section-h3 section-h4;
}
h1 {
counter-increment: section-h1;
counter-reset: section-h2;
}
h1::before {
content: counter(section-h1) ". ";
}
h2 {
counter-increment: section-h2;
counter-reset: section-h3;
}
h2::before {
content: counter(section-h1) "." counter(section-h2) ". ";
}
h3{
counter-increment: section-h3;
counter-reset: section-h4;
}
h3::before {
content: counter(section-h1) "." counter(section-h2) "." counter(section-h3) ". ";
}
h4 {
counter-increment: section-h4;
}
h4::before {
content: counter(section-h1) "." counter(section-h2) "." counter(section-h3) "." counter(section-h4) ". ";
}




first level 1
second level 1
third level 1
third level 2



second level 2
third level 1
third level 2



third level 3
third level 4
third level 5



third level 6
second level 3
third level 1



third level 2
second level 4
third level 1


[/code]
Ich möchte so etwas erhalten wie:
[code]1. first level 1
1.1. second level 1
1.1.1. third level 1
1.1.2. third level 2
---------------------
1.2. second level 2
1.2.1. third level 1
1.2.2. third level 2
---------------------
1.2.3. third level 3
1.2.4. third level 4
1.2.5. third level 5
---------------------
1.2.6. third level 6
1.3. second level 3
1.3.1. third level 1
---------------------
1.3.2. third level 2
1.4. second level 4
1.4.1. third level 1
[/code]
aber ich bekomme das auf Firefox:

[img]https://i.sstatic.net/pBPom0If .png[/img]

und ich bekomme das auf Chromium:

[img]https://i. sstatic.net/82qbFcOT.png[/img]

beides ist nicht das gewünschte Ergebnis.
Können Sie mir helfen zu verstehen, was los ist?

Gibt es welche Wie kann ich auf beiden Plattformen debuggen?

Wie kann ich auf beiden Plattformen das gewünschte Ergebnis erzielen?
Grüße