Getting Fieldset Backgrounds and Legends to Behave in IE

I’m sure someone has posted on this issue before I just haven’t found an answer I’m looking for. Jeff Croft has a close answer, but he is trying to solve a different problem. I built off of his exploration for this solution.

The “problem” occurs when you are building a form with a fieldset tag and a legend tag, and then style the fieldset with a background color like so:

HTML

<

fieldset>

<input ... />
<input ... />

CSS

fieldset{
background: #ccc;
}

Proper rendering (in every browser but IE is close to this: (this specific screenshot is from Firefox)

IE does something a little different: it causes the background color to be applied to the legend as well, mysteriously causing the background color to “spill” out of the fieldset.

The solution is to dissociate the legend tag from the normal flow of the document. That is, absolutely position it. Here’s how: (Since IE is the only browser that needs help with this, we are going to use the Holly Hack, so it only applies to IE)

1. Give the fieldset a position: relative; to make sure we are positioning the legend tag relative to the fieldset.

    * html fieldset{
    position: relative;
    }

1. Give the legend a position: absolute; to break it out of the normal flow of the fieldset. This will position the top left corner of the legend with the top left corner of the fieldset, so we need to bump it up half a character and to the right half a character. Like so:

    * html legend{
    position:absolute;
    top: -.5em;
    left: .5em;
    }

1. Now we’re almost there. By way of a little cleanup, we are going to apply some top padding to the fieldset and a top margin to the fieldset in order to make space for the label tag which is just floating on top of everything.

    * html fieldset{
    position: relative;
    margin-top:1em;
    padding-top:.75em;
    }

1. Voila! You have a form with a fieldset and a legend that looks nearly identical in all browsers.

See an example here.