IE7 fieldset input position bug
// December 1st, 2006 // No Comments » // HTML/CSS, Web Development
Whilst developing some view related material for a new project I’ve been working on I came across this rather puzzling that affects various types of input fields in Internet Explorer 7 (I haven’t checked to see if it occurs in lower versions of IE):
Basically, when an input tag is surrounded by a fieldset tag which is surrounded by a containing tag such as a div with a left margin, the input tag inherits the margin defined in the containing div. Here’s an example of what I mean:
(div style=”margin: 50px; border: blue 1px solid”) Container with 50px margin
(fieldset)
(legend)Fieldset(/legend)
(input type=”file” /)
(input type=”checkbox” value=”on” /) Checkbox is not affected
(/fieldset)
(/div)
(div)
If you try this in IE you’ll see that the file input box inherits the 50px margin. Very odd indeed!
Anyway, after a quick browse on the web I found the solution (and the cause of the problem):
Simply surround your input fields with a containing div (don’t use a p tag if it’s within a form tag as it will break page validation) and set the margin of that div to 0.
