# \[css\] Using decimals in Ordered Lists

**URL:** <https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894>\
**Category:** web dev\
**Created:** [March 31, 2006, 12:06am UTC](https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894 "2006-03-31T00:06:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![soulty](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/soulty/32/105_2.png) [@soulty](https://forum.kirupa.com/u/soulty)\
**Post date:** [March 31, 2006, 12:06am UTC](https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894/1 "2006-03-31T00:06:17Z")

</div>

Hey all, Trying to update a old website with some css coding and got a little stuck on the ordered lists.

Currently they are just manually entered, eg… 3.1, 3.2, 3.3…3.10.

I was trying to work out how to get that same structure using ordered lists. (ol) but have not been successful as of yet.

The following is a simplified structure i have.

\*\*css// \*\*

ol{list-style-type:decimal;}

**xhtml//**  
\<ol start=“3”\>  
\<ul\>blah\</ul\>  
\<ul\>blah\</ul\>  
\<ul\>blah\</ul\>  
\</ol\>

I also found i could use decimal-leading-zero, but that give me 01, 02, 03, and not 3.1 , 3.2 … also require it to start on 3 and later on 11.

::fyi:: i passed this by simp and he found a w3 doc that uses manually entered 2.1.1 in a ul list. By seeing that we both believe its probably something css cannot do by thought i would pass it by you guys/girls anway 😉

if anyone can help that would be great,  
cheers.

---

<div class="post-metadata">

**Author:** ![richter](https://avatars.discourse-cdn.com/v4/letter/r/838e76/32.png) [@richter](https://forum.kirupa.com/u/richter)\
**Post date:** [March 31, 2006, 1:21am UTC](https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894/2 "2006-03-31T01:21:12Z")

</div>

Yeah I couldnt find the real solution either…  
Just using nested \<ol\>'s might help? (gives indented numbers for second level)  
\<ol\>  
\<li\>dfgdhsldjks\</li\>  
\<li\>dfgdhsldjks\</li\>  
\<ol\>  
\<li\>dfgdhsldjks\</li\>  
\<li\>dfgdhsldjks\</li\>  
\</ol\>  
\<li\>dfgdhsldjks\</li\>  
\<li\>dfgdhsldjks\</li\>  
\</ol\>

R

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [March 31, 2006, 1:24am UTC](https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894/3 "2006-03-31T01:24:47Z")

</div>

:lol: well actually it would be more like

```auto
<ol>
  <li>Main Item 1
    <ol>
    <li>Sub Item 1.1</li>
    <li>Sub Item 1.2</li>
    <li>Sub Item 1.3</li>
    </ol>
  </li>
    <li>Main Item 2
    <ol>
    <li>Sub Item 2.1</li>
    <li>Sub Item 2.2</li>
    <li>Sub Item 2.3</li>
    </ol>
  </li>
</ol>

```

---

<div class="post-metadata">

**Author:** ![soulty](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/soulty/32/105_2.png) [@soulty](https://forum.kirupa.com/u/soulty)\
**Post date:** [March 31, 2006, 1:42am UTC](https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894/4 "2006-03-31T01:42:30Z")

</div>

thanks guys, still dosent get me a list with 3.1, 3.2.

its all good, it dosent seem possible, simp did show me a counter-increment method which i also had read about but it dosent view in all browsers… (_cough_ ie crap _cough_).

if theres any more ideas feel free 😉

---

<div class="post-metadata">

**Author:** ![bwh2](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bwh2](https://forum.kirupa.com/u/bwh2)\
**Post date:** [March 31, 2006, 3:00am UTC](https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894/5 "2006-03-31T03:00:47Z")

</div>

before: { content …} would be perfect if it displayed in IE…

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [March 31, 2006, 2:14pm UTC](https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894/6 "2006-03-31T14:14:58Z")

</div>

> [@.soulty](#):
>
> thanks guys, still dosent get me a list with 3.1, 3.2.
> 
> its all good, it dosent seem possible, simp did show me a counter-increment method which i also had read about but it dosent view in all browsers… (_cough_ ie crap _cough_).
> 
> if theres any more ideas feel free 😉

yea… and just anyone else that’s wondering what he’s talkin about

```html
<style type="text/css">
<!--
ol {counter-reset: item;}

li {display: block;}

li:before {
   content: counters(item, ".");
   counter-increment: item;
   padding: 5px; /*bumps the number away from the entry*/
} 
-->
</style>

```

but again… the problem is that it doesn’t show in IE, and it actually doesn’t display in Safari either ☹

---

<div class="post-metadata">

**Author:** ![bwh2](https://avatars.discourse-cdn.com/v4/letter/b/8c91f0/32.png) [@bwh2](https://forum.kirupa.com/u/bwh2)\
**Post date:** [March 31, 2006, 3:40pm UTC](https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894/7 "2006-03-31T15:40:18Z")

</div>

unlike a lot of designers, i don’t get too frustrated with IE. but IE’s inability to display before: { content … } really really eats at me. it would be so useful. instead we’re stuck with background images and padding-left. gah.

---

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [March 31, 2006, 5:25pm UTC](https://forum.kirupa.com/t/css-using-decimals-in-ordered-lists/183894/8 "2006-03-31T17:25:33Z")

</div>

> [@bwh2](#):
>
> unlike a lot of designers, i don’t get too frustrated with IE. but IE’s inability to display before: { content … } really really eats at me. it would be so useful. instead we’re stuck with background images and padding-left. gah.

😃 well… designers dont’ get annoyed with it… it’s the developers 😃 :lol: I’m a halfie so I get frustrated that IE has always sucked in the past… they know it has… and they continue to let it suck…