{"id":345,"date":"2005-12-13T10:55:17","date_gmt":"2005-12-13T10:55:17","guid":{"rendered":"http:\/\/www.stevepugh.net\/VTT\/?p=345"},"modified":"2016-01-26T15:17:57","modified_gmt":"2016-01-26T15:17:57","slug":"cross-browser-unintrusive-fieldsets-and-legends","status":"publish","type":"post","link":"https:\/\/stevepugh.net\/VTT\/2005\/12\/cross-browser-unintrusive-fieldsets-and-legends\/","title":{"rendered":"Cross-browser unobtrusive fieldsets and legends"},"content":{"rendered":"

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<\/code> with a legend<\/code>, 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?
\n<\/p>\n

Here’s the default styling (ignore the dotted box, that’s just to separate each example on this page):<\/p>\n

Text before the fieldset<\/code><\/p>\n
\nText inside the legend<\/code><\/legend>\n

Text inside the fieldset<\/code><\/fieldset>\n<\/div>\n

My mission is to get the start of all three sentences to align.<\/p>\n

First thing I tried was setting the margins, padding and borders to zero.<\/p>\n

Text before the fieldset<\/code><\/p>\n
\nText inside the legend<\/code><\/legend>\n

Text inside the fieldset<\/code>
\n<\/fieldset>\n<\/div>\n

Works great in Gecko based browsers but the legend<\/code> is still indented in Opera and IE.<\/p>\n

IE can be fixed by applying a negative left margin. This has no effect in Gecko and Opera.<\/p>\n

Text before the fieldset<\/code><\/p>\n
\nText inside the legend<\/code><\/legend>\n

Text inside the fieldset<\/code><\/fieldset>\n<\/div>\n

The margin needs to be -7px regardless of the font size set in IE (no need for ems).<\/p>\n

Opera can be fixed by making the legend<\/code> a relatively positioned element and moving it 10 pixels to the left.<\/p>\n

Text before the fieldset<\/code><\/p>\n
\nText inside the legend<\/code><\/legend>\n

Text inside the fieldset<\/code><\/fieldset>\n<\/div>\n

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.<\/p>\n

As I’m using inline styles in this example the !important hack<\/a> 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.<\/p>\n

Text before the fieldset<\/code><\/p>\n
\nText inside the legend<\/code><\/legend>\n

Text inside the fieldset<\/code><\/fieldset>\n<\/div>\n

The code:<\/p>\n

Text before the fieldset\n<fieldset style="border: none; margin: 0; padding: 0;">\n<legend style="border: none; margin: 0; padding: 0;\nposition: relative; left: -10px !important; left: -7px;">\nText inside the legend\n<\/legend>\nText inside the fieldset\n<\/fieldset><\/code><\/pre>\n
Or in more generic terms<\/p>\n
fieldset, legend {border: none; margin: 0; padding: 0;}\nlegend {position: relative; left: -10px;}<\/code><\/pre>\n
and then in an IE only stylesheet:<\/p>\n
legend {left: -7px;}<\/code><\/pre>\n
(Testing in Safari\/Konquerer still required, anyone with any other browsers is free to experiment and leave a comment with feedback.)<\/p>\n
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.<\/p>\n
Finally, IE makes the text of the legend<\/code> blue by default. You don’t need me to tell you how to fix that.<\/p>\n","protected":false},"excerpt":{"rendered":"
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?<\/p>\n
Continue reading this very true thing<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[15],"tags":[74],"class_list":["post-345","post","type-post","status-publish","format-standard","hentry","category-www","tag-css"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1fxq5-5z","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts\/345","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/comments?post=345"}],"version-history":[{"count":1,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts\/345\/revisions"}],"predecessor-version":[{"id":3030,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/posts\/345\/revisions\/3030"}],"wp:attachment":[{"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/media?parent=345"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/categories?post=345"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevepugh.net\/VTT\/wp-json\/wp\/v2\/tags?post=345"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}