A particular bug in some versions of legacy IE, for example both 6 & 7, in both quirks and standards modes, is that if you have an element heirarchy where an outer element such as a <form> or a <div>, contains an inner element, itself containing both, say, text and a form element such as an <input> or a <textarea>, and if either or both containers has a non-zero CSS style margin-left, then under the combinations detailed in the following table, the form element will not align correctly with the text (apparently because the left margin(s) is(are) applied a second time to the form element) …
| Outer Container | Inner Container | Alignment Error | ||
|---|---|---|---|---|
| hasLayout | margin-left | hasLayout | margin-left | |
| na | na | false | 0 | none |
| na | na | true | 0 | none |
| na | na | false | 1 | none |
| na | na | true | 1 | 1 |
| false | 0 | false | 0 | none |
| false | 0 | true | 0 | none |
| false | 0 | false | 1 | none |
| false | 0 | true | 1 | 1 |
| true | 0 | false | 0 | none |
| true | 0 | true | 0 | none |
| true | 0 | false | 1 | none |
| true | 0 | true | 1 | 1 |
| false | 1 | false | 0 | none |
| false | 1 | true | 0 | 1 |
| false | 1 | false | 1 | none |
| false | 1 | true | 1 | 2 |
| true | 1 | false | 0 | none |
| true | 1 | true | 0 | none |
| true | 1 | false | 1 | none |
| true | 1 | true | 1 | 1 |
Here are some examples …
| ID | Element | hasLayout |
|---|---|---|
… but there is no such problem if you either remove the margin-left from the outer container, or make it 0 …
| ID | Element | hasLayout |
|---|---|---|
… or cause the outer container to have 'layout' by, say, specifying a CSS width other than auto …
| ID | Element | hasLayout |
|---|---|---|
… or the intermediate container doesn't have 'layout' …
| ID | Element | hasLayout |
|---|---|---|
Useful links (no endorsement of external sites intended nor responsibility taken for their content):