When the Legend Won't Wrap – One Solution

I've just returned from over six weeks on the road (12 locations all over the globe). Needless to say, I've been scarce around these parts of late. I'm hoping to start remedying that.

While attending one of the conferences, I was discussing creative, problem-solving techniques with an attendee, and mentioned a method I'd recently employed for legends that won't wrap in some browsers. They mentioned that these types of creative tips should be blogged and, well, I'd truly intended to blog it here for others who run into the same problem. I found precious little written on it when I was searching for a solution. I figure it's better late than never.

Many of you understand the accessibility and organizational reasons for using the fieldset and legend elements. I was recently coding a site that had a large number of forms. I was using fieldset and legend to organize and group the information. The copy written was very off-the-cuff, conversational and fresh. I liked it. But occasionally, the amount written (and used as the legend) needed to wrap to a second line. Enter the problem.

I found that the wrapping behavior varies from browser to browser. On a Mac, legends wrap automatically in Opera, Safari, and Explorer. They do not wrap in Netscape, Mozilla, and FireFox (obviously the Moz-based browsers). On a PC, they don't wrap in Netscape, Mozilla, FireFox, or Internet Explorer. This means that you either have the div containing your legend pushed wider and overlapping your other divs, or, in the case of IE, it can cause float drop. You can place a break element into the legend to randomly force the text to a new line. However, once the text size is larger, and you're viewing with a browser that does allow the legend to wrap, you get a horrid stacking of the legend. It wraps automatically and then again where you placed the break element. Unsightly.

Several suggestions were made on a list I'm a member of. One was to put a width on the legend (which didn't work in all browsers). The other was to make the text within the legend extremely short and then place the longer question/comment directly below it before the form controls contained by the fieldset. That, however, isn't a good option either (even if I did want to change my clients interesting way of wording things). Once Assistive Technology (AT) enters forms mode, it doesn't read elements not marked as form elements (like paragraphs, lists and headings). So though it was an interesting idea, it was sub-optimal and nixed as well.

Finally, after much discussion, Mike Moore (on the WebAIM list) and my friend Derek Featherstone (by IM), put me on the right track. The answer lies in placing a span element directly inside the label element – <legend><span>Text within it</span><legend>. Then, create a rule (something like – #divName legend span) which includes display:block (since a span is inline by default), the width you need, along with your other styling. Works perfectly in all the major browsers. So there you have it with many hat tips to my friends.