CODEWITHSUNDEEP
cssoutlookhtml-email
jsuissa
jsuissa

Reputation: 1762

CSS line spacing issue in Outlook email signature

We're testing this email signature in Outlook and are encountering an issue where an extra few pixels of line spacing is appearing before the last line.

This seems related to the way Outlook renders HTML versus other email clients or site. If anyone has advice on how to fix this or if it's even possible.

We've done a bit of research and so far nothing has helped, but we were able to confirm this is not occurring anywhere but in versions of Outlook.

<body>
<p><br />
  <br />
  <span style="line-height: 14px; color: #414042; letter-spacing: 1px; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;">FIRST NAME</span><br />
  <span style="line-height: 14px; color: #414042; font-style:italic; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;">partner</span><br />
  <span style="line-height: 14px; color: #414042; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;">&nbsp;</span><br />
  <span class="appleLinks" style="line-height: 14px; color: #414042; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;">111&nbsp;Adress&nbsp;Plaza&nbsp;|&nbsp;14<sup style="font-size: 8px; line-height: 0; vertical-align: 3px">th</sup>Floor&nbsp;|&nbsp;New&nbsp;York,&nbsp;NY&nbsp;10122</span><br />
  <span class="appleLinks" style="line-height: 14px; color: #414042; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;">tel: 212.xxx.xxxx&nbsp;|&nbsp;fax: 212.xxx.xxxx</span><br />

  <a style="line-height: 14px; color: #2D4F68; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;" href="mailto:email@websitecom">[email protected]</a>&nbsp;
  <a style="line-height: 14px; color: #2D4F68; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;" href="http://www.linkedin.com/in/xxx">LinkedIn</a>&nbsp;
  <a style="line-height: 14px; color: #2D4F68; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;" href="http://www.website.com">www.website.com</a><br /><br />  
<span style="line-height: 14px; mso-line-height-rule:exactly; color: #414042; font-size: 9px; font-weight:bold; font-family:Georgia, 'Times New Roman', Times, serif; letter-spacing: 1px;">TAGLINE<br />
</span><span style="line-height: 14px; mso-line-height-rule:exactly; color: #414042; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;">Service Name | Service Name | Service Name<br /></span><span style="line-height: 14px; mso-line-height-rule:exactly; color: #414042; font-size: 10px; font-family:Georgia, 'Times New Roman', Times, serif;">Service Name | Service Name</span>
</p>
</body>

Upvotes: 0

Views: 3357

Answers (1)

charliez
charliez

Reputation: 163

The support for CSS in Outlook 2007 was removed in favour of the Word rendering engine. Does your email render correctly in older Outlooks?

The only way to actually fix the problem is to do it by the old fashioned way of tables. You should be able to achieve what you want that way, and tables are of course supported by other email readers. It is a bit of a hassle, but the only way as far as I know...

Upvotes: 1

Related Questions