Outlook 2007/2010 adding space inside table cell - html

Question

I'm building a responsive newsletter which display correctly in every browsers and email clients except Outlook 2007 & 2010 (though it's ok on Outlook 2003 and previous, and on 2013 and upper versions).
There is an extra 18px space added inside one of the table cells of this header:
With some explanations:
1 is a a table inside my first cell, which seems to have the valid height (186px). 2 and 3 pictures are 186px height, but their cells are bigger.
Here is the header html:
<tr>
<td align="left" valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left" valign="top" style="border-collapse: collapse !important; background-color:#ffffff;" bgcolor="#ffffff">
<tr>
<td width="225" height="186" bgcolor="#7c64a9" class="nd-bandeau-cell1" style="background-color: #7c64a9">
<table width="100%" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td width="20" rowspan="5" class="head-left-margin"> </td>
</tr>
<tr>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 9px; line-height: 9px;">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
<tr>
<td height="120" align="right" valign="bottom" class="nd-bandeau-titre-cell">
<img src="http://mywebsite/img/titre-lettre.jpg" width="204" height="71" alt="La lettre de votre patrimoine" class="nd-bandeau-titre" style="font-family: Arial, sans-serif; color: #ffffff; font-size: 20px;" />
</td>
</tr>
<tr>
<td height="44" align="left" valign="top" class="nd-bandeau-stitre-cell" style="font-family: Arial, sans-serif; font-weight: bold; font-size: 14px; color: #ffffff;">
N°1 | Octobre 2015
</td>
</tr>
<tr>
<td height="13" align="left" valign="top" class="nd-bandeau-left-bottom-cell" style="mso-line-height-rule: exactly; font-size: 13px; line-height: 13px;">
<img src="http://mywebsite/img/head-left-bottom.gif" width="205" height="13" alt="" class="nd-bandeau-left-bottom" style="display: block;" />
</td>
</tr>
</table>
</td>
<td width="178" height="186" align="left" valign="middle" class="nd-bandeau-cell2">
<img src="http://mywebsite/img/bandeau-left.jpg" width="178" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
</td>
<td width="197" height="186" align="left" valign="middle" class="nd-bandeau-cell3">
<img src="http://mywebsite/img/bandeau-right.jpg" width="197" height="186" alt="" style="display: block; background-color: #c3b9b1;" />
</td>
</tr>
</table>
</td>
</tr>
I tried many fix, none worked: adding line-height to the cells that contains image with mso-line-height-rule: exactly before, collapsing HTML to remove any space, changing doctype... I'm a little out of ideas here, anyone have any clue of what is happenning here?

Answer 1

it's because you have a cell (line 7) that is < 15px tall. Outlook 2007 and 13 will expand whatever cell you have that's under to 15.
a workaround:
<tr valign="bottom">
<td height="9" style="font-size:9px; line-height:9px;">
</td>
</tr>
i usually get around doing that by using padding-top and bottom on tds (nesting tables where needed)

Answer 2

I found out what was wrong, and it was pretty trivial. The first row of my table (the one with rowspan) was missing a second cell - so the table layout was wrong.
Just by changing :
<tr>
<td width="20" rowspan="5" class="head-left-margin"> </td>
</tr>
<tr>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
To :
<tr>
<td width="20" rowspan="4" class="head-left-margin"> </td>
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell">
<img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" />
</td>
</tr>
Fixed the issue. After that I still had one pixel vertical spacing after my images that are in cells with height < 15px. Thanks to zazzyzeph answer, I fixed it by changing the line-height and font-size to 0px (setting the height of the image didn't worked for me) with mso-line-height-rule, adding margin: 0 on the image and by collapsing the code to leave no space before/after the picture.
For example:
<td height="9" align="left" valign="top" class="nd-bandeau-left-top-cell" style="mso-line-height-rule: exactly; font-size: 0px; line-height: 0px;"><img src="http://mywebsite/img/head-left-top.gif" width="205" height="9" alt="" class="nd-bandeau-left-top" style="display: block;" /></td>
With all those fix my header now show perfectly on all email clients.