Comments on: Legends of style

By: User interface development on the web: Using the fieldset tag with good reason

User interface development on the web: Using the fieldset tag with good reason — Fri, 19 Feb 2010 10:35:17 +0000

[…] I want to be able to hide the legend, because it can be very unreliable to attempt to style one appropriately across all browsers.[…]

By: CSS Reset

CSS Reset — Sat, 19 Dec 2009 22:30:47 +0000

[…] You might remember earlier in the article that I touched on the subject of fieldsets and legends being something that I like to deal with slightly differently. Currently they’re practically impossible to style consistently across multiple browsers so I like to use John Faulds method which you can read more about on his website in the article Legends of Style. […]

By: Ben

Ben — Fri, 14 Aug 2009 17:05:25 +0000

Hey John — Just wanted to thank you for this excellent article. Saved me a lot of pain!
Ben

By: links for 2009-06-26 « sySolution

links for 2009-06-26 « sySolution — Fri, 26 Jun 2009 15:01:19 +0000

[…] Legends of style — Tyssen Design (tags: forms legend) […]

By: Focus on Forms » Rachael L. Moore

Focus on Forms » Rachael L. Moore — Tue, 23 Jun 2009 00:17:08 +0000

[…] http://www.tyssendesign.com.au/articles/css/legends-of-style/ […]

By: Aaargh! Styling Fieldsets & Legends | Blog - Gareth53.co.uk

Aaargh! Styling Fieldsets & Legends | Blog - Gareth53.co.uk — Fri, 24 Apr 2009 19:30:12 +0000

[…] http://www.tyssendesign.com.au/articles/css/legends-of-style/ […]

By: Beckism.com .:. Display: block and form legend elements

Beckism.com .:. Display: block and form legend elements — Sat, 13 Dec 2008 16:54:46 +0000

[…] of puking a bunch of crap all over my lovely webpage. Specifically, John Faulds provided some basic concepts and examples for styling legends and Stephanie Sullivan wrote up the strategies for encouraging legend wrapping in Firefox 2 and 3. […]

By: Duplicate Content Bug, IE6 and IE7

Duplicate Content Bug, IE6 and IE7 — Tue, 30 Sep 2008 13:50:56 +0000

[…] form has floating divs, each wrapping a label-input pair, Tyssen-style. Two consecutive divs have been set to display: none just as they would be set by Jabba-da-Script. […]

By: John Faulds

John Faulds — Sat, 23 Aug 2008 00:57:31 +0000

@Rlively: it's invalid because the legend needs to be the first child of the fieldset, so this:

is incorrect. You could do:

but for the purposes of positioning the legend, it needs to be contained within a div. Validator results

By: rlively

rlively — Fri, 22 Aug 2008 18:44:57 +0000

Regarding this statement in the entry:

The div also needs to wrap the fieldset and not the other way around because then the HTML would be invalid.

Are you sure that is an accurate statement? The only thing I could think of that would make that invalid is if fieldsets could not contain block-level elements, but according to SitePoint and W3C, they can:

http://reference.sitepoint.com/html/fieldset

Type
block-level element
Contains
block-level elements, inline elements

Also, I just tested it out and validated it on http://validator.w3.org, and it validated as XHTML 1.1 Transitional just fine. So what makes you think that wrapping a div in a fieldset is invalid HTML?