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; }