I did a search of the forums but came across an obscure solution and couldn't figure out how to apply it properly...
I want to do an outline style ordered list in HTML. How is this accomplished? Specifically, like this:
3.0 Overview
3.1 How to start
3.11 Installation
and so forth....
Thanks!You will have to manually type in the numbers for each section because lists currently don't have support for the type you are looking for.Well... Firefox and Opera support the CSS2 way to do that (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/generate.html#counters">http://www.w3.org/TR/REC-CSS2/generate.html#counters</a><!-- m -->), but IE (as of version 7) doesn't.Firefox doesn't support counter enough to do this, only Opera can.Firefox 1.0 doesn't, but Firefox 1.5+ does.
Here's a demo I made a few months ago. See for yourself.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
h1 {
font-size: 1.6em;
}
/* Works in Firefox 1.5+, Mozilla 1.8+, Opera (at least 5+), Konqueror 3.4+,
iCab 3, and Camino 1.0 */
/* This doesn't work in IE or Safari 2.0 */
ol.multilevelMarkers {
counter-reset: listcountML1;
margin: .5em 0;
padding: 0 20px;
}
ol.multilevelMarkers ol {
counter-reset: listcountML2;
margin: .5em 0;
padding: 0 20px;
}
ol.multilevelMarkers>li,ol.multilevelMarkers ol>li {
list-style-type: none;
}
ol.multilevelMarkers li:before {
counter-increment: listcountML1;
content: counter(listcountML1) ". ";
}
ol.multilevelMarkers ol li:before {
counter-increment: listcountML2;
content: counter(listcountML1) "." counter(listcountML2) ". ";
}
</style>
</head>
<body>
<h1>Ordered List with Multilevel Markers</h1>
<ol class="multilevelMarkers">
<li>item 1<ol>
<li>item 1.1</li>
<li>item 1.2</li>
<li>item 1.3</li>
</ol></li>
<li>item 2<ol>
<li>item 2.1</li>
<li>item 2.2</li>
<li>item 2.3</li>
<li>item 2.4</li>
</ol></li>
<li>item 3<ol>
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ol></li>
</ol>
</body>
</html>Yes it does. I just checked using headers not lists
It seems to work with headers for me. I did notice that it didn't work right in FF1.5 when the counter-reset declaration wasn't present and applied to an element that exists in the document.
<h2>level 2 header</h2>
<h3>level 3 header</h3>
<h3>level 3 header</h3>
<h3>level 3 header</h3>h2 {
counter-reset: h3counter;
}
h3:before {
counter-increment: h3counter;
content: counter(h3counter) ". ";
}Look at the W3C example (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/generate.html#counters">http://www.w3.org/TR/REC-CSS2/generate.html#counters</a><!-- m -->), it only works in Opera
You mean this?
H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
it works in FF1.5 if you add this
body {
counter-reset: chapter;
}
It sure is an odd bug.After reading through bugzilla (<!-- m --><a class="postlink" href="https://bugzilla.mozilla.org/show_bug.cgi?id=357718">https://bugzilla.mozilla.org/show_bug.cgi?id=357718</a><!-- m -->) and W3C (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/generate.html#counters">http://www.w3.org/TR/CSS21/generate.html#counters</a><!-- m -->), it appears not to be a bug, but the way it's supposed to work!
All a little academic until IE supports counters.Ah. Thanks for looking into it, Fang.
It looks like Opera implemented it according to CSS2, but Mozilla implemented it according to CSS2.1.
I want to do an outline style ordered list in HTML. How is this accomplished? Specifically, like this:
3.0 Overview
3.1 How to start
3.11 Installation
and so forth....
Thanks!You will have to manually type in the numbers for each section because lists currently don't have support for the type you are looking for.Well... Firefox and Opera support the CSS2 way to do that (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/generate.html#counters">http://www.w3.org/TR/REC-CSS2/generate.html#counters</a><!-- m -->), but IE (as of version 7) doesn't.Firefox doesn't support counter enough to do this, only Opera can.Firefox 1.0 doesn't, but Firefox 1.5+ does.
Here's a demo I made a few months ago. See for yourself.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
h1 {
font-size: 1.6em;
}
/* Works in Firefox 1.5+, Mozilla 1.8+, Opera (at least 5+), Konqueror 3.4+,
iCab 3, and Camino 1.0 */
/* This doesn't work in IE or Safari 2.0 */
ol.multilevelMarkers {
counter-reset: listcountML1;
margin: .5em 0;
padding: 0 20px;
}
ol.multilevelMarkers ol {
counter-reset: listcountML2;
margin: .5em 0;
padding: 0 20px;
}
ol.multilevelMarkers>li,ol.multilevelMarkers ol>li {
list-style-type: none;
}
ol.multilevelMarkers li:before {
counter-increment: listcountML1;
content: counter(listcountML1) ". ";
}
ol.multilevelMarkers ol li:before {
counter-increment: listcountML2;
content: counter(listcountML1) "." counter(listcountML2) ". ";
}
</style>
</head>
<body>
<h1>Ordered List with Multilevel Markers</h1>
<ol class="multilevelMarkers">
<li>item 1<ol>
<li>item 1.1</li>
<li>item 1.2</li>
<li>item 1.3</li>
</ol></li>
<li>item 2<ol>
<li>item 2.1</li>
<li>item 2.2</li>
<li>item 2.3</li>
<li>item 2.4</li>
</ol></li>
<li>item 3<ol>
<li>item 3.1</li>
<li>item 3.2</li>
<li>item 3.3</li>
</ol></li>
</ol>
</body>
</html>Yes it does. I just checked using headers not lists
It seems to work with headers for me. I did notice that it didn't work right in FF1.5 when the counter-reset declaration wasn't present and applied to an element that exists in the document.<h2>level 2 header</h2>
<h3>level 3 header</h3>
<h3>level 3 header</h3>
<h3>level 3 header</h3>h2 {
counter-reset: h3counter;
}
h3:before {
counter-increment: h3counter;
content: counter(h3counter) ". ";
}Look at the W3C example (<!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/generate.html#counters">http://www.w3.org/TR/REC-CSS2/generate.html#counters</a><!-- m -->), it only works in Opera
You mean this?H1:before {
content: "Chapter " counter(chapter) ". ";
counter-increment: chapter; /* Add 1 to chapter */
counter-reset: section; /* Set section to 0 */
}
H2:before {
content: counter(chapter) "." counter(section) " ";
counter-increment: section;
}
it works in FF1.5 if you add this
body {
counter-reset: chapter;
}
It sure is an odd bug.After reading through bugzilla (<!-- m --><a class="postlink" href="https://bugzilla.mozilla.org/show_bug.cgi?id=357718">https://bugzilla.mozilla.org/show_bug.cgi?id=357718</a><!-- m -->) and W3C (<!-- m --><a class="postlink" href="http://www.w3.org/TR/CSS21/generate.html#counters">http://www.w3.org/TR/CSS21/generate.html#counters</a><!-- m -->), it appears not to be a bug, but the way it's supposed to work!
All a little academic until IE supports counters.Ah. Thanks for looking into it, Fang.
It looks like Opera implemented it according to CSS2, but Mozilla implemented it according to CSS2.1.