Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    input type=text doesn't obey height

    The following summarizes my problem:

    Code:
    <html>
    <head></head>
    <body>
      <table border="0" width="100" height="20" cellspacing="0" cellpadding="0">
        <tr height="20"><td width="100" height="20" bgcolor="red"><input type=text
          style="width:100px;height:20px;border:0;margin:0;padding:0;background:yellow;"></td></tr></table>
    </body>
    </html>
    I would expect to see a 100x20 yellow box. In practice, it looks fine in Firefox and Google Chrome, but I see a 100x20 yellow box padded above and below with 1 pixel of red in Internet Explorer... HELP?

  • #2
    New to the CF scene
    Join Date
    Apr 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just for the record, what seems to fix this IE margin bug (without hurting the other browsers) is:

    margin-left:0;margin-right:0;margin-top:-1px;margin-bottom:-1px;

  • #3
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    I don't know what the problem is, but I can say that it is not related to just an text input element. The same problem occurs in IE with a paragraph. Here is an example based on your code, with a minimal version below that also exhibits the same problem.

    Code:
    <html>
    <head></head>
    <body>
      <table border="0" width="100" height="20" cellspacing="0" cellpadding="0">
        <tr height="20"><td width="100" height="20" bgcolor="red"><input type=text
          style="width:100px;height:20px;border:0;margin:0;padding:0;background:yellow;"></td>
        <td bgcolor="blue"><p 
          style="width:100px;height:20px;border:0;margin:0;padding:0;background:lime;">&nbsp;</p>
        </td></tr>
      </table>
      <br>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr><td bgcolor="red">
          <input type=text style="width:100px;height:20px;border:0;background:yellow;">
        </td>
        <td bgcolor="blue">
          <p style="width:100px;height:20px;background:lime;">&nbsp;</p>
        </td></tr>
      </table>
    </body>
    </html>
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #4
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    bud58 beat me to the punch.

    I thought I'd confirm his solution. Using margin:-1px 0; works for input type="text" but not for p. In IE for p it is necessary to use margin:0 0 -1px 0; but this causes a 1px off set of p with respect to input in Google Chrome.

    I think the safest solution would be to use IE conditional comments as in the following:

    Code:
    <html>
    <head>
    <style type="text/css">
    #fixed-max input {width:100px;height:20px;border:0;margin:0;padding:0;background:yellow;}
    #fixed-min input {width:100px;height:20px;border:0;margin:0;background:yellow;}
    #fixed-max p {width:100px;height:20px;border:0;margin:0;padding:0;background:lime;}
    #fixed-min p {width:100px;height:20px;margin:0;background:lime;}
    </style>
    <!--[if IE]>
    <style type="text/css">
    #fixed-max input {margin:-1px 0;}
    #fixed-min input {margin:-1px 0;}
    #fixed-max p {margin:0 0 -1px 0;}
    #fixed-min p {margin:0 0 -1px 0;}
    </style>
    <![endif]-->
    </head>
    <body>
      <table border="0" width="100" height="20" cellspacing="0" cellpadding="0">
        <tr height="20"><td width="100" height="20" bgcolor="red"><input type=text
          style="width:100px;height:20px;border:0;margin:-1px 0;padding:0;background:yellow;"></td>
        <td bgcolor="blue"><p 
          style="width:100px;height:20px;border:0;margin:0 0 -1px 0;padding:0;background:lime;">&nbsp;</p>
        </td></tr>
      </table>
      <br>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr><td bgcolor="red">
          <input type=text style="width:100px;height:20px;border:0;margin:-1px 0;background:yellow;">
        </td>
        <td bgcolor="blue">
          <p style="width:100px;height:20px;margin:0 0 -1px 0;background:lime;">&nbsp;</p>
        </td></tr>
      </table>
      <br>
     <div id="fixed-max">
      <table border="0" width="100" height="20" cellspacing="0" cellpadding="0">
        <tr height="20"><td width="100" height="20" bgcolor="red"><input type=text></td>
        <td bgcolor="blue"><p>&nbsp;</p></td></tr>
      </table>
      <br>
     </div>
     <div id="fixed-min">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr><td bgcolor="red"><input type=text></td>
        <td bgcolor="blue"><p>&nbsp;</p></td></tr>
      </table>
     </div>
    </body>
    </html>
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Tags for this Thread

    Posting Permissions

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