Forum Moderators: not2easy
the <input ../> has an explicit height of 15px, + 1px for top padding + 1px for bottom padding + 2px for top border + 2px for bottom border = 21px total.
When viewing it via the IE developer toolbar, the clientHieght is 17 (height(15) + vertical paddings(1+1)) which is correct.
The offsetHeight is 21 (height(15) + vertical paddings (1+1) + vertical borders (2 + 2)) which is also correct.
So the whole input takes a size of 21px right?
I have a td which I set its height to 21px.. in ff the td remains 21px high, however in IE6, the IE developer toolbar says the td has a clientHieght of 23px? WHY?! no margins, borders or paddings on the td, so the only reason should be due to its contents but even those have a total offsetHeight of 21px so why the extra 2 pixels?
When I remove the <input ../> the td clientHeight goes back to 21px.. can someone make sense of this?
I'm using a strict doctype and tried everything sanely logical to appease the td but I'm out of ideas.
Any help is appreciated.. below is a small test if you want to check it out yourself..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
table
{
table-layout:fixed;
}
tr
{
height:21px;
padding:0px;
margin:0px;
border:0px;
}
td
{
width:163px;
height:21px;
padding:0px;
margin:0px;
border:0px;
}
input
{
height:15px;
padding:1px 0px;
margin:0px;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>Start of Appraisal Cycle</td>
<td><input type="text" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
So the whole input takes a size of 21px right?
it's the table cell.. I'm afraid
first off height is not a valid attribute on a TR element, though one of the browsers I can't remember which does try to support it - and as per the W3C specs, browsers have a lot of leeway on how/if they accept a height on a TD
height = length [CN]
Deprecated. This attribute supplies user agents with a recommended cell height.
my bold, but understandable as table cells by their nature expand to contain content so any heights/widths are only suggestions anyway. The consequence is that it it nigh on impossible to get pixel perfection trying to squish/shrink wrap inside a table.
However in this case it can be 'fixed' x-browser.. float the input
once you float the input and use it to cvontrol the height you no longer need the height on the tr/td anyway the table row should be as tall as the tallest item inside it.. your input
the padding on the input as far as I can tell is doing nothing.. and I tested it by removing the default border and applying 1px solid #000; so you may need to recalculate to suit browser defaults or you might want to ensure the calcualtion by specifying your own explicit borders
input {
height: 19px;
line-height: 18px; /* this just centered the cursor slightly better */
border: 1px solid #000;
margin: 0;
padding: 0;
float: left;
}
[added] I didn't test in IE6 :o but I was seeing the problem and testing the fix in IE7 so hopefully it workls for 6 too! let us know[/added]
Yes you're right floating the input does remove the weird vertical margin.. I did some searching and found that its some kind of IE bug which adds the 1 pixel margin above and below the textbox..
When using firebug to analyze the text input I noticed it was rendered with the following defaults: 2px border and 1px padding (vertical only) and 0px margin.. so that's why I added the padding... hoping if I feed everyone the numbers explicitly, they won't have to do much thinking for themselves :P :)
neways thanks suzz
