Иерархический нумерованный список средствами css

[Phantom]

Пытаюсь сделать иерархический вложенный список средствами css. В интернетах предлагается решение вида:

ol{
  list-style: none;
  counter-reset: num;
}
ol li:before{
  content: counters(num,'.') ' ';
  counter-increment: num;
} 


И это работало, пока я не захотел использовать несколько списков на одной странице. По моим наблюдениям проблема появляется в Опере всегда, а в других браузерах когда списки находятся в разных уровнях вложенности внутри DOM. Вот пример кода:

<ol>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
  <li>Пункт 4</li>
</ol>

<div>
  
  <ol>
    <li>Пункт 1</li>
    <li>Пункт 2
      <ol>
        <li>Пункт 2.1</li>
        <li>Пункт 2.2
          <ol>
            <li>Пункт 2.2.1</li>
            <li>Пункт 2.2.2</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Пункт 3
      <ol>
        <li>Пункт 3.1</li>
      </ol>
    </li>
  </ol>
  
</div> 


Второй список я засунул в div, тем самым погрузив его на один уровень глубже, относительно первого списка. При такой конструкции во всех браузерах счётчики в css работают нелогично. Для второго списка появляется дополнительная нумерация так, словно этот список является вложенным в первый список. Прикладываю картинку, демонстрирующую, что я ожидаю получить, а что в итоге получается.

Есть ли решение данной проблемы для современных браузеров IE9+ средствами css без скриптов?

[moka]

Вложи первый список тоже в DIV.
http://jsfiddle.net/BQasT/

И используй jsfiddle.net в будущем для примеров - очень помогает другим тебе помочь, т.к. не нужно стараться произвести ситуацию заного.

[Phantom]

На удивление подход с оборачиванием первого списка в div работает даже в опере.

Но если я не контролирую вложенность списков в блоки, например в блоге кто-то создаёт статью и хочет как-то необычно её отформатировать и сталкивается с такой проблемой?
Хочу прописать волшебные строчки в css и забыть о проблеме.

[moka]

Не давай возможность в блогах делать сложные структуры, усложнения также негативны для читателя.
Не вижу смысла делать вложение в div.

Да и нашёл решение твой проблемы, вот тут: http://stackoverflow.com/questions/7...nswer-12348652
Этот CSS решает проблему с мульти OL.

[Phantom]

Блог будет о программировании, где в первую очередь сам буду писать. Сейчас делаю набор css правил для распространённых конструкций при публикации статей: абзацы, заголовки, таблицы, списки и т. п. Но не хочу ограничиваться этими рамками и хочу иметь возможность использовать любой html и javascript код в статьях, если потребуется.

Решение по ссылке скоро посмотрю, будет круто, если поможет.

[Phantom]

Пример по ссылке работает во всех браузерах кроме опять же оперы. Только теперь проблема иначе проявляется. У каждого вложенного подсписка нумерация идёт обычным образом. Вот пример (смотреть в опере):

http://jsfiddle.net/BQasT/2/

P.S. Скорее бы опера уже на вебкит перешла.

[Phantom]

Прикол в том, что на сайте оперы: http://dev.opera.com/articles/view/a...-css-counters/ предлагается решение, подобное моему из первого поста. И оно работает на их примере с одним списком. Но если добавить в их код второй список, то понятное дело не работает.

[Phantom]

Кажется я придумал решение. Тестировал на списках с разной иерархией и вкладывал списки в разные блоки на разную глубину в DOM. Проблем замечено не было. Вот код CSS:

ol{
  list-style: none;
  counter-reset: num;
}

ol li:before{
  content: counter(num) ' ';
  counter-increment: num;
}

ol ol{
  counter-reset: num2;
}

ol ol li:before{
  content: counter(num) '.' counters(num2,'.') ' ';
  counter-increment: num2;
} 


Я завёл два разных счётчика. Один - для корневых списков, а второй - для вложенных подсписков. В принципе по коду должно быть понятно.

[moka]

Опера - не броузер. Они сами это признали, решив перейти на WebKit. Популярность оперы на минимуме, и только распространена в восточной Европе. И то, не так и популярен.
Тем более блог ты пишешь не для сегодня, а "завтра", когда уже выйдет WebKit версия. Следственно я бы не парился поддерживать кривость текущей Оперы.

[Phantom]

Ёпт, решение из моего предыдущего поста всё равно глючит. Когда встроил код в страницу, в которой планировал его изначально использовать, опять глюки вылезли в опере. А раньше, где-то в районе девятых версий опера была моим любимым браузером.

[moka]

Сообщение от Phantom

Ёпт, решение из моего предыдущего поста всё равно глючит. Когда встроил код в страницу, в которой планировал его изначально использовать, опять глюки вылезли в опере. А раньше, где-то в районе девятых версий опера была моим любимым браузером.

Любовь к Опере была основана на скорости? Ну это лишь за счёт их ужасного кеширования, которое всё в итоге портит.
Chrome - молодец.

[Phantom]

Мне нравилось, что она плавно пролистывала страницы, работала быстро, при попытке что-то сверстать обычно глюки вылазили в IE, а с оперой всё было нормально. Хрома тогда ещё не было, сейчас пользуюсь им.

[Randomize]

Ах вот кому нужны эти нумерованые списки, а я то всё думал

[Phantom]

В общем ни к чему более умному, чем прописать правила на пять уровней вложенности с разными счётчиками, я не пришёл. Этот быдлокод работает во всех устраиваемых меня браузерах:

ol{
  list-style: none;
}

ol{
  counter-reset: num1;
}
ol li:before{
  counter-increment: num1;
  content: counter(num1) ' ';
}

ol ol{
  counter-reset: num2;
}
ol ol li:before{
  counter-increment: num2;
  content: counter(num1) '.'
           counter(num2) ' ';
}

ol ol ol{
  counter-reset: num3;
}
ol ol ol li:before{
  counter-increment: num3;
  content: counter(num1) '.'
           counter(num2) '.'
           counter(num3) ' ';
}

ol ol ol ol{
  counter-reset: num4;
}
ol ol ol ol li:before{
  counter-increment: num4;
  content: counter(num1) '.'
           counter(num2) '.'
           counter(num3) '.'
           counter(num4) ' ';
}

ol ol ol ol ol{
  counter-reset: num5;
}
ol ol ol ol ol li:before{
  counter-increment: num5;
  content: counter(num1) '.'
           counter(num2) '.'
           counter(num3) '.'
           counter(num4) '.'
           counter(num5) ' ';
}