[css] Using decimals in Ordered Lists

programming web dev
1

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 :wink:

if anyone can help that would be great,
cheers.

2

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

3

:lol: well actually it would be more like

<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>
4

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 :wink:

5

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

6

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

<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 :frowning:

7

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.

8

:smiley: well… designers dont’ get annoyed with it… it’s the developers :smiley: :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…