SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE displays input field with extra padding?

    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?

    Code HTML4Strict:
    <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

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

    Code HTML4Strict:
    <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

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    got it sorted!

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

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

  7. #7
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Excellent, glad you got it figured out.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •