How do I create a reversed ordered list of years?

Question

I want to create a list in html that has reversed ordered, non-consecutive years instead of numbers. It should look like this:

2009 Item 7.
2007 Item 6.
2006 Item 5.
2004 Item 4.
2003 Item 3.
2002 Item 2.
2000 Item 1.

I have code that works for reverse ordering number lists:

ol {
    margin-left: 0;
    padding-left: 1em;
    text-indent: -1em;
}

<ol>
    <li value="5">Item 5.</li>
    <li value="4">Item 4.</li>
    <li value="3">Item 3.</li>
    <li value="2">Item 2.</li>
    <li value="1">Item 1.</li>
</ol>

This gives me:

5. Item 5.
4. Item 4.
3. Item 3.
2. Item 2.
1. Item 1.  

If I simply add in a year:

<ol>
    <li value="2002">Item 5.</li>
</ol>

The '2002' is moves inside the area for the item, instead of being set out to the left. Is there an easy way around this?

Answer 1

Steve, it seems that a definition list would better suit your needs. Technically, though the year is a number, it is not functioning as the numbering of your list (inferred from you not wanting the period after the year). You can style the dl to look similar to the ol and have greater control over the year in addition to the list item.

dt {width: 3em; clear: both;}
dd, dt {float: left;}

<dl>
    <dt>2007</dt> 
    <dd>Item 6</dd>
    <dt>2006</dt>
    <dd>Item 5</dd>
    <dt>2004</dt>
    <dd>Item 4</dd>
    <dt>2003</dt>
    <dd>Item 3</dd>
    <dt>2002</dt>
    <dd>Item 2</dd>
    <dt>2000</dt>
    <dd>Item 1</dd>
</dl>

Answer 2

It seems to me that you're applying the style to the wrong element. If you change the css to this:

li {
margin-left: 0;
padding-left: 1em;
text-indent: -1em; }

It fixes your problem straight away. Note that this may or may not be the result you were looking for, but for what I understood

Answer 3

On an ordered list, value attribute on the <li>, which is fairly self-explanatory.

<ol>
    <li value="2007">Item 1</li>
    <li value="2005">Item 2</li>
    <li value="2004">Item 3</li>
</ol>

I'm not sure of your exact issue with numbers moving - I tried Firefox, Chrome and Opera and they all played ball. If you're seeing issues in Internet Explorer, make sure you have a doctype so you don't go into quirks mode.

I did see a small issue in Chrome, where the first number was cut off at the edge of the screen. However, this is easily fixed by changing the left-padding (or margin) to anything over the default 40px, if the same thing happens for you.

Interestingly, HTML 5 defines a reversed attribute that would be closer to what you want, but that isn't well-supported yet. Also note that while the value attribute is deprecated in HTML4, it is not deprecated in HTML5, so use it to your heart's content!

Answer 4

This works for me

<ol type="1">
    <li value="2007">item 1</li>
    <li value="2005">item 2</li>
    <li value="2004">item 3</li>
</ol>