How to remove Outlook extra space?

Question

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&nbsp;</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>
                                                                                         &nbsp;<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&nbsp;</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>
&nbsp;
<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.

Although somewhat relevant, you would likely receive a better response in Stack Overflow (for example: stackoverflow.com/questions/12321022/…) which mentions using border-collapse: collapse; in your CSS associated with the affected elements. — Gortonington, Commented Nov 18, 2019 at 15:18
Added border-collapse to every aspect of the button but i was still not able to reduce or nullify the problem described above. — Johannes Schapdick, Commented Nov 18, 2019 at 15:27
Just saw that you are using 3 content blocks for the above. The issue could be the wrapping Table tags around each content blocks that SFMC automatically fills in. Other than that, I would check out your 'innertd buttonblock' class in the Stylesheet and see if that overwrites anything you have inline — Gortonington, Commented Nov 18, 2019 at 17:09

Vishal Kumar C V · Accepted Answer · 2019-11-18 14:38:38Z

0

Try adding the .outlookfix class all tags.

<!--[if gte mso 9]>       
<style>
.outlookfix{font-size: 0%;line-height: 0;}
</style>
<![endif]-->

answered Nov 18, 2019 at 14:38

Vishal Kumar C V

2,0031 gold badge12 silver badges42 bronze badges

Thank you for your response. I tried it (with doubts). The result is that you actually make the text disappear in some cases. For example the Headline is inside a div without any tr involved (reference to deleted comment)-> Therefore a approach that deals with tr elements can't be successful. Adapting to div elements will actually hide them. Editing the template that it contains the class in its TR elements is therefore not test-worthy because the different spaces does not come from the template itself -> the content or lineheight is problematic. (Thats my analysis)
– Johannes Schapdick
Commented Nov 18, 2019 at 14:56

Add a comment |

Rachid Mamai · Accepted Answer · 2019-11-18 14:44:21Z

0

We had similar issues with Outlook as well. This is what was advised by the Salesforce support:

<style>
   /* Remove space around the email design. */
   html,
   body {
       margin: 0 auto !important;
       padding: 0 !important;
       height: 100% !important;
       width: 100% !important;
   }

   /* Stop Outlook resizing small text. */
   * {
       -ms-text-size-adjust: 100%;
   }

   /* Stop Outlook from adding extra spacing to tables. */
   table,
   td {
       mso-table-lspace: 0pt !important;
       mso-table-rspace: 0pt !important;
   }

   /* Use a better rendering method when resizing images in Outlook IE. */
   img {
       -ms-interpolation-mode:bicubic;
   }

 /* Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inline. */
   a {
       text-decoration: none;
   }
</style>

Reference:

https://www.contactmonkey.com/blog/outlook-rendering-issues

answered Nov 18, 2019 at 14:44

Rachid Mamai

4,7411 gold badge12 silver badges27 bronze badges

A lot of this stuff is already included in the salesforce standard css styling like margin 0 !important or padding 0px !important. I will try it once and come back with my findings.
– Johannes Schapdick
Commented Nov 18, 2019 at 15:03
It is a pity but this approach does not change something for the presented use case.
– Johannes Schapdick
Commented Nov 18, 2019 at 15:09
Does not surprise me at all. At the end, we had to do specific versions for some Emails clients and especially for Outlook.
– Rachid Mamai
Commented Nov 18, 2019 at 15:27

Add a comment |

Johannes Schapdick · Accepted Answer · 2019-11-18 15:54:47Z

0

Appearantly it all has to do with the templates body 1.15 line height.

When you set this to Single all of the described errors disappear. But i am still totally puzzled why inline styles with line height set to 100% are not changing anything. I am still investigating this issue, because i want to make sure that i can have the template set to 1.15 line height without these errors.

It really should be possible that you only configure the line height on blocks like i already tried. Inline styles with important should really kill the templates styles, but it seems they don't.

I'll keep you posted.

answered Nov 18, 2019 at 15:54

Johannes Schapdick

4,2482 gold badges14 silver badges44 bronze badges

1

Outlook Desktop doesn't really follow normal HTML processing as it utilizes 'Word HTML' and has custom processing (hence VML, etc.) so although it may make perfect sense objectively, to Outlook, it can mean something else entirely.
– Gortonington
Commented Nov 18, 2019 at 17:13

Add a comment |

Stack Exchange Network

How to remove Outlook extra space?

3 Answers 3

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged
marketing-cloud
email
css
.

Hot Network Questions

How to remove Outlook extra space?

3 Answers 3

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged marketing-cloudemailcss.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
marketing-cloud
email
css
.