WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Radio Buttons Again!

for

From: Derek Featherstone
Date: Oct 20, 2003 8:26AM

> >> Unfortunately, I haven't figured a good method for contorting the
> >> caption element for a fieldset using CSS so it appears on the same line

> >> as the radio buttons.
>
> We looked at this too. Seems no modern browser is allowing <legend> within
a
> <fieldset> to be styled. Seems quite crude right now. Something to explore
> again in 2+ years I imagine.

This barebones code gives varying results (haven't tested on Mac or Linux),
but seems to allow for *some* styling that is close to what you'd like...
And of course, YMMV, and depends on whether or not you are using table for
form layout, or floated divs etc... Note the <br /> after the legend is only
in there as it seems to be a necessity in Moz and Opera for keeping the
radio options together...

<form action="foo" name="testform" id="testform">
<fieldset style="margin-left: 120px; border:0px solid #ffffff;">
<legend style="display: block; font-weight: bold; background-color:
#ffffff; color: #000000; float: left; position: relative; left: -7em; top:
1em;">More Options</legend><br />
<div><input type="radio" name="test" id="t1" /><label
for="t1">Option 1</label></div>
<div><input type="radio" name="test" id="t2" /><label
for="t2">Option 2</label></div>
<div><input type="radio" name="test" id="t3" /><label
for="t3">Option 3</label></div>
</fieldset>
</form>

Best regards,
Derek.
--
Derek Featherstone <EMAIL REMOVED>
Web Accessibility Specialist / Co-founder of WATS.ca
Web Accessibility Testing and Services
http://www.wats.ca 1.866.932.4878 (North America)



----
To subscribe, unsubscribe, suspend, or view list archives,
visit http://www.webaim.org/discussion/