Sent by Simon Willison on 26 July 2002 12:12
At 11:33 26/07/2002 -0400, Kevin Smith wrote:
>On 07.26.2002 10:36 AM, Tim Parkin wrote:
>
> > Try going to csschallenge.com and build that using css..
>
> <http://centricle.com/csschallenge/>
>
>It's not complete, and I've only tested on MacIE5 & Mozilla, but you get the
>idea. I don't have a whole lotta time to put into it, but it's a logical,
>accessible document that took me less than 30 minutes to hack together.
While that is a great example of a logical, accessible document styled with
CSS, it misses out on the most important part of the challenge - adding the
extra information above and below the radio buttons. I had a quick play
around myself and that was the aspect that eventually stumped me - I tried
the logical method of using <label> for the radio button labels and
position: relative to move them under the buttons but unfortunately that
left gaps between the radio buttons where the numbers would have been, as
position: relative leaves the element in place (thus taking up space) and
only changes where it visually appears.
The only way I can see of doing those radio buttons in exactly the same way
as the original is with a table (perfectly acceptable for that purpose in
my opinion but goes against the nature of the challenge) or using absolute
positioning, which feels like a bit of a cheat. I can see that being able
to show labels underneath radio buttons would be a very useful technique
for general form design - anyone got any ideas how to achieve it in CSS
without running in to the problems I had?
Cheers,
Simon Willison
