I'm building an html signature for myself. I want to achieve an overlaping td element with an background and an image. I couldn't get it working so I decided to use an image with background to achieve that.
What I got:
GMAIL
(The image is smaller than the container and has a partial background)
There is an unwanted padding (3px) between the td and img tag.
BROWSER
Code:
<table width="363" height="130" border="0" cellpadding="0" cellspacing="0" rules="none" >
<tr>
<!-- This row is needed to enforce col widths in Outlook -->
<td width="40">
</td>
<td width="3">
</td>
<td width="10">
</td>
<td width="100">
</td>
<td width="10">
</td>
</tr>
<tr>
<td width="40" valign="middle" height="130" colspan="1" bgcolor="#417dc0" nowrap style="width: 40px; vertical-align: middle; height: 130px; column-span: 1; background-color: #417dc0; white-space: nowrap;">
<div style="margin-bottom: 5px;text-align: center;">
<a href="https://www.facebook.com/fernando.n.candiani" target="_blank"><img src="http://fernandocandiani.com.br/email/facebook.png" width="20" height="20"></a>
</div>
<div style="margin-bottom: 5px;text-align: center;">
<a href="https://www.linkedin.com/in/fernandocandiani" target="_blank"><img src="http://fernandocandiani.com.br/email/linkedin.png" width="20" height="20"></a>
</div>
<div style="text-align: center;">
<a href="https://plus.google.com/110769302461961049884" target="_blank"><img src="http://fernandocandiani.com.br/email/googleplus.png" width="20" height="20"></a>
</div>
</td>
<td width="3" valign="middle" colspan="1" height="130" bgcolor="#417dc0" nowrap style="width: 3px; vertical-align: middle; height: 130px; column-span: 1; background-color: #417dc0; white-space: nowrap;">
<div style="border-right:2px solid #ffffff;height:100px"></div>
</td>
<td width="10" valign="middle" colspan="1" height="130" bgcolor="#417dc0" nowrap style="width: 10px; vertical-align: middle; height: 130px; column-span: 1; background-color: #417dc0; white-space: nowrap;">
</td>
<td width="100" valign="middle" height="130" colspan="1" bgcolor="#ffffff" nowrap style="width: 85px; vertical-align: middle; height: 130px; column-span: 1; background-color: #ffffff; white-space: nowrap;">
<img width="100" height="130" src="http://fernandocandiani.com.br/email/fernandocandiani@133.png">
</td>
<td width="10" valign="middle" colspan="1" height="130" bgcolor="#ffffff" nowrap style="width: 10px; vertical-align: middle; height: 130px; column-span: 1; background-color: #ffffff; white-space: nowrap;">
</td>
</tr>
Tried many approaches and couldn't get it working.
PS: It works perfectly in Chrome, Firefox and Opera when rendered straight in browser, but when pasted to gmail signature it adds the 3px padding/margin
EDIT: I don't if it is worth mentioning but the table has 133px height and the image has 130px as the code says. The table should has 130px by code as well. If I increase the image to 133px the table goes to 136px and so on.
