It's odd working with IE - Part 1. <td>

It took me a while googling to find why height in is not rendered as I expected in IE (Internet Explorer), when I use code like;
<style>
…
td.under {
…
height: 9px;
…
}
</style>

<td class="under" onclick="insertRow(this, verAttribute)" onmouseover="onSideOver(this)" onmouseout="onSideOut(this)">
<img src="img/add.gif">
</td>

But, it didn’t help much. I find the answer in the Technet of Microsoft.

Many people have already knew that IE is working differently than other browser. Well, actually, most browsers are acting somewhat differently from each other. Fortunately, many of the differences in terms of using HTML tags or DOM elements are rather perceivable, if I use informative tools like Aptana. Still, most of the tools do not describe why <td> is rendering differently in IE. So I decided to add any findings in this column starting from <td>.

1. The height of <td> does not seem to work in IE.
The size of <img> is not easily controlled unless I wrapped the image inside <td>, especially in IE. In many cases, if I use “Source Formatter” or developer’s habit to separate <td> and </td>l; with CRLF, which means separated by new line, another DOM object is added. (This can be checked easily using firebug add-on.) And this cause IE to behave differently when deciding height of <td>.

If it happens, even if I enforce the height of cell with height attribute as in above example, IE re-calculate height of the cell using another new line. Which make the cell grow to the size of text. To avoid this and if you’re really considering to use your HTML code also in IE, <td> and </td> should not be separated by new line. So, if I fix above code like this;

<td class="under" onclick="insertRow(this, verAttribute)" onmouseover="onSideOver(this)" onmouseout="onSideOut(this)"><img src="img/add.gif"></td>

Then, the height of the cell in IE is rendered the same height as in Firefox.