fix for IE/win's “background-overflow on fieldset with legend” bug

flawed in IE6.

corrected in IE6.

how to:

• Start by setting, or inheriting, a line-height on 'legend, and keep that value in mind.
• float the 'legend' in IE6 only, using your favorite hack.
• declare a negative 'margin-top' on 'legend' in IE6 only, with a value ca 0.35em less than the 'line-height' on 'legend'.
• declare 'position: relative' on 'legend' in IE6 only, to kill its "layering bug" and keep the 'legend' visible.
• check that the negative margin on 'legend' has the exact right value, by going through all IE6's font-resizing options – including. accessibility > ignore font size.
• if necessary: add some extra 'margin-bottom' to the element above the 'fieldset' – in IE6 only, to compensate for the "lifted" 'legend' and reduced separation.
• feed the same corrections to IE7 – as a completely separate rule, as that bugger is even worse than its predecessors.

actual styles for this demo

 /* basic fieldset styling */ 
 fieldset {
 background: #cde; 
 width: 300px; 
 position: relative; 
 line-height: 1.5;}

 fieldset legend {
 line-height: 1.3 
 /* note this line-height value */;}
 
 /* IE6 fix */
 * html fieldset#fixed legend {
 float: left; position: 
 relative; margin-top: -.95em 
 /* equals actual line-height minus 0.35em */;}
 
 * html p.comp {
 margin-bottom: 18px;}

 /* IE7 fix */ 
 *:first-child+html fieldset#fixed legend {
 float: left; position: relative; 
 margin-top: -.95em 
 /* equals actual line-height minus 0.35em */;}
 
 *:first-child+html p.comp {
 margin-bottom: 18px;}

addendum

I've had this simple test/demo in my local files for a long time – see date below – but haven't bothered to turn it into a proper page and launch it until the summer 2007. The reason for presenting it at all is that some still seem to have problems with this IE/win bug, and may be in need of a documented fix.

As IE7 has the same bug as its predecessors, this solution is still relevant – and will be for many years to come. You're welcome to it.

author: Georg Sørtun
date: 18.sep.2005
last rev: 07.jul.2007