2

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:myemailaddress@somecompany.cm" style="color:#005f6b; text-decoration: none;">myemailaddress@somecompany.com</a>
        </p>
    </td>
</tr>
</table>

Does anyone know what this could be?

Dave New
  • 38,496
  • 59
  • 215
  • 394
  • 3
    No issues from my Outlook account. Instead of setting `height="118"` try `style="max-height: 118px;"` on the `table` and remove the `height` attribute from the `td`. – Christopher Esbrandt Mar 31 '15 at 12:14
  • 1
    @AoN: I tried this now. Same problem unfortunately – Dave New Mar 31 '15 at 12:58
  • 1
    As I toyed with the signature a little, I noticed that `Outlook.com` was replacing the spaces with ` `, which then caused extra spacing. Try removing all spaces between your tags (minify the code) so it would be something like `
    ` (no spaces and no line breaks).     – Christopher Esbrandt Mar 31 '15 at 13:01
  • 1
    @AoN: Thanks for all the help. Unfortunately this didn't work either! I used [this tool](https://kangax.github.io/html-minifier/) to minify. – Dave New Mar 31 '15 at 13:09
  • 1
    I'm sorry, I'm just not able to duplicate the issue after minifying your original code, or substituting the height for styling, and I've loaded it in IE10, IE11, FF36, and Chrome 41. You may have to bring it up to Microsoft, or replace the `table` with a `div` structure. – Christopher Esbrandt Mar 31 '15 at 13:55
  • 1
    What are you sending it out from? If you are sending from Outlook (desktop client) for some reason the gmail app (both on iOS and Android) and outlook.com both add extra spacing to bottom due to the extra html code that Word adds in. There is no real way to solve this from anything I have found. – Gortonington Mar 31 '15 at 18:44

1 Answers1

0

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.

zazzyzeph
  • 1,727
  • 1
  • 12
  • 19