I ran across a strange bug today in IE. I tried to find any other references to it on Google, but couldn’t find any. Here’s the issue: we have an input field within a fieldset that is in turn within some container object. The container object has some margins defined. For some reason, in IE, the input field is inheriting the horizontal margins from this container object!
It only happens in fieldsets, and it only happens with text, file, and submit/button inputs and textareas (not checkboxes or radiobuttons).
Here is an example:
<div style="border:1px solid #ccc"> <div style="margin:50px;border:1px solid blue"> Container with 50px margin <fieldset> <legend>Fieldset</legend> <input type="file"/> <br/> <input type="checkbox"/> Checkbox is not affected </fieldset> </div> </div>
And here it is live (you’ll have to view it in IE to see the strange behavior).