HB Blogside

Sometimes They Get it Wrong

Robert Wallace Technical Director
Robert Wallace Technical Director

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

    tag in the second column like this:

      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 {
         /* define the starting value for our variable "inc" */
          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;
         /*  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

        they could have just used the HTML:

          and the CSS:

          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.


        This entry was posted in Technology, Usability and tagged , , , , . Bookmark the permalink.

        Leave a Reply

        Your email address will not be published.

        twenty + 12 =