Experiment
In Form
Date created
18 March 2004
Date last modified
25 March 2004
Discussion
Visit the discussion

The biggest problem presented when styling a fieldset and its associated elements is the legend tag. In IE and Opera, the legend expands the height of the fieldset, and not its border, effectively extending the content area outside the border. If you place a background colour on the fieldset it looks like someone didn't colour within the lines.

Alternatively, if you wish to remove the borders and just have a background colour, Mozilla positions the legend half in and half out of the content area – it now looks like someone couldn't write inside the box. It's easy enough to move the legend inside the box for IE and Opera; just add some padding to the fieldset.

The only way to get cross-browser consistency is to remove the legend tag and replace it with a heading tag (or whatever other semantic element you think fits). It styles great, but you've just thrown accessibility out the window – there's no link between the fieldset's title and the fieldset, blind users won't be able to make the association easily. Your choice.

The Simply Coloured Fieldset

Payment details
Credit card

The Fieldset with no Borders

Payment details
Credit card

The Fieldset with H3s

Payment details

Credit card