How do I prevent a <td> from being too high?

Question

It must be something stupid, but I can't figure it out so far...

Here is my HTML:

<table cellspacing="0" cellpadding="0" border="0">
<tr>
    <td style="height: 8px"><img src="/media/note2.png" width="8" height="8" border="0"></td>
    <td style="height: 8px"></td>
    <td style="height: 8px"><img src="/media/note1.png" width="8" height="8" border="0"></td>
</tr>
<tr>
    <td class="NoteCell"></td>
    <td class="NoteCell">{{ text }}</td>
    <td class="NoteCell"></td>
</tr>
<tr>
    <td style="height: 8px"><img src="/media/note4.png" width="8" height="8" border="0"></td>
    <td style="height: 8px"></td>
    <td style="height: 8px"><img src="/media/note3.png" width="8" height="8" border="0"></td>
</tr>

I'm expecting the first and third rows to have a height of 8 pixels, but for some reason they are much higher (as if there was text inside, but there is no text!)

Puzzled... Any help will be appreciated!

Answer 1

Try td img { display: block; }

Answer 2

The reason that the second columns of 1st and 3rd row define the minimum height.

Note that all the columns in a row will have same height and all rows in a column will have same width.

That's how the tables are rendered.

So, you will have to additionally write:

td { fontsize: 8px; }

Answer 3

Tip 1. Paste your code snippet into an empty html page and find out if the problem still occurs, make sure the doc type is the same as the target page.

Tip 2. Use a browser extension with CSS debug facilities, check and fiddle with the css that gets applied to your table rows, cells and images in the cells.

Tip 3. You could try if one of these help by adding them all:

table {border-collapse:collapse;table-layout:fixed} td,tr {padding:0} td img {margin:0;height:8px}

If it helps, it means that other definitions in your stylesheet make the cells or rows higher. By removing my css suggestions one by one, you can find out what is causing it.