IE7 Input field issue - extra bottom margin or padding - hasLayout issue?

Hello all,

By taking into consideration the following page in IE 7:

Our input fields seem to have an extra bottom space that I can’t identify if it’s margin or padding, but the issue is there.

Is this a common bug ?

We do have specific style sheet file to target IE7 so, any specific rule to target that browser only it’s totally ok.

Please advice, and totally clueless here.


Trying to assign margin OR padding to form elements is most always a disaster cross-browser, as not only do no two browsers start with the same values, they also do not apply padding the same way. FF and IE have default paddings, one in px, the other in EM, that no amount of playing with padding will EVER change… and both of those browsers treat them as some form of ‘special’ element when applying width/height… FF obeying height and ignoring line-height, IE obeying line-height and ignoring height… Opera actually treats them as ordinary SHOCK inline-block … and don’t even get me STARTED about what the webkit nimrods have done with form elements.

My advice – don’t even TRY to apply margins, padding, or any other type of measurement to form elements and expect it to match across browsers, because it won’t. The BEST you can hope for is to pad their parent element and prey that they all end up the same size on their own. Anyone tells you otherwise, they have no clue what they are talking about.

Of course, all the HTML 5 a decade before it should be deployed, even with the bloated wasteful stupid javascript SHIV certainly can’t be helping matters; especially with trying to use the new document structure WAY before anything even supports it. The presence of the target attribute pretty much showing what I’m always talking about where HTML 5 is for the people who never embraced STRICT and just continue to write HTML 3.2… Which is how you’re ending up with about 7.8k of code to do 4.3k’s job.

If you actually care about supporting legacy browsers, forget HTML 5 even exists… If you care about making clean accessible minimalist code that loads quickly… forget HTML 5 exists… Newer isn’t always better… much less ready for primetime.

– edit – Oh, you MIGHT also try floating the inputs and/or throwing different vertical-alignments at them AND their parent until it all lines up. INPUT and SELECT are… kind-of inline-block but not really in FF/IE, so their behavior with vertical-align is… quirky.


You re not talking about the default margin on the form element are you?


Don’t worry about minor pixel differences on form controls between browsers because as Jason said they all have their own way of doing things and fixing one browser quite often breaks another one.

Actuaaaally… aahhm… I guess I was. :smiley:

I generally don’t use resets of any kind, only when I need them, but I didn’t know IE 7 would have that rule applied.

About pixel perfection, indeed I would never look at that while designing for web.

About the HTML5 … it’s ok. I’m ok with that. And I usually develop over strict. And I love the pleasure of seeing the validator trowing 0 errors found.

:slight_smile: Thanks for your input. Always learning here. Cheers