Currently we are trying to get rid of some differences in the email appearance across different email clients. And a special one seems to be Outlook (2016) once again.
We have a Layout with three content blocks that are aligned over each other.
Headline (as Freeform)
Text (as Text)
Button (as Button)
Our Template has set a line height of 1.15 set for the body (if we are not manually forcing it to behave differently, which we are not here).
The behaviour we see are bigger button size, different size in spacings (and other stuff like random white lines that are appearing, which are described here but are not in focus of this thread).
Outlook (2016)
Online View (or VAWP and other clients do show):
Now some Questions:
- Is this question correct here or shall i move it to stackexchange?
- How can i get rid of these extra little spaces in the emails?
- Does this has to do with the different blocks of salesforce that are aligned under each other?
What i tried so far is setting some conditional css which are exactly for Outlook but i have not experienced any change / improvement. For Example i did some css on the template:
<!--[if mso]>
<style type="text/css">
/* Begin Outlook Font Fix */
body, table, td {
font-family : Arial, helvetica, sans-serif;
mso-line-height-rule:exactly;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
line-height : 115%;
font-size : 16px;
color : #000000;
}
buttonstyles{
line-height : 100%;
}
/* End Outlook Font Fix */
</style>
<![endif]-->
I also tried setting lineheight to 100 with inline css directly at the button but it seems that there is not an improvement either.
The code of the block itself after being processed by salesforce looks like this
(there you an also see the inline test with lineheight rule and lineheight 100 with inline styling on the button):
<tr>
<!-- bottom 4 slot -->
<td align="center" class="header" valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="left" valign="top">
<table cellspacing="0" cellpadding="0" style="width:100%">
<tbody>
<tr>
<td class="responsive-td" valign="top" style="width: 100%;">
<table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td style="padding: 20px 20px 10px; " class="stylingblock-content-wrapper camarker-inner">
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr>
<td valign="top" class="responsive-td" style="width: 100%;">
<table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; border-top: 0px; border-right: 0px; border-bottom: 1px solid #000000; border-left: 0px; " class="stylingblock-content-wrapper">
<tr>
<td style="padding: 0px 0px 10px; " class="stylingblock-content-wrapper camarker-inner">
<div>
<span style="color:#000000;"><span style="font-size:24px;text-transform:uppercase;line-height : 100%;"><b>Hightlights </b></span><span style="font-size:24px;">xx XXXX</span></span></div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px; " class="stylingblock-content-wrapper camarker-inner"><span style=""><b>Salutation,</b></span><br>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat vel corporis illum ex dolorem! Soluta, cum esse, enim temporibus quibusdam omnis similique quia possimus officiis cumque a quas nobis consectetur.</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" style="background-color: transparent; min-width: 100%; " class="stylingblock-content-wrapper">
<tr>
<td style="padding: 10px 0px; " class="stylingblock-content-wrapper camarker-inner">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="innertd buttonblock" bgcolor="#E60000" style=" border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; background-color: #E60000;">
<a target="_blank" class="buttonstyles" style=" font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: left; text-decoration: none; display: block; mso-line-height-rule: exactly; line-height: 100%; background-color: #E60000; border: 1px solid #E60000; padding: 10px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;" href="XXX" title="" alias="Editorial_Button" conversion="false" data-linkto="https://">Button Text</a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
Code and description of the blocks in Salesforce
Freeform:
Configuration Border #000 1px bottom; padding-bottom 10px.
<div>
<span style="color:#000000;"><span style="font-size:24px;text-transform:uppercase;"><b>Highlights </b></span><span style="font-size:24px;">xx XXXX</span></span></div>
Text-Block:
Padding top and bottom: 10px
<span style=""><b>%%=v(@salutation)=%%</b></span><br>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat vel corporis illum ex dolorem! Soluta, cum esse, enim temporibus quibusdam omnis similique quia possimus officiis cumque a quas nobis consectetur.</div>
Button-Block:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="innertd buttonblock" bgcolor="#E60000" style=" border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; background-color: #E60000;"><a target="_blank" class="buttonstyles" style=" font-size: 16px; font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; text-align: left; text-decoration: none; display: block; background-color: #E60000; border: 1px solid #E60000; padding: 10px; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;" href="XXX" title="" alias="Editorial_Button" conversion="false" data-linkto="https://">Button Text</a></td>
</tr>
</table>
</td>
</tr>
</table>
The other styling of the template is kind of salesforce standard, therefore i think that i do not have to include this. Any hints or ideas are greatly appreciated.
Best Answer
Try adding the .outlookfix class all tags.