Formatting HTML lists using CSS
- by pwaring
I'm trying to recreate list in HTML which has clauses and subclauses like this:
1. Main Clause
(a) Sub clause
(b) Sub clause
2. Another main clause
(a) Sub clause
The problems I'm running into are:
If I use the existing HTML elements (ol and li) there doesn't seem to be a list style for (a) - I can have a. b. c. or A. B. C. but not (a) (b) (c).
If I don't use the existing HTML elements and start using span tags, then if a subclause runs beyond the end of the line it appears underneath the clause number, rather than being indented.
Like so:
(a) Very long subclause
which goes over one line
when what I really want is the behaviour from lists, which is:
(a) Very long subclause
which goes over one line
Is there any way to get round these two problems at the same time? I'd prefer to use semantic HTML and CSS for styling, but having the clauses spaced correctly is more important than doing things 'the right way'.
I may need subsubclauses at some point (i.e. (i), (ii) etc.), so I can't assume that (a) will be the maximum clause depth.
