Search code examples
htmlemailoutlookelectronic-signature

Outlook HTML email signature

Hi I've created an email signature for outlook, it seems to work ok so far except for one thing. Outlook seems to take my html and output it differently than what I've actually created. It adds all kinds of p classes and span classes, and changes the inline css.

This is what my code looks like: 

<table cellpadding="0" cellspacing="0">
    <tr>
        <th rowspan="7" style="padding-right:10px;">
            <img alt="birdLogo" src="http://actforperformance.com/wp-content/uploads/2013/12/esigLogo.png"/>
        </th>
        <th rowspan="7" style="padding-right:2px; ; background-color:#FFEA66;">
        </th>
            <td style="padding-left:10px; padding-bottom: 3px; color: #747b82; font-size: 13px; font-weight: bold; font-family: sans-serif; text-transform:uppercase;">
               Franke Hendrik Toornstra
            </td>
    </tr>
    <tr>
      <td style="padding-left:10px; color: #747b82; font-size: 12px; font-weight: bold; font-family: sans-serif;">Président</td>
    </tr>
    <tr>
      <td style="padding-left:10px; padding-bottom: 3px; color: #747b82; font-size: 12px; font-weight: bold; font-family: sans-serif;">Expert en Management public</td>
    </tr>
    <tr>
      <td style="padding-left:10px; color: #747b82; font-size: 11px; font-weight: 400; font-family: sans-serif;">skype: franketoornstra</td>
    </tr>
    <tr>
      <td style="padding-left:10px; color: #747b82; font-size: 11px; font-weight: 400; font-family: sans-serif;">cell: +1 418 446 2113</td>
    </tr>
    <tr>
      <td style="padding-left:10px; color: #747b82; font-size: 11px; font-weight: 400; font-family: sans-serif;">tel/fax: +1 418 903 1647</td>
    </tr>
    <tr>
      <td style="padding-left:10px; color: #747b82; font-size: 11px; font-weight: 400; font-family: sans-serif;"><a href="http://actforperformance.com">www.actforperformance.com</a></td>
   </tr>

Everything gets changed around, font sizes get converted to points, and all get much smaller. The line "skype: franketoornstra" gets outputted on two seperate lines, both wrapped in <p class="MsoNormal> and a .

Actually all text elements get wrapped in <p class="MsoNormal> and gets styled with a 12px font size. The result is that the fonts size doesn't change but the line spacing is set to accommodate 12px, so the line space is too large as my font is smaller.

I can't fix it by styling specific classes created by outlook since I'm doing inline styling. So I'm a bit baffled as to how anyone can create a html signature if outlook behaves this way.

Solution

  • The MsoNormal issue is unavoidable in Outlook. Because it uses the MS Word engine to render html email, it wraps everything in p tags. There is also a minimum tr height of 19px in Outlook, which is probably the cause of your rows expanding.

    Unfortunately you'll have to design around these quirks. Here is your signature in a much more Outlook-friendly format:

    <table width="400" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="87" height="82">
      <img alt="birdLogo" src="http://actforperformance.com/wp-content/uploads/2013/12/esigLogo.png" width="77" height="82" style="margin: 0; border: 0; padding: 0; display: block;">
    </td>
    <td width="3" bgcolor="#FFEA66">

    </td>
    <td width="310" height="82" style="padding-left:10px; font-family: sans-serif; color: #747b82; font-size: 12px;">
      <font style=" text-transform:uppercase; font-size:13px;"><b>Franke Hendrik Toornstra</b></font><br>
      <b>Président</b><br>
      <b>Expert en Management public</b><br>
      skype: franketoornstra<br>
      cell: +1 418 446 2113<br>
      tel/fax: +1 418 903 1647<br>
      <a href="http://actforperformance.com">www.actforperformance.com</a>
    </td>
  </tr>
</table>