Search code examples
htmlcssoutlookhtml-emailoutlook.com

HTML Email Signature Consistency in Outlook.com

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 Signature

Outlook.com:

Outlook.com Signature

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?

Solution

  • 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.