When the Legend Won't Wrap – Revisited for Firefox 3

Back in November, I wrote a blog post explaining a fix for the poor and varied rendering you will get with a wordy legend that forces its containing fieldset to be wider than you've specified. You can read more details in the previous post. In a nutshell, it involves placing a span within the legend. Since a span (and a legend) are inline, the span won't render the width until you change its display to block. The styling is then applied using a descendent selector – legend span. (The span within the legend technique is demonstrated here.)

And all was well in the world of cross browser fixes — until the birth of Firefox 3. The changes made to FFOX 3 mean the span technique now fails in that browser. (Thanks to Atus for the heads up.) The behavior of FFOX 3 continues to be a legend that doesn't wrap. However, instead of making the fieldset wider, the legend now protrudes out the right side of the fieldset. (If you view the file linked above with FFOX3, you'll see that the span does render at the width specified in the selector – but the content within continues and protrudes to the right, until it ends. Unsightly to say the least.)

Just one more declaration

After filing a bug at Bugzilla, I was told that the changes made were to keep the original rendering for those that prefer it, but to now offer a fix (without the span technique) for those that desire more control. Certainly progress is a good thing. Using the white-space:normal declaration within the legend rule causes FFOX3 to actually wrap the text. So YAY for that! (Thanks a bunch, Philippe.) However, this of course, does nothing to FFOX2 or any other browser with the non-wrapping issue. So BOO for that.

If you want to support browsers with the non-wrapping issue, you'll still need to add the span within the legend. However, to support FFOX3, you'll need to add the white-space property to either the legend or legend span selector. In my testing, both will work. This fix for FFOX3 does not affect any other browser negatively – but it doesn't fix any of them either. (View the page with the white-space in the span selector. View the page with the white-space in the legend selector.)

To me, the bigger conversation is, why the blank can't we get some form rendering that actually makes it easier to more consistently mark up and render forms? I'm sure someone can tell me where my thinking is going wrong — but a legend is an inline element. An inline element doesn't accept a width. I'm good with that. But when paired with the fieldset, it's parent that does have a width, why is it not contained? Why in some browsers does it force the fieldset wider than we've specified. I don't think inline elements should have that much power (especially since it must not be white-space:nowrap declaration causing the increased width for the other browsers since the FFOX3 white-space: normal fix doesn't work for them)! And why, in FFOX3, does the content in the span (contained in the legend) not react to the styling given to the legend span selector? The span itself does, but the text within runs out the right side of it. I know someone will say because in the Moz style sheet, the legend is set to white-space:nowrap. I see that, but WHY was that the fix/change given when none of the other browsers seem to be handling it in that way? Inquiring minds want to know! (I mean, when exactly would you want the legend to overrun the fieldset and not wrap? And couldn't you just add white-space:nowrap when you did?)

(Update) Philippe and Boris essentially explain it this way: A legend is not actually an inline element. A fieldset/legend pair are treated as replaced elements. Just like the form controls they contain (Boris explained that the reason has to do with the way borders have to work). Thus, they can't really be described with CSS. Philippe pointed out that in the conformance section of the specs, it says, “CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.” So I suppose what it boils down to is – this is what we've got for now.

For those wondering and dreaming of the great beyond – thinking about what's on the horizon with Internet Explorer 8 (currently in the beta), it's fine with the "span technique" and it's not bothered by the added declaration of white-space:normal. However, unlike IE6 and IE7, it's placing the legend down, below the top border of the fieldset – instead of halfway over it like the other browsers do. But it's still in beta. I'll worry about that little issue, if it still remains, later.