CODEWITHSUNDEEP
javascriptcssinternet-explorer-7counter
sotix
sotix

Reputation: 822

nested CSS counters in IE 7 without lists

I have the following HTML-code-structure (example):

<p paraclass="M">Some Text</p>
<p paraclass="A1">enum 1</p>
<p paraclass="A1">enum 2</p>
<p paraclass="A2">enum 2.1</p>
<p paraclass="A2">enum 2.2</p>
<p paraclass="A1">enum 3</p>

and want it to be rendered like this:

Some Text
1 enum 1
2 enum 2
   2.1 enum 2.1
   2.2 enum 2.2
3 enum 3

This works great with CSS-pseudotag like:

p[paraclass="A1"]:before{
   content:counter(A1);
   counter-increment:A1;
   counter-reset: A2;
 }

Unfortunatly this doesn't work in IE7.
What is a good solution for this to work in IE7 without changing the HTML?
For a JS solution I have all the information about the counters I need (like the Id's, what counters they reset and what list-style-type they have). Is there a better/easier way? And if not, how can I use counterstyles like "lower-roman" without implementing them myself?
Note: jQuery 1.6.2 can be used.

Upvotes: 0

Views: 206

Answers (1)

thobens
thobens

Reputation: 1731

First of all, your HTML is not valid. The paraclass attribute must be renamed to data-paraclass in case you're developing with HTML 5, or add a namespace if you're developing with XHTML.

Second, the <p> element is not thought to be displayed as a list. Therefore I'd like to encourage you to use the <ol> element, since it is designed especially for this purpose and supported by all browsers.

Upvotes: 2

Related Questions