* Dave Thomas (Dave / PragmaticProgrammer.com) wrote:

> Thomas Hurst <tom.hurst / clara.net> writes:
[icky Amazonish URL's]
> I'll be producing a flat version when I get the chance, and you
> paranoid folks will be able to point to it.

Heh, goodo.

And the word isn't "Paranoid", it's "Anal", or "Obessive-Compulsive",
or, if you like, "Insomniac" ;)

> I have to say that Iowa was a joy to work with.

I'll have to get my barge pole out and see if it can be persuaded to use
cookies.. and then, only if it really needs to save state :)

> > The tag soup needs looking at too.  For instance, that abuse of
> > tables to produce an ordered list is, I'm afraid, sending you to
> > markup hell :)
>
> Ah - but it isn't an ordered list. It's just coincidence that the
> numbers go up by ones...

Yes.. actually, it did occur to me that the default rendering of lists
would not result in the leading number in the individual sections.

> The main reason for the table there is to make the text part line up,
> something that seems to be hard to do when the leading numbers change
> length. However, I'm an HTML ignoramus, so I'm sure there must be a
> better way.

Well, lists are designed to handle this for you.  It is rather
unfortunate that they are not particularly aimed at rendering exactly
like how you use them.. hm.

I think the best way to do it without being able to use the CSS content
generation model (because IE doesn't support it) and CSS generated lists
(because Mozilla doesn't support it), is to use a definition list:

    <dl>
        <dt>1.1.</dt>
        <dd>Answer 1.1</dd>
        <dt>1.10.</dt>
        <dd>Answer 1.10</dd>
    </dl>

Not quite there, since the default rendering is something like:

    1.1.
        Answer 1.1
    1.10.
        Answer 1.10

So we float the term to the left of the content, like so:

    dt {
        float: left;
    }

Resulting in:

    1.1.  Answer 1.1
    1.10. Answer 1.10

Then to make sure there's enough room for at least 1000 questions
without the elements shifting:

    dd {
        padding-left: 1em;
    }

Leaving:

    1.1.    Answer 1.1
    1.10.   Answer 1.10

See, HTML has design methodologies too :)

Now, add a few more headings (make that <td class="pagetitle"> into a
<td><h1> or so, for instance) and use <label for="[element id]"> in the
forms, add a doctype, and fix the validation errors, and you're most of
the way to a pretty decent document that satisfies quite a few of the
WAI guidelines.

After that.. XHTML and pure CSS layout.  <cackle />.

-- 
Thomas 'Freaky' Hurst  -  freaky / aagh.net  -  http://www.aagh.net/
-
Enjoy your life; be pleasant and gay, like the birds in May.