WebAIM - Web Accessibility In Mind

E-mail List Archives

Legend wrap (or not)

for

From: Stephanie Sullivan
Date: Aug 27, 2007 10:10PM

I've got a conundrum and I've googled with nothing recent that
appeared in the results... I thought I'd request the opinion of the
group here...

I'm coding an application that has several form pages... We've marked
them up semantically with fieldset/legend groups and label/input
pairs... The overall layout and most elements are coded in em
units... and all is mostly well (as forms that vary from browser to
browser can be)... My instructions are that they do not have to be
EXACT, but should be consistent. And for the most part, that's working.

My problem enters with the legend. In some browsers, it wraps. In
some it doesn't. In some I can force the wrap with a width. In some I
can't. <sigh /> When I can not, it forces the form to wider widths
and messes up my page rendering. I've been unable to come up with a
solution that doesn't require me to use a <br /> element within the
legend itself at a logical place. And quite frankly, that's not
really lovely either ... even though it's rare it needs to be used,
in some browsers, due to em units I suppose, the wrap happens
naturally, and then the break happens after (causing a stacking
effect that is unattractive... so far, it's mainly Safari I've seen
this in -- I'm sure due to its different rendering of default text
size).

I'd really like to stick with the fieldset/legends and not move into
headings instead. I considered classing the <br /> and then
attempting to hack for Safari so that the break is not rendered
(though I don't see anything at centricle that will allow me to show
Safari something that Moz-based browsers can't see... but I feel like
I read something somewhere sometime. I just rarely need to hack
Safari). But gracious, I've been able to code this thus far with
nothing but a small IECC. Isn't there a more graceful way to solve
the legend issue? Any opinions?

Ciao,
Stef.
---
Stephanie Sullivan
http://www.w3conversions.com
Dreamweaver Task Force for WaSP
http://www.communitymx.com