IE7 applies div margin on text input element

I stumbled upon an annoying bit of IE7 behaviour recently. Whilst putting together an enquiry form, I used normal divs to contain my text input elements. The divs had a left-margin defined, but for some reason IE7 would render the left-margin correctly, but in addition to this it would then apply the same width as if it were a left-padding on the div, or as if it were a left-margin on the text input element.

The following example should show that no gap is present between the left of the text input field and the red border of the div (in browsers other than IE7 of course), this is the behaviour I expected.

I found the fix to be to put a zero-width space before the start of the input tag, this makes IE7 behave as per the other browsers. I have tested the example in the IE8 beta, and it does perform as per everyone else.

Has anyone else had the same problem?

3 thoughts on “IE7 applies div margin on text input element”

  1. I’ve just had the same problem and found your solution via Google, worked like a charm! …stupid IE 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

six + two =

This site uses Akismet to reduce spam. Learn how your comment data is processed.