Tuesday, March 11, 2008

Getting Fieldset Backgrounds and Legends to Behave in IE

When you are building a form with a fieldset tag and a legend tag, and then style the fieldset with a background color, while this works seamlessly as expected in Firefox or Opera, IE6/7 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.

I found help on http://www.mattheerema.com/archive/getting-fieldset-backgrounds-and-legends-to-behave-in-ie and especially the code (from within the comments, ), seems to work:

fieldset {
position: relative;
border: 1px solid #fff;
padding: 0px 10px 10px;
margin: 20px auto;
}

legend{
margin-top:-5px;
top: -0.5em;
margin-left: 10px;
padding: 0px 10px;
background: #000;
font-weight : bold;
border: 1px solid #fff;
-moz-border-radius: 10px;
}

No comments: