Ordered list inside ordered list

D

DL

I'm wondering if there's a way to support ordered list inside an
ordered list. In other words, the ability to create multi-level
structures such as
1. Products
1.1 Pen
1.2 Computer
1.n Food

2. Users
2.1 Generic consumers
2.2 College students
2.n ...

3 Comments
....

Browsers: IE7? IE8? Firefox 3.5?

I've tried to even create the second level manually, e.g.
1.1, bla bla,
1.2 more bla bla.
Had some success with Firefox 3.5 two nights ago but completely out of
luck with IE7, tried Firefox again today but failed. The web page
uses frame with execCommand of InsertOrderList.

Thanks.
 
S

SAM

Le 11/9/09 1:22 AM, DL a écrit :
I'm wondering if there's a way to support ordered list inside an
ordered list. In other words, the ability to create multi-level
structures such as
1. Products
1.1 Pen
1.2 Computer
1.n Food

2. Users
2.1 Generic consumers
2.2 College students
2.n ...

3 Comments
...

Browsers: IE7? IE8? Firefox 3.5?

I've tried to even create the second level manually, e.g.
1.1, bla bla,
1.2 more bla bla.
Had some success with Firefox 3.5 two nights ago but completely out of
luck with IE7, tried Firefox again today but failed. The web page
uses frame with execCommand of InsertOrderList.

I can do it only for Fx.3, Safari.3, iCab, Opera.9, Camino.1.6
but ... not for IE (6 or 7) (8 maybe ?)


<style type="text/css">
ol li { counter-increment: compteur; }
ol ol li {
counter-increment: sub_compteur;
list-style: none;
}
ol ol li:before {
display: marker;
content: counter(compteur)"."counter(sub_compteur)" ";
}
</style>
<ol>
<li>item 1
<ol>
<li>sub-item 1.1
<li>sub-item 1.2
</ol>
</li>
<li>item 2
<ol>
<li>sub-item 2.1
<li>sub-item 2.2
</ol>
</li>
</ol>
 
D

DL

Le 11/9/09 1:22 AM, DL a écrit :








I can do it only for Fx.3, Safari.3, iCab, Opera.9, Camino.1.6
but ... not for IE (6 or 7) (8 maybe ?)

<style type="text/css">
ol li { counter-increment: compteur; }
ol ol li {
   counter-increment: sub_compteur;
   list-style: none;
   }
ol ol li:before {
    display: marker;
    content: counter(compteur)"."counter(sub_compteur)" ";
  }
</style>
<ol>
        <li>item 1
                <ol>
                        <li>sub-item 1.1
                        <li>sub-item 1.2
                </ol>
        </li>
        <li>item 2
                <ol>
                        <li>sub-item 2.1
                        <li>sub-item 2.2
                </ol>
        </li>
</ol>

Interesting. I'll check it out. Thanks, Sam.
 
S

SAM

D

DL

Le 11/9/09 1:22 AM, DL a écrit :








I can do it only for Fx.3, Safari.3, iCab, Opera.9, Camino.1.6
but ... not for IE (6 or 7) (8 maybe ?)

<style type="text/css">
ol li { counter-increment: compteur; }
ol ol li {
   counter-increment: sub_compteur;
   list-style: none;
   }
ol ol li:before {
    display: marker;
    content: counter(compteur)"."counter(sub_compteur)" ";
  }
</style>
<ol>
        <li>item 1
                <ol>
                        <li>sub-item 1.1
                        <li>sub-item 1.2
                </ol>
        </li>
        <li>item 2
                <ol>
                        <li>sub-item 2.1
                        <li>sub-item 2.2
                </ol>
        </li>
</ol>

No luck with the above. Neither Firefox 3.5 nor IE7 on an XP prof
box. The list was created via frame with execCommand of
InsertOrderList. Or I didn't know the correct way for your above
approach, it can't be hard coded stuff since my interface is part of a
tool.
 
D

Dr J R Stockton

In comp.lang.javascript message <79444cdd-5297-4aa5-bd8f-3a574c389cac@m1
6g2000yqc.googlegroups.com>, Sun, 8 Nov 2009 16:22:16, DL
I'm wondering if there's a way to support ordered list inside an
ordered list. In other words, the ability to create multi-level
structures such as
1. Products
1.1 Pen
1.2 Computer
1.n Food

2. Users
2.1 Generic consumers
2.2 College students
2.n ...

3 Comments
...

To do that with CSS you should ask in a CSS newsgroup, maybe in
comp.infosystems.www.authoring.*.

It should be easy enough using JavaScript :

<div class=XXX>
<div>Products
<div>Pen</div>
<div>Computer</div>
<div>Food</div>
</div>
<div>Users
<div>Generic consumers</div>
<div>College students</div>
<div>...</div>
</div>
<div>Comments
<div>...</div>
</div>
</div>

Onload JavaScript searches for class XXX then proceeds to walk the
contained element tree, keeping track of the situation and adding the
necessary numbering. You could hand-write dots to represent the
numbers; then the source would look somewhat more like the display.

If your entries are not simple text, then you may want to class the
inner DIVs, to help identification.

OR : use in the source <UL> <LI> throughout, with CSS to remove the
bullets; and make the script insert the numbers in those.

Untested.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,835
Latest member
KetoRushACVBuy

Latest Threads

Top