Field overlay background color out of bounds in IE

Question

The field overlay background color goes out of bounds in IE. I have a table with the background color set to blue and the background color of the fields white. How can I fix this in IE?

My CSS:

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

I am creating a dynamic set of fields.

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

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 elements or to write HTML yourself.

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

A simple solution is to use the absolute position of legend to bring it out of the normal flow of elements and manually adjust its location so that it is approximately the same as usual. Also position the fieldset relative to the legend so that it 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; }