Search code examples
htmlcssemailoutlook

Different display of email signature in browser and MS Outlook

With the following code I styled my email signature and it looks good in different browsers. But in MS Outlook there is something wrong with the size and the line height.

<table aria-hidden="true" cellspacing="0" cellpadding="0"  width="652" style="margin: 0; max-width: 100%;">
  <tr>
    <td style="font-family:'Calibri', sans-serif;font-size:10pt;overflow:hidden;padding-left:2px;word-break:normal;text-align:left;vertical-align:top" colspan="7">
      Some text<br>
    </td>
  </tr>
  <tr>
    <td rowspan="3">
        <img src="https://via.placeholder.com/133x105.png?text=Image" width="133" alt="" style="display: block; margin: 0; padding-top:2px;max-width: 100%;" />
      </td>
    <td width="111" valign="top" style="padding-left:15px;">
      <p style="font-family:'Calibri', sans-serif;font-size:10pt; margin: 0;">
        <strong>John Doe</strong><br />Text
      </p>
    </td>
    <td valign="top">
        <img src="https://via.placeholder.com/251x63.png?text=Image" width="251" alt="" style="display: block; margin: 0; max-width: 100%;" />
       </td>
    <td valign="top" colspan="4">
        <img src="https://via.placeholder.com/142x63.png?text=Image" width="142" alt="" style="display: block; margin: 0; max-width: 100%;" />
      </td>
  </tr>
  <tr>
    <td valign="top" style="padding-left:15px;" colspan="2">
        <p style="font-family:'Calibri', sans-serif;font-size:9pt;line-height:12pt;">
        1234 5698 56
        </p>
      </td>
    <td valign="top" colspan="4">
        &nbsp;
    </td>
  </tr>
  <tr>
    <td valign="top" style="padding-left:15px;" colspan="2">
        <p style="font-family:'Calibri', sans-serif;font-size:9pt;line-height:10pt;">
        [email protected]<br>Comapny Name | Street | ZIP City
        </p>
      </td>
    <td valign="bottom">
        <a href="#"><img src="https://via.placeholder.com/55x29.png?text=Image" width="55" alt="youtube" style="display: block; margin: 0; max-width: 100%;" /></a>
      </td>
    <td valign="bottom">
        <a href="#"><img src="https://via.placeholder.com/30x29.png?text=Image" width="30" alt="Marbo Mediengruppe" style="display: block; margin: 0; max-width: 100%;" /></a>
      </td>
    <td valign="bottom">
        <a href="#"><img src="https://via.placeholder.com/30x29.png?text=Image" width="30" alt="Instagram" style="display: block; margin: 0; max-width: 100%;" /></a>
      </td>
    <td valign="bottom">
        <a href="#"><img src="https://via.placeholder.com/27x29.png?text=Image" width="27" alt="facebook" style="display: block; margin: 0; max-width: 100%;" /></a>
      </td>
  </tr>
</table>

In browser it looks like as it should. signature in browser

And in outlook it looks like signature in MS Outlook

I tried to set up the line height without any results.

Solution

  • Outlook uses Word for rendering message bodies. You can find supported and unsupported HTML elements, attributes, and cascading style sheets properties in the Word HTML and CSS Rendering Capabilities in Outlook article.