styling a dynamic/manual ordered list with uniform indentation?

xhtml strict css ol ordered list indent

[jfjet]

The "start" attribute is deprecated in XHTML Strict, how can I make an ordered list that starts with a custom number (generated dynamically via CGI/php/jsp/...)?

I have a long survey to break down into multiple pages, but I'd need the numbers to be continuous. If I put the question numbers inside the <li> tags, how can I get the question to indent neatly after the number as if it's a "real" ordered list even when the question text wraps?

And also to make sure all the questions indent the same amount of spaces/margins/paddings regardless whether the question# is 1, 2 or 3 digits long?

example:

<ul>
<li><span/div/(whatever block level tag)>1</whatever>What's your problem?</li>
<li><whatever>11</whatever>Have you seen a doctor?</li>
<li><whatever>111</whatever>What is the diagnosis?</li>
</ul>

Thank you all!

[zollerwagner]

I've wondered about the start problem, too. I'll be interested in seeing if others have a solution. You may have to fake the look of a list by assigning classes and typing in the numbers you need.

List indentation seems to be inconsistent, but you can get pretty decent results, I think by declaring a right margin and/or padding on the li element. I think I recall that I've sometimes had to declare both a margin and padding to get it to work.

You can get a hanging indent look by giving a negative text-indent and positive (usually) padding or margin. on the same element.

Hope that helps.

[jfjet]

Try to make hanging indents by applying negative margins doesn't work very well in this case, because the item number could be any number of digits from 1 to 3. If I define 1em, then the question with a 2-digit question number doesn't move to the left enough, and vise versa.

It's such a headache. I don't feel deprecating the "start" attribute in XHTML Strict <ol> is the way to go. I think "start" is more about content than presentation, because it does have a semantical meaning for the list item.

[zollerwagner]

You're right about different numbers of digits causing different indents. Sort of lame. It's one of the details that convinced me to go along with the idea that web design wasn't meant to be pixel perfect.

You may want to look at some different css properties: content, counter-increment, and counter-reset. I assume that these would not work on the earlier browsers.

It appears that the css counter and content, which are part of CSS2's "generated content" features, are meant to replace the HTML start property.

To get the kind of flexibility that you need, though, I'd guess that you'd have to use some other tag besides <ol> (like <h3> or <p>) to attach the generated content to. This would allow you to have all kinds of block elements between your numbered items.

If you're using a doc type of HTML 4.0 Transitional or HTML 4.0 Frameset (but not HTML 4.0 Strict), using the deprecated START may be reasonable. Otherwise, I'd try with counter and content.