How to create a 1.1, 1.2 1.3 ... HTML list?

Question

I want to create HTML nested lists that has the following format:

I tried a solution that I found on the internet:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

But it didnt work for me. Any help please??

If the counter solution is too complicated, is there a way to fake the nested list effect, by writing them manually but being sure that the formatting looks like a real list

EDIT

need full IE6 support

Which browser is it not working in? I've seeing it working in this fiddle in Firefox 3.6.8: http://jsfiddle.net/nWffg/ — Pat, Sep 03 '10 at 13:05
I don't think you'll ever get this working in IE6 using CSS alone. You could do a JS-only version that will 'fix' broken old browsers, but it would be a pretty nasty hack. — Bobby Jack, Sep 03 '10 at 13:09
@Marwelln...if only it was that easy. IE6 is still the standard browser of the government department I work in...which always makes me laugh when they talk about their focus on technology and future. — Pat, Sep 03 '10 at 13:54
Possible duplicate of [Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css?](https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1) — Kay V, Jan 04 '18 at 12:15

score 12 · Answer 1 · answered Jul 17 '12 at 12:17

this answer is for the first question. I suggest use this method if you are not going below IE8 (IE7 => ?). for below IE7 you can use same logic with jquery.

Original Post from
http://www.w3schools.com/cssref/pr_gen_counter-reset.asp

CSS

ul.numeric-decimals { counter-reset:section; list-style-type:none; }
ul.numeric-decimals li { list-style-type:none; }
ul.numeric-decimals li ul { counter-reset:subsection; }
ul.numeric-decimals li:before{
    counter-increment:section;
    content:counter(section) ". ";/*content:"Section " counter(section) ". ";*/
}
ul.numeric-decimals li ul li:before {
    counter-increment:subsection;
    content:counter(section) "." counter(subsection) " ";
}

HTML

<ul class="numeric-decimals">
<li>Cats</li>
<li>Dogs
    <ul>
        <li>Birds</li>
        <li>Rats</li>
    </ul>
</li>
<li>Rabbits</li>
<li>Ants
    <ul>
        <li>Lions</li>
        <li>Rats</li>
    </ul>
</li>
<li>Ducks</li>

NOTE: The OP indicates they must support IE6, 7, and 8, so your answer doesn't really address their question. AND be warned, people here don't care for references to W3 Schools.... — random_user_name, Oct 10 '12 at 19:01

score 4 · Accepted Answer · edited Jul 17 '12 at 12:27

This should work. It is a bad way to do this but if you MUST support IE6 not much choice.

      <ol>
        <li><span>1</span> Item
          <ol>
            <li><span>1.1</span> Item</li>
            <li><span>1.2</span> Item</li>
            <li><span>1.3</span> Item</li>
            <li><span>1.4</span> Item</li>
          </ol>
        </li>            
        <li><span>2</span> Item
          <ol>
            <li><span>2.1</span> Item</li>
          </ol>            
        </li>
      </ol>

with css

ol {list-style:none;}

After your comment I've redone it a bit.

  <ol>
    <li><span>1</span> Item
      <ol>
        <li><span>1.1</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.2</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.3</span> <p>ItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem ItemItemItemItemItemItemItemItem</p></li>
        <li><span>1.4</span> <p>Item</p></li>
      </ol>
    </li>            
    <li><span>2</span> Item
      <ol>
        <li><span>2.1</span> Item</li>
      </ol>            
    </li>
  </ol>

And the css would be

ol {list-style:none;}
ol li span
{
  display: block;
  float: left;
  width: 30px;
}
ol li
{
 clear:both;
 width: 400px;

}
ol li p
{
  float: left;
  width: 370px;
  margin: 0;

}

You may have to adjust the widths.

no it doesnt work because when the item is too long it breaks on the other line and begins right beneath the number not the text. — medusa, Sep 03 '10 at 14:25

score 4 · Answer 3 · answered Mar 02 '18 at 07:59

You can use counters to do so:

Example

ol { counter-reset: item }
li{ display: block }
li:before { content: counters(item, ".") " "; counter-increment: item }

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

Diego · Answer 4 · 2010-09-03T14:48:53.700

1

The before element doesn't work in IE6, but it's the correct way of doing it. I'd recommend using IE7.js, a javascript library that makes IE6 behave like IE7 where javascript and CSS are concerned. Another way could be using a javascript hack that runs only if the browser is IE6 and traverses de DOM modifying the list items...

In For A Beautiful Web you can find more information regarding IE6-compatible websites.

edited Sep 03 '10 at 14:48

answered Sep 03 '10 at 14:12

Diego

5,024
6
38
47

suppose i write the js that traverses the dom and finds the list items, what attributes should i change then? – medusa Sep 03 '10 at 14:56
You should change the inner html of the list items. I seriously recommend you include ie7.js in your page though, it's a well made hack that works wonders and allows you to target better browsers during your page design and emulate functionalities in crap browsers like IE6. – Diego Sep 03 '10 at 15:30

score 0 · Answer 5 · edited Oct 10 '12 at 22:05

This example uses IE6-specific CSS attribute behavior to add a static marker before each li. There must be some MS specific magic that can replace a static dash with a counter.

If you want it to be a CSS solution, use this as a starting point and then google "MSDN".

ul.example { margin: 0.5em 0; padding: 0 0 0 2em; }
ul.example li
{
    margin: 0.5em 0; padding: 0 0 0 20px;
    list-style-type: none;
    behavior: expression( !this.before
        ? this.before = this.innerHTML = '&mdash;&nbsp;' + this.innerHTML : '' );
    text-indent: -1.24em;
}
ul.example li:before { content: '\2014\a0'; }

score 0 · Answer 6 · answered Sep 03 '10 at 13:08

0

Works perfectly for me, in FF 3.6.6, so:

Which browser is it not working in?
What does your markup look like (i.e. are you nesting the lists correctly)?

answered Sep 03 '10 at 13:08

Bobby Jack

15,689
15
65
97

I am testing with IE. The problem with my markup could be tha fact that i have a html that has got lots of lists and i want to apply this effect to some of them which are not the root ones i mean: i dont want the counter to start when it first gets an ol element. Can i use different tag names instead of ol and li for this list i want to nest, in the css and in the markup? – medusa Sep 03 '10 at 13:13

How to create a 1.1, 1.2 1.3 ... HTML list?

6 Answers6

Linked

Related