Cross-browser unobtrusive fieldsets and legends

I was tidying up some web pages (Goodbye single column table, hello unordered list; goodbye multiple level one headings, hello heading hierarchy) when I came across a heading followed by a group of checkboxes. Looks like a fieldset with a legend, I thought, but the page design really wouldn’t be helped by the default presentation of these elements in most browsers. So how make to make these elements completely unobtrusive?

Here’s the default styling (ignore the dotted box, that’s just to separate each example on this page):

My mission is to get the start of all three sentences to align.

First thing I tried was setting the margins, padding and borders to zero.

Works great in Gecko based browsers but the legend is still indented in Opera and IE.

IE can be fixed by applying a negative left margin. This has no effect in Gecko and Opera.

The margin needs to be -7px regardless of the font size set in IE (no need for ems).

Opera can be fixed by making the legend a relatively positioned element and moving it 10 pixels to the left.

This also affects IE, but as the difference is 7px vs 10px we need to apply different styles to different browsers. Conditional Comments are handy here, or any number of CSS hacks.

As I’m using inline styles in this example the !important hack works. With IE7 around the corner we need to take care with CSS hacks that distinguish between IE6 and better browsers (hacks that distinguish between IE5.x on the one hand and IE6/better browsers on the other are still safe) so in a real example Conditional Comments would be preferable.

The code:

Text before the fieldset
<fieldset style="border: none; margin: 0; padding: 0;">
<legend style="border: none; margin: 0; padding: 0;
position: relative; left: -10px !important; left: -7px;">
Text inside the legend
</legend>
Text inside the fieldset
</fieldset>

Or in more generic terms

fieldset, legend {border: none; margin: 0; padding: 0;}
legend {position: relative; left: -10px;}

and then in an IE only stylesheet:

legend {left: -7px;}

(Testing in Safari/Konquerer still required, anyone with any other browsers is free to experiment and leave a comment with feedback.)

There is an issue with Gecko browsers. If the text size is changed on the fly then the relatively positioned legend is misplaced on the page. A reload fixes things but the best solution is the make sure that your text doesn’t need resizing by always using the users preferred text size anyway.

Finally, IE makes the text of the legend blue by default. You don’t need me to tell you how to fix that.