input type=text doesn't obey height

bud58 · 04-20-2010, 07:37 PM

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?

bud58 · 04-21-2010, 08:27 AM

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;

mbaker · 04-21-2010, 08:30 AM

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>

mbaker · 04-21-2010, 08:55 AM

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>