Использование CSS «содержимого» для стилизации иерархического вложенного списка

У меня небольшая проблема с использованием свойства css "content" для создания упорядоченного списка, стилизованного для отображения с использованием десятичных знаков для более глубоко вложенных элементов. То, что я пытаюсь сделать, кажется очевидной задачей, но я еще не преуспел, и я сталкиваюсь с некоторыми проблемами кроссбраузерности, но я не могу найти много ковыряния в Интернете ... Что я Я пытаюсь сделать это довольно четко изложено на изображении, которое я прикрепил в конце этого вопроса.

Мой CSS:

ol {list-style:none; font:11px arial; margin:0px 0px 0px 10px; padding:0;}

ol li:before {
        content: counter(num) ". ";
        counter-increment: num;
        counter-reset: sub_num;
}

ol ol li:before {
        content: counter(num) "." counter(sub_num)  " ";
        counter-increment: sub_num; 
        counter-reset: sub_sub_num;
}
ol ol ol li:before {
        content: counter(num) "." counter(sub_num)  "." counter(sub_sub_num) " ";
        counter-increment: sub_sub_num; 
        counter-reset:none;
}

Мой HTML:

<ol>
    <li>Level 1 - should be '1.'</li>
    <li>Level 1 - should be '2.'
      <ol>
        <li>Level 2 - Should be '2.1'</li>
        <li>Level 2 - Should be '2.2'
          <ol>
            <li>Level 3 - Should be '2.2.1'</li>

            <li>Level 3 - Should be '2.2.2'</li>
          </ol>
        </li>
      </ol>
    </li>
    <li>Level 1 - should be '3.'
      <ol>
        <li>Level 2 - Should be '3.1'</li>
      </ol>
    </li>
</ol>

Мои результаты

К сожалению, CSS не увеличивает значение переменной num

counter-increment: num;

ни в одном браузере, и Chrome не увеличивает значение sub_sub_num

counter-increment: sub_sub_num; 

Я немного сбит с толку, поскольку кажется, что все браузеры внутренне несовместимы с тем, как они обрабатывают стили (почему все браузеры игнорируют приращение num, но принимают приращение sub_num?), И это немного удивительно. firefox и ie имеют такое же поведение, тогда как chrome, кажется, справляется с этим особенно плохо (я привык, то есть быть странным человеком).

Вот изображение с выходными данными моего образца для ff8, chrome16 и ie8, которое показывает результаты, которые я вижу, вместе со строкой пользовательского агента:

Я просто что-то упускаю, или это понятная проблема ? Есть ли какие-нибудь хорошие реализации?