This has been reposted from this page because I believe it is no longer being maintained there.

This test page is part of my IE6/IE7 input margin inheritance bug blog entry.

IE6/IE7 block (hasLayout) element / input margin inheritance bug

 label { display: block; width: [something to trigger hasLayout]; margin-left: 100px; }
.. or ..
 div { width: [something to trigger hasLayout]; margin-left: 100px; }

... also results in 100px of unintended left margin applied to certain form elements within the label or div.
The margins on the affected form elements can't be removed through css such as input { margin: 0; }
The block-level container to the form element doesn't necessarily have to have a width set, as I use in this example; rather it can have any css property -- position absolute, float, width (not auto), height, overflow for IE7, etc -- that triggers IE's hasLayout property.

PLEASE NOTE: The examples below are actual code examples, not screenshots, so you need to view them in the appropriate browser to see (or not see) the bug.

EXAMPLE 1: labels with display: block & a css property to trigger hasLayout

this is a form
fieldset
this is a form
fieldset
this is a form
fieldset
this is a form
fieldset
this is a form
fieldset
this is a form
fieldset

EXAMPLE 2: divs with hasLayout triggered

this is a form
fieldset
this is a div
this is a form
fieldset
this is a div
this is a form
fieldset
this is a div
checkbox (bug doesn't occur)
this is a form
fieldset
this is a div
radio button (bug doesn't occur)
this is a form
fieldset
this is a div
this is a form
fieldset
this is a div

EXAMPLE 3: floated divs (triggers hasLayout)

Floating the div containers also triggers their hasLayout property. I included this example for IE6 demonstration purposes, because this example involves a nasty combination of the IE6/IE7 margin inheritance bug, AND the well-known IE6 floated element/margin doubling bug.

Interestingly, the doubled margin in IE6 only occurs with the block element's margin -- the margin is still inherited by the form element, but not the doubled value.

this is a form
fieldset
this is a floated div
this is a form
fieldset
this is a floated div
this is a form
fieldset
this is a floated div
checkbox (bug doesn't occur)
this is a form
fieldset
this is a floated div
radio button (bug doesn't occur)
this is a form
fieldset
this is a floated div
this is a form
fieldset
this is a floated div

HOW TO FIX

See my IE6/IE7 input margin inheritance bug blog entry.