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.
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.
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.
See my IE6/IE7 input margin inheritance bug blog entry.