Question

Today I was testing emails and email signatures with outlook.com and while I'm sending from Outlook 2007 I found both add the usual unnecessary paragraph with msoNormal class around my content in the table cells.

That give stupid 13.5pt line-height and other paragraph 14pt bottom margin.

I did managed the line-height issue but I still receive it on outlook.com with that bottom margin (14pt) with spans inside or only text .. with styling or not while it's fine on all other mail providers / clients.

HTML for test

<table border="0" cellspacing="0" cellpadding="0" width="100%">
   <tr>
      <td width="80" style="height:13px;">data</td>
      <td style="height:13px;">data</td>
   </tr>
   <tr>
      <td width="80" style="height:13px;">data</td>
      <td style="height:13px;">data</td>
   </tr>
   <tr>
      <td width="80" style="height:13px;">data</td>
      <td style="height:13px;">data</td>
   </tr>
</table>

Screenshots

Here after a couple of screenshots for the problem with and without styling:

With spans and links inside and style for the cells

Without any type of styling

Without any type of styling

Here is how it should be and how it appears on Gmail while it was sent also from Outlook 2007 enter image description here

Was it helpful?

Solution

There is no way to avoid the Outlook msoNormal gaps on forwarding to Gmail. Here is an interesting article on the topic.

There are ways to limit it's effect though. The gap created between tables is bigger than the gap created between table rows. As you have rows, you are already experiencing the lesser.

The easiest fix would be simply combining your rows into one row with <br>'s separating the lines of text.

Example:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="100">
address<br>
phone<br>
fax
    </td>
    <td width="500">
: your address<br>
: your phone<br>
: your fax
    </td>
  </tr>
</table>

This may also have something to do with the min <td> height. Outlook has a minimum height of 19px, so anything smaller can create unwanted vertical space. There are some line-height hacks, you can try to work around this also.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top