fix for IE6'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.
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 */;}
/* IE-win 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;}
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 IE6
bug, and may be in need of a documented fix. You're welcome to it.
author: Georg Sørtun
date: 18.sep.2005
last rev: 07.jul.2007