Articles/A <fieldset> experiment
References:
(April 20, 2004)
Playing with a form that had a <fieldset> in, and a <legend> defined, I found browsers (Windows versions only for me) handle it a little different, when a background gets applied. Nothing major, not even painful, just something I explored since I wanted it to look as in Mozilla in all browsers. I was after a very specific effect, but let’s check a basic form using both, borders and colors clearly set. See if we can get that to display good in both Mozilla, IE and Opera:
Html part:
<form method="get" action="" id="fieldset_test_#">
<fieldset>
<legend>legend</legend>
<label for="txt" class="label_hide">Text:</label>
<textarea name="txt" id="txt" rows="4" cols="50"></textarea>
<label for="push" class="label_hide">Push:</label>
<input type="submit" name="push" id="push" value="input" />
</fieldset>
</form>
And - only - the relevant css:
fieldset {
border: 1px solid #A88;
padding: 10px;
background: #422;
}
legend {
border: 1px solid #A88;
background: #200;
padding: 5px;
color: #A88;
}
Here's how it displays in IE6 (and IE5.x, though following fixes behave weird in 5.0 and are only acceptable in 5.5), Firefox 0.8 (but alike in any Mozilla variation dating 2 years back) and Opera 7.11 (no history accounting being done here, Opera (and Moz) users should know they should upgrade once in a while):
While I can't find much on what’s correct behavior, Mozilla obviously does the natural thing here. Background color is limited to the area bordered (though technically, part above is part of the fieldset), and start of legend is guided by the padding set for the fieldset (which, I reckon, is technically the only right way). Also, I don't see a reason why the legend should have that 1px margin…
Anyway, at the time I was exploring adding some non-form information in boxes alike this, considered using fieldset for those too, then found Simon Willisons experiment, linked above. Which learned me, don't use <fieldset> for things not a form (just relying on his experience ;), and I noticed he used “position: relative” to position the fake legend. Experimenting, that ended up setting “position: relative” for both <fieldset> and <legend> (if you don't do both, IE shows a gap in top border of fieldset on the right (?!), Opera does the job when only set at legend). Then, set “top: -25px;” for the <legend>. Result, background color confined within borders, working in both IE and Opera.
Found this discovered already, later on, on some forums that won’t let me link them directly, so no claims on originality here ;).
Also, initially I made it work with “margin-top: -25px;”. Works.
25px, Apparantly that absolutely defined in these browsers. Font-size, line-height and more don't affect this number. It seems only related to the padding of the <legend>; that might be reason you need to use another value.
Now, if you browse with Mozilla, you'll find example 2 ruined by these extra values… It would be best to serve them only to IE and Opera. But checking the most complete resource on css hacks, that's hard. Not really recommended, I guess, but a correction for Mozilla is most easy, it's the only one to support the css3 :root pseudo-element:
:root legend {
margin-top: 0;
}
Example 3 should display fine in Mozilla too (no difference with #2 in IE and Opera).
Notes:
- Opera does display its default inversed 2px border for <fieldset> when border is set to “border: 0” or “border: none”. Use a 1px solid border with backgroundcolor or define as such: “border: 0 solid #anycolor”;
- Didn't resolve the left & right 1px margin of the legend in IE - it doesn’t seem te react to anything;
- Another annoying little thing, my example input button doesn’t align nicely with the right padding, only in Opera.