{"id":2258,"date":"2011-01-23T19:51:23","date_gmt":"2011-01-23T19:51:23","guid":{"rendered":"http:\/\/sunpig.com\/mt-entry-2258.html"},"modified":"2011-01-23T20:31:09","modified_gmt":"2011-01-23T20:31:09","slug":"fieldset-and-legend-formatting","status":"publish","type":"post","link":"https:\/\/sunpig.com\/martin\/2011\/01\/23\/fieldset-and-legend-formatting\/","title":{"rendered":"Fieldset and Legend formatting"},"content":{"rendered":"\n

demo page<\/a><\/p>\n

<fieldset><\/code> and <section><\/code> elements can both
\n be used to break up a large whole (a form or a document) into smaller,
\n logically grouped chunks. Semantically, a <section><\/code> element is very flexible,
\n but a <fieldset><\/code> is much more restrictive. Although you can put a <hn<\/i>><\/code>
\n element somewhere inside its body to give it a title, the proper way to indicate the caption of a fieldset is to use
\n a <legend><\/code>. This is where the problems come in, because <legend><\/code>
\n is a pain in the arse to style.<\/p>\n

For a start, browsers refuse to style a <legend><\/code> as a block, which means that you can’t
\n easily apply a background and border that stretches across the whole width of the <fieldset><\/code>
\n it is captioning. Secondly, browsers have a set of special non-overrideable positioning rules for <legend><\/code>
\n that are designed to make it float in the middle of the border around the <fieldset><\/code> — see below.<\/p>\n

<\/p>\n

Furthermore, you can’t just wrap the <legend><\/code> in a <header><\/code>, because
\n the spec says that the
\n <legend><\/code> has to be the first child element of the <fieldset><\/code><\/a>.
\n Oh, and you can’t just put a block-level <header><\/code> inside<\/em> the <legend><\/code>
\n either, because a <legend><\/code> may only contain phrasing content<\/a>.
\n (You can<\/em> put a <span><\/code> in there and then apply display:block<\/code> to the span; this is a significant part of the workaround. But you have to be careful with positioning the element when its content wraps over multiple lines.)<\/p>\n

The reason I’m looking for a workaround in the first place is this: I’ve got an application
\n where edit screens are divided up into chunks, some of which contain groups of fields,
\n and some of which contain lists. Their HTML content is different, but visually I want their blocks
\n to be styled essentially the same way — see image below.<\/p>\n

<\/p>\n

Additional requirements:<\/p>\n