12

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

1  
   1.1  
   1.2  
   1.3  
   1.4   
2
   2.1

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

6
  • 1
    Which browser is it not working in? I've seeing it working in this fiddle in Firefox 3.6.8: jsfiddle.net/nWffg
    – Pat
    Sep 3, 2010 at 13:05
  • i have to make it work for ie 6, 7 ,8
    – medusa
    Sep 3, 2010 at 13:07
  • 4
    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 3, 2010 at 13:09
  • 5
    Please stop support ie6.
    – Marwelln
    Sep 3, 2010 at 13:15
  • 4
    @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 3, 2010 at 13:54

6 Answers 6

11


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>

1
  • 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.... Oct 10, 2012 at 19:01
4

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.

1
  • 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 3, 2010 at 14:25
2

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>

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.

2
  • suppose i write the js that traverses the dom and finds the list items, what attributes should i change then?
    – medusa
    Sep 3, 2010 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 3, 2010 at 15:30
0

Works perfectly for me, in FF 3.6.6, so:

  1. Which browser is it not working in?
  2. What does your markup look like (i.e. are you nesting the lists correctly)?
1
  • 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 3, 2010 at 13:13
0

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'; }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.