I have had some problems putting together a corporate email signature which is visually consistent across the different mail providers.
I have used various online guides (listed at the end of this mail) but still have one last problem which I cannot seem to tackle.
In Outlook.com, the table height seems to extend be unnecessarily far down, as can be seen in the comparison below (note the red marking).
Outlook 2013:
Outlook.com:
HTML:
<table border="0" cellspacing="0" cellpadding="0" height="118">
<tr>
<td align="left" width="202" height="118" style="padding:0px 10px 0px 0px; margin:0px 0px 0px 0px;line-height:0px; margin-bottom:0px; border-right-color:#005f6b; border-right-width:1px; border-right-style:solid; margin-bottom:0px;"><img src="http://i.imgur.com/ClMZi3M.gif?1" width="202" height="118" alt="My Logo"></td>
<td align="left" style="padding:0px 0px 0px 10px; margin:0px 0px 0px 0px; margin-bottom:0px;" height="118">
<p style="font-family:'Calibri','tahoma','sans-serif'; font-size:13px; line-height:19px; color:#262626; margin:0px 0px 0px 0px; padding:0px;margin-bottom:0px;">
<font style="font-size:15px;"><b>Joe Soap</b> | Senior Developer</font>
<br/>
Telephone: <a href="skype:CompanyName?+27 21 777 7777" style="color:#005f6b; text-decoration: none;">+27 21 777 7777</a>
<br/>
Mobile: <a href="skype:Joe Soap?+27 88 888 8888" style="color:#005f6b; text-decoration: none;">+27 88 888 8888</a>
<br/>
Address: <font style="color:#005f6b">Some Address, 7700, Cape Town, South Africa</font>
<br/>
Website: <a href="#" style="color:#005f6b; text-decoration: none;">www.somecompany.com</a> | <a href="#" style="color:#005f6b; text-decoration: none;">www.anotherdomain.com</a>
<br/>
Email: <a href="mailto:[email protected]" style="color:#005f6b; text-decoration: none;">[email protected]</a>
</p>
</td>
</tr>
</table>
Does anyone know what this could be?
What you're seeing is Outlook.com's line-height increasing 'feature'.
What you need to do is put <div class="ExternalClass>
after the opening and before the closing <body>
.
in your <style>
tag, add .ecxExternalClass{line-height:100% !important;}
Outlook tacks 'ecx' in front of all your classes in your HTML and the style tag. If you already have the ecx, it ignores it in the style tag.