Test Area Index

Internet Explorer

Element ⊃ Element ⊃ Form Element = Margin Bug

A particular bug in some versions of IE, for example IE6, 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 ContainerInner ContainerAlignment
Error
hasLayoutmargin-lefthasLayoutmargin-left
nanafalse0none
nanatrue0none
nanafalse1none
nanatrue11
false0false0none
false0true0none
false0false1none
false0true11
true0false0none
true0true0none
true0false1none
true0true11
false1false0none
false1true01
false1false1none
false1true12
true1false0none
true1true0none
true1false1none
true1true11

Here are some examples …

 

IE 'hasLayout' Properties
IDElementhasLayout

… but there is no such problem if you either remove the margin-left from the outer container, or make it 0 …

 

IE 'hasLayout' Properties
IDElementhasLayout

… or cause the outer container to have 'layout' by, say, specifying a CSS width other than auto …

 

IE 'hasLayout' Properties
IDElementhasLayout

… or the intermediate container doesn't have 'layout' …

 

IE 'hasLayout' Properties
IDElementhasLayout