IE7 fieldset input position bug

Jonathan — Fri, 01 Dec 2006 17:15:35 +0000

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=”border: #ccc 1px solid”)

(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.

jonnycarroll » HTML/CSS

IE7 fieldset input position bug