0

I need to add double numbers to the ol list. An example being:

  1. Welcome Visitor 1.1. Introduction 1.2. Further Info 1.3. Further Info 1.4. Further Info 1.5. Further Info

  2. Another OL 2.1. Further Info 2.2. Further Info 2.3. Further Info

I am aware of the nesting info and alignment, alongside starting numbers and custom images. But I cannot get the two number system number above. Is there a basic rule I am missing?

I am using the above for a privacy policy, it needs to be in the format, I am not even going to contest it. I would prefer not use :after due to browser compatibility..

Any help would be great :)

Neil
  • 971
  • 2
  • 12
  • 33
  • possible duplicate of [Number nested ordered lists in HTML](http://stackoverflow.com/questions/2729927/number-nested-ordered-lists-in-html) – Curtis Jun 06 '13 at 11:21

2 Answers2

1

I am using the above for a privacy policy, it needs to be in the format, I am not even going to contest it. I would prefer not use :after due to browser compatibility.

If the exact right layout is very important even in older browsers – then I’d use UL instead and put the numbering into the LI hard-coded:

<ul>
    <li>1. Visitor
        <ul>
            <li>1.1 Introduction</li>
            <li>1.2 Further Info</li>
            ...
        </ul>
    </li>
    ...
</ul>
CBroe
  • 91,630
  • 14
  • 92
  • 150
  • 1
    This negates the whole point of HTML, this markup will end up in a CMS, and is not very user friendly. However I find it funny that we both ended up at the above code. However I started off with the above, I would think this would be included in w3c spec. – Neil Jun 06 '13 at 11:39
  • Of course this is not the _best_ way to structure this data into HTML (`OL` would be) – but if you want “puristic” markup _and_ not to use “advanced” CSS features, that’s quite impossible I’d say when you want the same result in older browsers. A compromise could be either a) use OL in your CMS for user friendliness and replace with UL and an render out counters in the LI elements as in my example dynamically, or b) use OL and “modern” CSS, and create a JavaScript that inserts the counters client-side into the DOM if necessary (because browser old, does not understand :after/counter). – CBroe Jun 06 '13 at 11:44
  • 1
    I love the constructive feedback around here :) I will take it on board. – Neil Jun 06 '13 at 12:06
  • 1
    it helps to decide to CSS or spend extra time for few cases : http://caniuse.com/#feat=css-counters :) – G-Cyrillus Jun 06 '13 at 14:13
0

you need to reset your list-style-type to none and then use counter css with pseudo-class :before.

pseudo-element ::before will not work with IE8.

If you have a jsfiddle, we can show from your code :)

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • this it :) CSS COUNTER http://caniuse.com/#feat=css-counters | :before/::before http://caniuse.com/css-gencontent | Modern is relative :) – G-Cyrillus Jun 06 '13 at 14:11