When the Legend Won't Wrap – One Solution

by Stephanie Rewis on November 5, 2007

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. :)

{ 16 comments… read them below or add one }

Virginia November 5, 2007 at 6:13 pm

Great tip, Steph. Thanks.

Good to see your face on the front page of the SXSWi conference newsletter as one of the speakers this year. I’m looking forward to seeing you there.

Stef. November 5, 2007 at 9:33 pm

Thanks Virginia – just got mine today. Wowzers! ;) See you there for sure!

Jon Upton November 16, 2007 at 11:41 am

Hi Stephanie

It was good to meet you in Birmingham (UK). The tips you and the Adobe people gave have already come in to play.

I look forward to your books release.

Best regards


matt December 3, 2007 at 4:47 pm

Thanks for the tip. This definitely saved me some time. Originally i had tried setting the legend to block but that caused other issues.

Thanks again

Jeffro January 11, 2008 at 11:14 am

It is much easier and more widely supported to use a tag in the legend with the width style set. ;)

Jeffro January 11, 2008 at 11:15 am

Ok my tag was read as html. I said use the p tag.

Stef. January 11, 2008 at 11:48 am

There’s a problem with using the P element – even if it’s “widely accepted.” ;)

The P element is a block element. The legend is an inline element. You can’t place a p (block) inside a legend (inline). The span is inline, and thus, it can be legally used.

Hope that explains why I did it that way. :)

Dan February 25, 2008 at 11:42 am

Cheers for the tip! Have been struggling with this one for years – can’t believe it was so easy… :P

Atus June 18, 2008 at 6:26 am

I have recently applied the technique on a page, worked out well in all browsers, except in FireFox 3, where I could not force the content to wrap within the legend/span. Any suggestions?

Stef. July 4, 2008 at 1:03 am

Wow. Yes Atus, you’re correct. I’m seeing the same behavior. :(

So first we had an issue that a fix was found for — and now, the new version breaks the fix, but doesn’t solve the problem.

I did not find a bug filed for it, so I am doing that now. I HOPE they will see the severity of this and fix the behavior. Thanks for the heads up!

Stef. July 5, 2008 at 1:43 am

Hi Atus… here’s the fix (blogged here): http://www.communitymx.com/blog/index.cfm?newsid=923



Atus July 7, 2008 at 11:42 am

Stephanie, thanks for your time and effort. Glad to have a solution.

Andrew March 20, 2009 at 10:03 am

It truly is annoying how legends do not wrap. The nested span is the only method I have discovered that works in IE and FF3,

but what I have just discovered is it still doesn’t fix the problem in FF2 if your legend/span has a width of 100% inside a fluid container! Sadly it requires a fixed width on the legend to work, which is not ideal within a fluid site :-(

Stef. March 24, 2009 at 2:41 am

Hey – so have you tried 95-99%? I haven’t played with percents, but I’m happy to if that doesn’t work. Let’s see what we can do. :)

Andrew March 24, 2009 at 12:08 pm

FF2 is the only culprit here. It will only wrap with a px/em width – a percentage is totally ignored.

I have been forced to insert line breaks although Im considering making the legend a page heading.

Stef. March 24, 2009 at 7:30 pm

I just played around and tried several things including max-widths. No go. :(

Two things to keep in mind:

1. If you’re going to change to a heading, placing it inside the form will make a person using “forms mode” with their AT (to read your form) NOT speak that heading. If you place it outside, I believe it will but it won’t be linked with the form like a legend will.

2. Have you looked at the sites stats? Do you actually HAVE FFOX2 users? My personal belief is that people that use FFOX tend to upgrade much quicker than IE users. I could be wrong.

Good luck!

Leave a Comment