Tables and Inline CSS causing problems in Hotmail and Gmail

问题

I am making an email signature using only text rather than an image attachment. I have recreated the logo using HTML and inline CSS. I cannot get it to display correctly in Gmail or Hotmail. It is pushing the 5 blue squares out of alignment. Does anyone have any ideas why this might be? Here is the code and I have added colour backgrounds behind the offending parts to try and figure it out.

<style type="text/css">
a.link{margin:0;padding:0;border:none;text-decoration:none;}
</style>

<br />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="format-detection" content="telephone=no">

<table width='500' id="sig" cellspacing='0' cellpadding='0' border-spacing='0'     style="width:500px;margin:0;padding:0;">
<tr>

<td valign='top' style="margin:0;padding:0;">
<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="padding:0;margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;color:#b0b0b0;border-collapse:collapse;-webkit-text-size-adjust:none;">

<tr style="margin:0;padding:0;">
<td style="margin:0;padding:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;white-space:nowrap;">
<a href="mailto:" style="border:none;text-decoration:none;color:#7A7E83;letter-spacing:10px;font-size:20px;font-weight:500;line-height:95%;"><span style="color:#7A7E83">MATT </span></a>
</td>
</tr>

<tr style="margin:0;padding:0;color:#7A7E83;">
<td style="margin:0;padding:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;white-space:nowrap;font-size:17px;font-weight:300;">
<span style="color:#00AEEA">BSc (Hons)</span><a href="http://www.rics.org/uk/" style="border:none;text-decoration:none;color:#7A7E83;font-weight:500;"> MRICS</a><span style="color:#00AEEA"> Eco Assessor</span>
</td>
</tr>

<tr style="margin:0;padding:0;color:#7A7E83;">
<td style="margin:0;padding:4px 0 0 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;white-space:nowrap;font-size:20px;font-weight:300;">
<span style="color:#00AEEA">D: </span><a href="tel:+44" style="margin:0;padding:0;border:none;text-decoration:none;color:#7A7E83;font-weight:500;">01222 222 222</a>
</td>
</tr>

<tr style="margin:0;padding:0;color:#7A7E83;">
<td style="margin:0;padding:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;white-space:nowrap;font-size:20px;font-weight:300;">
<span style="color:#00AEEA">T: </span><a href="tel:+44" style="margin:0;padding:0;border:none;text-decoration:none;color:#7A7E83;font-weight:500;">01222 222 222</a>
</td>
</tr>

<tr style="margin:0;padding:0;color:#7A7E83;">
<td style="margin:0;padding:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;white-space:nowrap;font-size:20px;font-weight:300;">
<span style="color:#00AEEA">M: </span><a href="tel:+44" style="margin:0;padding:0;border:none;text-decoration:none;color:#7A7E83;font-weight:500;">01222 222 222</a>
</td>
</tr>

<tr style="margin:0;padding:0;">
<td style="margin:0;padding:4px 0 0 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;white-space:nowrap;font-size:20px;font-weight:300;">
<span style="color:#00AEEA">Newworld </span><a href="#" style="margin:0;padding:0;border:none;text-decoration:none;color:#7A7E83;font-weight:500;">BBB BBB</a>
</td>
</tr>

<tr style="margin:0;padding:0;color:#7A7E83;">
<td style="margin:0;padding:5px 0 0 0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;white-space:nowrap;font-size:12px;font-weight:200;">
<a href="#" style="border:none;text-decoration:none;color:#7A7E83;font-weight:200;letter-spacing:2px;">click here for online email disclaimer</a>
</td>
</tr>

</table>
</td>




<td width="10" style="width:10px;min-width:10px;max-width:10px;height:140px;min-height:140px;max-height:140px;margin:0;padding:0;border-left:2px solid #7A7E83">&nbsp;</td>



<td  valign='top' style="margin:0;padding:0;padding:0;">


<table cellspacing='0' cellpadding='0' border-spacing='0'>
<tr style="padding:0;margin:0;">
<td height="12" width="72" style="margin:0;padding:0;"></td>
</tr>
</table>    


<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="background-color:red;padding:0;margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:130px;color:#7A7E83;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr height="110" style="margin:0;padding:0;color:#7A7E83;max-height:100px;">
<td style="margin:0;padding:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;white-space:nowrap;font-weight:400;">
<a href="http://www.gdsurveyors.co.uk/" style="border:none;text-decoration:none;color:#7A7E83;"><span style="color:#7A7E83;letter-spacing:-15px; line-height:76%;">gds</span></a>
</td>

</tr>

<td  valign='top' style="margin:0;padding:0;padding:0;">
<table cellspacing='0' cellpadding='0' border-spacing='0' style="background-color:pink;">
<tr height="10"></tr>
<tr style="padding:0;margin:0;">
<td height="12" width="72" style="margin:0;padding:0;"></td>
<td height="12" width="12" style="margin:0;padding:0;background-color:#00AEEA;"></td>
<td height="12" width="9"></td>
<td height="12" width="12" style="margin:0;padding:0;background-color:#00AEEA;"></td>
<td height="12" width="9"></td>
<td height="12" width="12" style="margin:0;padding:0;background-color:#00AEEA;"></td>
<td height="12" width="9"></td>
<td height="12" width="12" style="margin:0;padding:0;background-color:#00AEEA;"></td>
<td height="12" width="9"></td>
<td height="12" width="12" style="margin:0;padding:0;background-color:#00AEEA;"></td>
</tr>
</table>
</td>   


</table>
</td>

<tr>
</table>
<br />
&nbsp;

来源：https://stackoverflow.com/questions/23911795/tables-and-inline-css-causing-problems-in-hotmail-and-gmail

标签

html

css