IE displays input field with extra padding?

[robert7b]

Hi guys and gals,

i am having a problem with a very simple login field. In FF the login field appears "normal" but in IE it appears to have a larger padding underneath. Would anyone be able to explain why this is?

<td style="background-image:url(../images/index/image4.gif)" width="980px" height="40px" align="right">
<form id="login" action="login.php" method="post">
<input name="username">&nbsp;&nbsp;&nbsp;
<input name="password" type="password" />&nbsp;&nbsp;&nbsp;
<input type="submit" name="submit" value="&nbsp;Login&nbsp;" />&nbsp;&nbsp;&nbsp;
</form>
</td>

Thanks everyone.

Robert

[samanime]

Just different preset values. You can always specify the padding you'd like for the element and it'd then be reflected the same in all browsers. As of right now, you are just leaving it to the default that the browser specifies, which varies slightly browser to browser.

[robert7b]

thanks, but i'm new to all this and i'm a little lost. I thought it wouldnt matter as i set the height of the td to be 40px?

[samanime]

It depends.

Setting a height to a parent element can't squish down it's children (parent would be td and the child would be the input in this case). So, what it does is depends on what the overflow property is set to.

If the overflow property is set to hidden, then it will chop off the extra that goes beyond the space td gives. If overflow is set to visible (which it is by default), then the parent will grow to fit all of it's children inside of it.

So, what is likely happening is that the td is actually growing beyond 40px, even though you explicitly set it to that.

If I understand what you mean by "large padding underneath", do you mean that under the input there is a big white space between it and the edge of the td. If that's the case, you could set the padding on the td to 0 (or 5px, or whatever you want it to be). If you explicitly state it, it will be exactly the same in all browsers.

Also, the input may also have a margin outside of it, so you may want to set it's margin to 0px.

I don't really like to plug myself on SitePoint, but I think these two tutorials I wrote will help clear it up further if you need:
CSS Lesson 2.2: Dimensions: The Properties and Lesson 2.4 - Dimensions: Adding It All Up

I hope that helps clear it up a bit. Let us know if you have any more questions.

[robert7b]

thanks for the reply, i was already reading your tutorials before.

I have tried changing the margin and the padding of the TD but still to no avail. Oh and you are right, i did mean a large white space under the form and before the </TD>. FF doesnt show this. The form sits nicely between the <TD> and the </TD>

<table width="980px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td style="background-image:url(../images/index/hg_contentbox_middle4.gif); margin:0px; padding:0px" width="980px" height="40px" align="right">
<form id="login" action="login.php" method="post">
<input name="username" >&nbsp;&nbsp;&nbsp;
<input name="password" type="password"/>&nbsp;&nbsp;&nbsp;
<input type="submit" name="submit" value="&nbsp;Login&nbsp;"/>&nbsp;&nbsp;&nbsp;
</form>
</td>
</tr>
</table>

Robert

[robert7b]

got it sorted!

if i applied the style to the form, as opposed to the td as below, it removed the padding.

<form id="login" action="login.php" method="post" STYLE="margin: 0px; padding: 0px;">

[samanime]

Excellent, glad you got it figured out.