ReDsgn

Ever encounter this IE bug… The issue occurs when you style fieldsets with a background color. The top of the fieldset color will bleed out of the border to the top of the legend. IE pads to the outside of borders and its apparent here when the padding is increased to accommodate a legend which is over the border of the fieldset.

This is a simple fix that will work in all browsers so no need for special IE Hacks or Conditional Comments.

First add a position: relative; declaration to the fieldset rule so that the absolute positioning of the legend will be relative to its fieldset:

fieldset {
position: relative;
background: #ffffcc;
}

Next, add a new rule for the legend element and set its absolute positioning properties to emulate its current position:

legend {
position: absolute;
top: -.7em;
left: .2em;
}

That’s it… That’s all there is to it.