Strange IE7 bug causing layout problems for input fields

Here's the sa开发者_如何学Gomple page I'm working on: http://rivalroo.benlwilliams.com/create.html

If you view in IE7 or IE8 Compatibility mode, you'll see that the second and third column of input fields seem to want to inherit the containing div's left margin of 100px. Even if assign the input field's left-margin to 0, it still has this mysterious left margin of 100px applied to it, but not shown in IE's inspector.

If I remove the left margin of the column div, then it lines up just fine, which is why the first column has the fields arranged properly.

Anybody have a solution to this IE7 bug?

have you tried wrapping the form elements in another div with no properties, it should break the hasLayout "chain". i.e nest a div in the form

related post

I found that this issue has to do with a bug of IE6&7 regarding has-layout. If the parent element of a form field has-layout, then it inherits it's margin. I changed the spacing provided by a margin to padding and it resolved the issue.

But if anyone has a better solution that lets a developer keep the margin, that would be awesome, because changing the margin to padding isn't always possible with the design.