The fieldset’s background color gets out of border

Question

The fieldset’s background color gets out of border in IE. I have a table with background color set to blue and the fieldset’s background color set to white. How can I fix this in IE?

My CSS :

fieldset {margin:10px;}         
fieldset legend {font-size: 14px; font-style:normal;}

I am creating fieldset dynamically.

newFieldset = document.createElement('fieldset');
newLegend = document.createElement('legend');
newLegend.innerHTML = 'Claimant Information';
newFieldset.appendChild(newLegend);
OverdueReportsSummaryDetailsTableDiv.appendChild(newFieldset);  

Please see attachment (click to enlarge)

Thanks

Answer 1

This is a well-known IE bug, and occurs regardless of whether you use JavaScript to generate the elements or write the HTML yourself.

legend is a child of fieldset, but since it's located slightly "above" the top edge of the fieldset, IE (incorrectly) extends the background color of the fieldset to contain the legend.

An easy workaround is to absolutely position the legend to take it out of normal element flow, and manually adjust its location so it rests roughly where it normally is. Also position the fieldset relatively so the legend remains in its vicinity.

Something like this (adjust the values as needed):

fieldset {
    position: relative;
    margin: 10px;
}

fieldset legend {
    position: absolute;
    top: -0.5em;
    left: 0.5em;
    font-size: 14px;
    font-style: normal;
}