Sometimes They Get it Wrong

As I have said in other posts, I am also an instructor at Clark College in Vancouver, Washington. Recently I had a student who wanted to create an ordered list of items in two columns and needed to have the list item numbering continue from the first column to the second. In the early days of HTML, this was accomplished by adding an attribute to the

<ol start="3">

1	<ol start="3">

Which would cause the ordered list to start with the value of 3 (or in the case of my student, using roman numerals, III).

Simple! This results in:

But what if you want to duplicate this using the new improved techniques? The good news is that you can, but it is not as simple. You have to use CSS properties—and quite a few of them. Here is the CSS to create the same list:

ol.counter {
   <strong>/* define the starting value for our variable "inc" */</strong>
    counter-reset: inc 2;
}
ol.counter li {
    /* Turn off the list style, otherwise you will get both
       the normal list style and the counter showing   */
    list-style-type: none;
    margin-left: -20px;
   /*  padding left is required, otherwise the list item
       copy will be on top of the counter number   */
    padding-left: 22px;
    margin-bottom:6px;
   /*  The li tags have to be positioned relative
        (and the li:before absolute).  If both are missing then
        the counter numbers are inline with the item text */
    position: relative;
}
ol.counter li:before {
    /* define our counter variable "inc", set it
       to roman numerals and add a period */
    content: counter(inc, upper-roman) ".";
   /* increment the counter before each li */
    counter-increment: inc;
    left: -1em;
    line-height: 1;
    position: absolute
    /* to duplicate the text alignment of the item numbers */
    text-align: right;
    /* to get the vertical placement the same */
    top: 2px;
   /* to make enough space for the number */
    width: 2em;
}

ol.counter {

<strong>/* define the starting value for our variable "inc" */</strong>

counter-reset: inc 2;

}

ol.counter li {

/* Turn off the list style, otherwise you will get both

the normal list style and the counter showing */

list-style-type: none;

margin-left: -20px;

/* padding left is required, otherwise the list item

copy will be on top of the counter number */

padding-left: 22px;

margin-bottom:6px;

/* The li tags have to be positioned relative

(and the li:before absolute). If both are missing then

the counter numbers are inline with the item text */

position: relative;

}

ol.counter li:before {

/* define our counter variable "inc", set it

to roman numerals and add a period */

content: counter(inc, upper-roman) ".";

/* increment the counter before each li */

counter-increment: inc;

left: -1em;

line-height: 1;

position: absolute

/* to duplicate the text alignment of the item numbers */

text-align: right;

/* to get the vertical placement the same */

top: 2px;

/* to make enough space for the number */

width: 2em;

}

This gives the following:

Is this an improvement? Well, it certainly isn’t an improvement in ease of coding. It can be argued that you can now to some very impressive formatting of the numbers in the list. And that is true.

But why not simply add a new CSS property for lists, something like list-counter-reset: 3;? How hard would that have been? If people only wanted to restart the numbering, then instead of

<ol start="3">

1	<ol start="3">

they could have just used the HTML:

<ol class="restart">

1	<ol class="restart">

and the CSS:

ol.restart { list-counter-reset: 3; }

1	ol.restart { list-counter-reset: 3; }

As I said, sometimes they get it wrong.

So, if you need to restart list numbering, the CSS above is how you do it. You can see the code at http://ctec.clark.edu/~rwallace/class-exercises/licounter.htm. Load the page in a browser and see what happens as you disable the various CSS declarations so you get a good understanding of what each one is doing.

Sometimes They Get it Wrong

Categories