Comments on: When the Legend Won't Wrap – One Solution

By: Stef.

Stef. — Tue, 24 Mar 2009 23:30:46 +0000

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!

By: Andrew

Andrew — Tue, 24 Mar 2009 16:08:06 +0000

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.

By: Stef.

Stef. — Tue, 24 Mar 2009 06:41:40 +0000

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.

By: Andrew

Andrew — Fri, 20 Mar 2009 14:03:20 +0000

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

By: Atus

Atus — Mon, 07 Jul 2008 15:42:56 +0000

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

By: Stef.

Stef. — Sat, 05 Jul 2008 05:43:09 +0000

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

Ciao,

Stef.

By: Stef.

Stef. — Fri, 04 Jul 2008 05:03:02 +0000

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!

By: Atus

Atus — Wed, 18 Jun 2008 10:26:48 +0000

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?

By: Dan

Dan — Mon, 25 Feb 2008 15:42:48 +0000

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

By: Stef.

Stef. — Fri, 11 Jan 2008 15:48:56 +0000

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.