Hi everyone,
I have an ordered list with half the numbers in one floated div and the other half in another floated div. The first list goes to number 9 so I need to restart the second list at number 10.
I used <ol start=“10”> in the second ol but have read that this is deprecated. Is there a more standards way of doing this that will be backward compatible (at least to early ie browsers)?
Appreciate any assistance.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
html {font:81.25%/1.5 Verdana,sans-serif}
ol {margin-left:0; padding-left:0}
ol>li {list-style-type:none; counter-increment:item}
ol>li:before {display:inline-block; width:2em; margin-right:0.5em; text-align:right; content:counter(item, decimal)}
#a, #b {float:left; width:20em}
#a {counter-reset:item 0}
#b {counter-reset:item 9}
</style>
</head>
<body>
<div id="a">
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ol>
</div>
<div id="b">
<ol>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
</ol>
</div>
</body>
</html>
This doesn’t work in IE7 or older, although it’s fairly simple to adapt it with the use of a simple JavaScript.
Thanks for that. You example works well however my items span more than one line so they’re not being indented correctly, ie. with a hanging indent. Is there any way to adjust this? Also, how would I fix the backward compatibility issue with javascript? Do you have any tutorials that show how to do this?
Here’s a revised version.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
html {font:81.25%/1.5 Verdana,sans-serif}
ol {margin-left:0; padding-left:0}
ol li {padding-left:2.5em; text-indent:-2.5em; list-style-type:none; counter-increment:item}
ol li:before {display:inline-block; width:2em; margin-right:0.5em; text-align:right; content:counter(item, decimal)}
ol li .ie-before {display:inline-block; width:2em; margin-right:0.5em; text-align:right}
#a, #b {float:left; width:20em}
#a {counter-reset:item 0}
#b {counter-reset:item 9}
</style>
</head>
<body>
<div id="a">
<ol>
<li>One<br>Second line</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ol>
</div>
<div id="b">
<ol>
<li>Ten<br>and a second line here, too</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
</ol>
</div>
<!--[if lte IE 7]>
<script type="text/javascript">
(function () {
var addBefore = function (id, start) {
var items = document.getElementById(id).getElementsByTagName("li");
for (var i = 0, num = start; i < items.length; ++i, ++num) {
var span = document.createElement("span");
span.className = "ie-before";
span.appendChild(document.createTextNode(num + ""));
items[i].insertBefore(span, items[i].firstChild);
}
};
addBefore("a", 1);
addBefore("b", 10);
})();
</script>
<![endif]-->
</body>
</html>
Hi Tommy,
When using the counter-increment:item; is it possible to reset periods after the decimals as with an unstyled ol.
Obviously it is the list-style:none that is removing the default ol periods.
ol>li {list-style-type:none; counter-increment:item}
e.g.
Oh, yes! Well, not with counter-increment, but with the content property.
ol li:before {
...
content:counter(item, decimal) ".";
}
The content property accepts multiple values, separated by white-space.
Thanks for the revised code. After number 15 I have a nested ul so that there are 5 bullet points indented on 15 and then it will go back to 16 after that. Currently all the li’s of the ul are being rendered as numbers and are included in the count but they’re indented. Can you tell me if there’s a way to get around this?
Appreciate any further help.
If I’m understanding you right you just want a nested <ul> to not be indented?
Just set the padding to 0 (or margin), which ever you set, for hte <ul> or <li> or whichever element has the spacing :). I don’t know if you are using Tommys full code however 
Hi,
I’ve adapted Tommy’s code so it works with my two columns as follows:
div.terms ol {
margin-left: 0;
padding-left: 0;
}
div.terms ol li {
padding-left: 2.5em;
text-indent: -2.5em;
list-style-type:none;
counter-increment:item;
}
div.terms ol li:before {
display:inline-block;
width:2em;
margin-right:0.5em;
text-align: right;
content:counter(item, decimal)
}
div.terms ol li .ie-before {
display: inline-block;
width: 2em;
margin-right: 0.5em;
text-align: right;
}
div.terms div#col1 {
counter-reset:item 0;
}
div.terms div#col2 {
counter-reset:item 9;
}
The thing is that the ul’s aren’t coming out as bullets. Instead they’re coming out as numbers, ie. part of the consecutive list, so where a bullet should be after 15, there’s now an indented 16.
Would I need to set some alternate rules for the ul to fix this?
Well I don’t know the HTML but I’m assuming it’s just a nested list inside of a <ol>
It will keep counting up so you’d need to reset the counter. I don’t work much with counters at all.
I assume you can just target the ol inside the <ol>.
Sorry I can’t give more, this is shady area for me unfortunately :(.
div.terms ol ol{/*reset it here or set it as bullets via list-style*/
Just going by my eyeball scan, you need to use the child selector ol > li, since the ul list items fit the bill as descendents of ol.
cheers,
gary
The following makes it start from 1 again at number 16 but this again isn’t what I want since where 16 currently is, this needs to be a bullet. Then after the bullets finish it needs to continue on from 15.
div.terms div#col2 ol ul {
list-type: disc;
counter-reset:item 0;
}
Hmm try and read [url=http://www.w3.org/TR/CSS2/generate.html#counters]section 12.4.1 of the spec. It seems to be exactly your situation…
Hi,
Building on Tommy’s code these resets seem to work for the sub ul.
/*=== Sub List Styles ===*/
ol li ul li {
list-style:disc;
margin-left:-2em;/*reclaim li:before space*/
padding-left:0;
text-indent:0;
counter-increment:none;
}
ol li ul li:before,
ol li ul li .ie-before {
display:none;
I’m afraid I don’t know how to adjust the js for <IE7 though 
Maybe Tommy can do that if he passes through here again.
Here is the complete code I was testing with
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Multi-Column Ordered List with Counter-Reset</title>
<style type="text/css">
html {font:81.25%/1.5 Verdana,sans-serif;}
ol {margin-left:0; padding-left:0;}
ol li {
padding-left:2.5em;
text-indent:-2.5em;
list-style-type:none;
counter-increment:item;
}
ol li:before {
display:inline-block;
width:2em;
margin-right:0.5em;
text-align:right;
content:counter(item, decimal) ".";
}
ol li .ie-before {
display:inline-block;
width:2em;
margin-right:0.5em;
text-align:right;
}
/*=== Sub List Styles ===*/
ol li ul li {
list-style:disc;
margin-left:-2em;/*reclaim li:before space*/
padding-left:0;
text-indent:0;
counter-increment:none;
}
ol li ul li:before,
ol li ul li .ie-before {
display:none;
}
#a, #b, #c {float:left; width:20em;}
#a {counter-reset:item 0; background:#DDF}
#b {counter-reset:item 10; background:#CCF}
#c {counter-reset:item 20; background:#CDF}
</style>
</head>
<body>
<h2>Multi-Column Ordered List with Counter-Reset</h2>
<div id="a">
<ol>
<li>One<br>with wrapping text</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</div>
<div id="b">
<ol>
<li>Eleven<br>with wrapping text</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen
<ul>
<li>subitem-1</li>
<li>subitem-2</li>
<li>subitem-3</li>
<li>subitem-4</li>
</ul>
</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
<li>Nineteen</li>
<li>Twenty</li>
</ol>
</div>
<div id="c">
<ol>
<li>Twenty-One<br>with wrapping text</li>
<li>Twenty-Two</li>
<li>Twenty-Three</li>
<li>Twenty-Four</li>
<li>Twenty-Five</li>
<li>Twenty-Six</li>
<li>Twenty-Seven</li>
<li>Twenty-Eight</li>
<li>Twenty-Nine</li>
<li>Thirty</li>
</ol>
</div>
<!--[if lte IE 7]>
<script type="text/javascript">
(function () {
var addBefore = function (id, start) {
var items = document.getElementById(id).getElementsByTagName("li");
for (var i = 0, num = start; i < items.length; ++i, ++num) {
var span = document.createElement("span");
span.className = "ie-before";
span.appendChild(document.createTextNode(num + "."));
items[i].insertBefore(span, items[i].firstChild);
}
};
addBefore("a", 1);
addBefore("b", 11);
addBefore("c", 21);
})();
</script>
<![endif]-->
</body>
</html>
Thanks so much for this revised code. I was having trouble with the link given in an earlier post so that’s great. I noticed that instead of having a margin-left of -2em as you had it in your original code, I had to change it to -0.5em to make it work:
div.terms ol li ul li {
list-style:disc;
margin-left: -0.5em;/*reclaim li:before space*/
padding-left: 0;
text-indent: 0;
counter-increment:none;
Would also be great if I could get the code to adjust the js for ie 6 and below. As you say maybe Tommy will pass through again.
Thanks again.
Just as a postscript on this topic - I’ve just tested in ie 6, 7 and 8. The code works in 6 and 8 but for some reason version 7 won’t render it. Maybe it’s a javascript thing.
It seems to be working in my ie7 (on IE tester) and IE8 in IE7 browser mode.
This is probably the wrong way to do it and Tommy will tell me off but couldn’t the increment be reduced only if the parent is a ul.
<!--[if lte IE 7]>
<script type="text/javascript">
(function () {
var addBefore = function (id, start) {
var items = document.getElementById(id).getElementsByTagName("li");
for (var i = 0, num = start; i < items.length; ++i, ++num) {
[B] if (items[i].parentNode.tagName =="UL") {--num}[/B]
var span = document.createElement("span");
span.className = "ie-before";
span.appendChild(document.createTextNode(num + "."));
items[i].insertBefore(span, items[i].firstChild);
}
};
addBefore("a", 1);
addBefore("b", 11);
addBefore("c", 21);
})();
</script>
<![endif]-->
Seems to work for that structure.
Yeah I just tested again in ie7 and it does work (not sure what happened before). I didn’t revise the javascript since the first code block was given so since it all works in the three ie browsers maybe a revision isn’t needed?
Here’s a revised version that handles nested unordered lists.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<style type="text/css">
html {font:81.25%/1.5 Verdana,sans-serif}
ol {margin-left:0; padding-left:0}
ol li {padding-left:2.5em; text-indent:-2.5em; list-style-type:none}
ol>li {counter-increment:item}
ol>li:before {display:inline-block; width:2em; margin-right:0.5em; text-align:right; content:counter(item, decimal)}
ol li .ie-before {display:inline-block; width:2em; margin-right:0.5em; text-align:right}
#a, #b {float:left; width:20em}
#a {counter-reset:item 0}
#b {counter-reset:item 9}
</style>
</head>
<body>
<div id="a">
<ol>
<li>One<br>Second line</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ol>
</div>
<div id="b">
<ol>
<li>Ten<br>and a second line here, too</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen
<ul>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
<li>Delta</li>
<li>Epsilon</li>
</ul>
</li>
<li>Sixteen</li>
<li>Seventeen</li>
<li>Eighteen</li>
</ol>
</div>
<!--[if lte IE 7]>
<script type="text/javascript">
(function () {
var addBefore = function (id, start) {
var list = document.getElementById(id).getElementsByTagName("ol")[0];
for (var li = list.firstChild, num = start; li != null; li = li.nextSibling, ++num) {
var span = document.createElement("span");
span.className = "ie-before";
span.appendChild(document.createTextNode(num + ""));
li.insertBefore(span, li.firstChild);
}
};
addBefore("a", 1);
addBefore("b", 10);
})();
</script>
<![endif]-->
</body>
</html>
Hey Tommy,
Thanks for posting that revised version, it works very well for IE7 now.
I know that gwh & Paul said that they were not having problems with IE7 but I never could get it to work right without the script adjustments.