Reputation: 3858
Any reason why I am getting extra spacing underneath each input on my contact form?
It only happens in ie6 and ie7
http://nhbs.bythepixel.com/contact.html
Upvotes: 3
Views: 140
Reputation: 66191
Adding this to your page (or move the style to an IE only stylesheet) and it will fix your problem:
<!--[if lte IE 7]>
<style type="text/css" media="screen">
#contactform { height: 1% }
</style>
<![endif]-->
Working example here (View in IE6 or IE7)
Upvotes: 0
Reputation: 152637
I tested. Just use this code for IE in conditional stylesheet if u are using
FORM#contactform .input { margin-bottom: -11px; }
or put in head directly like this code
<!--[if lte IE 7]>
<style type="text/css" media="screen">
FORM#contactform .input { margin-bottom: -11px; }
</style>
<![endif]-->
It's a IE bug you can see more details here:
http://www.positioniseverything.net/explorer/inherited_margin.html
http://forums.devshed.com/css-help-116/margin-bug-in-ie7-a-kind-of-the-double-margin-548527.html
Upvotes: 0
Reputation: 911
IE sometimes treats whitespace (text nodes) as occupying space among floated elements. Don't freak out when I suggest this, but have you considered putting the input
elements in a table
? Yes, table-based layouts are horrible, except in this case your content is actually arranged in a table, so it would be perfectly appropriate.
Upvotes: 1
Reputation: 13130
probably newlines... ie tries to print "whitechars" between tags
Upvotes: 3