<ol start=""> deprecated, can't make it work w/css

it seems “start” property for <ol> has been deprecated…

<ol start=“5”>

we’re supposed to use css now for this, but this

<ol class=“five”>
ol.five { counter-reset: item 5 }

found here,
http://www.arraystudio.com/as-workshop/make-ol-list-start-from-number-different-than-1-using-css.html

is not working, list starts at 1…

what is solution… thank you…

thank you…

For all it matters they were using an ID rather than a ‘class’ so you would have something like: OL#five { counter-reset: item 5 } and <ol id=“five”> and that should work for the second set of numbers. I assume you are using a compatible browser too and adding the; LI:before , etc.

Not that I understand why you post a CSS question in the (X)HTML forum, but …

This works nicely in Opera, Firefox, Chrome and Safari. It should work in IE8, too, but I don’t have access to that.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sv">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <style type="text/css">
      html {font:81.25&#37;/1.5 Verdana,sans-serif}
      ol.five {counter-reset:item 4; margin-left:0; padding-left:3em;}
      ol.five li {counter-increment:item; list-style-type:none}
      ol.five li:before {display:inline-block; width:2em; margin-left:-3em; margin-right:1em; text-align:right; content:counter(item) "."}
    </style>
  </head>
  <body>
    <ol class="five">
      <li>Fifth</li>
      <li>Sixth
        <br>on two rows</li>
      <li>Seventh</li>
      <li>Eighth</li>
      <li>Ninth</li>
      <li>Tenth</li>
    </ol>
  </body>
</html>

You should just use the “start” attribute. It will work in all browsers including those below IE 8 which are still in the wild. The CSS implementation not so much.

yes I agree, the CSS looks a bit convoluted … I just wish it weren’t deprecated, so it would validate… (did you mean to say it doesn’t work in IE8? I don’t have IE8, just tested on Safari in Develop –> User Agent –> IE8 feature… and it works… if that Safari testing thing is reliable…)

thank you very much…

It should work in IE 8, but I was referring to IE 7 and 6, and those browsers that don’t have CSS Generated content support. The feature you mention in Safari only changes the User Agent string it doesn’t change the rendering engine to IE. In my personal opinion, 100% validation is not required when you know what does not validate will not cause harm. Using the “start” attribute will not cause the page to explode.

With that ‘logic’ I assume you are also advocating layout tables, frames, and using the target attribute for popup windows. Back to the future! :rolleyes:

The numbering is purely presentational, and should therefore be handled by CSS. If the numbering isn’t presentational, then you shouldn’t be splitting the content in multiple lists.

So I must be a heathen because I’m not following the spec to the letter like some religion?

I agree with you that until usage of IE7 and earlier fall low enough to be able to ignore them that the CSS solution to this particular problem is impractical to solve with CSS

In those cases where the numbers must have specific values it could be argued that they are a part of the actual content and then hard coding the numbers within the list itself might be a legitimate alternative.

I’d disagree with that. Sometimes it’s relevant to split a list up with headings, or to reproduce part of a list.

eg:
Contents
Section 1 - Introduction

  1. Foreword
  2. Background
  3. Context
    Section 2 - The Project
  4. Aims
  5. Methodology
  6. Initial outcomes
  7. Trial and error
  8. Final results
    Section 3 - Conclusion
  9. Analysis
  10. Recommendations

Often, a numbered list will link or resonate with other aspects of the contents, which means that you want the numbering to be consistent across multiple parts of the site. The numbering then becomes part of the content of the page, it becomes integral to it, and so consigning the numbering system to CSS is not appropriate - its parameters need to be based in the HTML.

No. If it’s ‘relevant’ to split the list, then it is not a single list. If it is a single list, then it isn’t ‘relevant’ to split it into several lists.

In your example, it could be either or (can’t say without knowing the exact contents).

If the sections are important, it should be something like this,

<ol>
  <li>
    <h2>Introduction</h2>
    <ol>
      <li>Foreword</li>
      <li>Background</li>
      <li>Context</li>
    </ol>
  </li>
  <li>
    <h2>The Project</h2>
    <ol>
      <li>Aims</li>
      <li>Methodology</li>
      <li>Initial outcomes</li>
      <li>Trial and error</li>
      <li>Final results</li>
    </ol>
  </li>
  <li>
    <h2>Conclusion</h2>
    <ol>
      <li>Analysis</li>
      <li>Recommendations</li>
    </ol>
  </li>
</ol>

If the chapter numbering is more important, it’s a single list,

<ol>
  <li>
    <span>Section 1 - Introduction</span>
    Foreword
  </li>
  <li>Background</li>
  <li>Context</li>
  <li>
    <span>Section 2 - The Project</span>
    Aims
  </li>
  <li>Methodology</li>
  <li>Initial outcomes</li>
  <li>Trial and error</li>
  <li>Final results</li>
  <li>
    <span>Section 3 - Conclusion</span>
    Analysis
  </li>
  <li>Recommendations</li>
</ol>

In both cases the presentation should be controlled with CSS.

Using deprecated markup to cater for broken browsers is your choice, of course. But things are deprecated for a reason.

In this case it’s easy to add a few lines of JavaScript to emulate the :before pseudo-class for IE5/6/7.

The specifications aren’t laws or dogmatic scripture, but they exist to provide recommendations and best practices which will benefit the end-user and best represent the information online (though Tommy might agree with me that HTML5 could perhaps be excluded from that). It seems rather strange to me why anyone would not want to follow the specifications in order to produce their website, if you produce a piece of software, there’s loads of ways you could write the code but you want to make it as agile as possible. Simply interpreting the specification as you see fit rather than following the agreed upon recommendations feels rather counter-productive in my eyes, especially (as has been said) they were deprecated for a very good reason (and as a professional, good semantics should be a priority). :slight_smile: