Getting uniform layout in both IE7 & IE8 with form elements

Question

It would seem that IE7 puts an extra 1px of spacing above and beneath form elements. IE8, FF3.5, Chrome 2 & Opera 9.5 correctly renders these elements without the spacing.

What I want though, is for the display to be the same in IE7, so is there some kind of workaround to get IE7 to correctly render the elements?

It doesn't appear to matter whether or not the form element (eg Input Boxes) are placed within 's or 's, nor does it seem to matter about padding, margins & spacing settings. (setting them all to zero still has a 1px space around the input boxes)

Answer 1

I ran into this a while back and to be honest, I'm not totally sure I remember the fix. I seem to recall it has something to do with IE adding padding on the inside and outside of the input box, thus making it impossible to fix. It was either that or borders. Try either of these, together and separately:

input {
    border: 0;
    font-size: .9em;
}

If either of those offer what you need, I'd go with a conditional comment like:

<!--[if lte IE 7]>
input {
    border: 0;
    font-size: .9em;
}
<![endif]-->

Answer 2

Unfortunately, browsers render form elements with inconsistent heights and widths.

Fortunately, your two problem children are IE6 and IE7, both of which are easy to target using conditional comments. Without seeing them it's hard to say what the exact fix would be, but it might look something like this:

<!--[if lte IE 7]>
     <style type="text/css">
          input{ padding-top: 3px; ) /* 1px less than other browsers */
     </style>
<![endif]-->