Double Spacing suddenly not working in pre-built emails

[Guitarrista82]

Hello,

We've noticed this past week that a number of our pre-built emails have lost the spacing between the text in a specific module which is a simple RTE.

I've combed through our email template looking at the CSS and html code and the module itself, but cannot identify a potential cause.

Specifically, when I open the module to edit the copy, the spacing appears fine. But then when I close the module and simply view the email either in edit or preview mode, the spacing goes away. It also does not appear in the sent email. 

RTE Open:

RTE Closed:

This is likely affecting hundreds of existing emails we use to onboard new customers and keep them informed of their membership benefits.

If it helps, below is the module code:

<tr class="mktoModule" mktoname="Module 29 | CopyText" id="Module_29_CopyText" mktoaddbydefault="false">
          <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:${section_top_space_01} 0px ${section_bottom_space_01} 0px;">
            <table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; width:600px; table-layout:fixed;" bgcolor="${Mod_01_BG_Color}">

              <tbody>
                <tr>
                  <td width="42" style="border-collapse: collapse; mso-line-height-rule: exactly; width:42px;" class="em_side14">&nbsp;</td>
                  <td align="center" valign="top" class="em_defaultlink" style="padding:10px 0px 10px 0px;font-family:'Helvetica', Arial, sans-serif;font-size:14px;line-height:${Mod_29_Line_height};color:${Mod_27_paraFont_Color};">
                    <div id="paratext_28B" mktoname="Paragraph text" class="mktoText">
                      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                      At vero eos et accusam et justo duo dolores et ea rebum.
                      Stet clita kasd gubergren, no sea takimata sanctus est Lorem
                    </div>
                  </td>
                  <td width="42" style="border-collapse: collapse; mso-line-height-rule: exactly; width:42px;" class="em_side14">&nbsp;</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>

Has anyone seen this happen before? Any ideas what could be the root cause?

Thank you,

LK

[Christiane_Rode]

What does it look like when you preview the emails in email clients?

The web view in Marketo often does not match the inbox rendering (especially Outlook, which can have its own issues with supporting padding) -- are you seeing this issue with your test emails?

[Guitarrista82]

Hi Christiane,

Unfortunately it appears the same way in Outlook and Gmail. 

I haven't tested other clients but those are two of the ones we prioritize.

Thanks,

LK

[WolframLotz]

Hi @Guitarrista82 

are you speaking about the line breaks between "around the world"/"why members" AND "...with us"/"Enjoy deep..."? 

Basically to say something concrete I should see the real code. Click this button for the real code 

(But I assume that it is about the type of your line break and your definitions. There are line breaks adding </ br> in the code and there are line breaks which end a p-tag and start a new one. 

Can you click on HTML and show your code one time?

Unfortunatly the template code will not show the specific situation.

Best regards
Wolfram

[Guitarrista82]

Hi @WolframLotz ,

Yes, the screenshot below shows the preferred spacing we would like as it appears when the RTE is open:

However, when I close the RTE, it appears like this below and also when the email is sent:

Below is the code:

<p style="text-align: left;"><span style="color: #000000; font-size: 14px;"><strong>Hi {{lead.First Name:default=Valued Member}},</strong></span></p>
<p style="text-align: left;"><span style="font-size: 14px; color: #000000;">Explore everywhere from far-off cities&nbsp;to close-to-home destinations with the ease of a guided tour. Enjoy specially curated itineraries sure to please&nbsp;people of all ages, activity levels and group sizes!</span></p>
<p style="text-align: left;"><span style="font-size: 14px; color: #000000;"><strong><span style="text-decoration: underline;">Why Our Members  Tours</span>:</strong></span></p>
<p style="text-align: left;"><span style="font-size: 14px; color: #000000;"><span style="color: #000000; text-align: left;"><strong style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><b style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><strong style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span style="color: #008000; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">✔&nbsp;</span></strong></b></strong>Visit multiple bucket list destinations in one trip</span><span style="color: #000000; text-align: left;">&nbsp;</span><br style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" /><span style="color: #000000; text-align: left;"><strong style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><b style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><strong style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span style="color: #008000; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">✔&nbsp;</span></strong></b></strong>Lodging, transportation and most meals included</span><br style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" /><span style="color: #000000; text-align: left;"><strong style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><b style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><strong style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span style="color: #008000; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">✔&nbsp;</span></strong></b></strong>Perfect for solo travelers, groups and families<br style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" /><span style="color: #000000; text-align: left;"><strong style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><b style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><strong style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span style="color: #008000; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">✔&nbsp;</span></strong></b></strong>Variety of activity levels to choose from</span><br style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" /><span style="color: #000000; text-align: left;"><strong style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"><b style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><strong style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span style="color: #008000; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">✔&nbsp;</span></strong></b></strong>Expert local tour guides</span></span></span></p>
<p style="text-align: center;"><span style="font-size: 14px;"><strong><span style="color: #000000;">Call <span style="text-decoration: underline;"><a href="tel:18553027794" target="_blank">(855) 302-7794</a></span><a href="{{lead.brand phone pm weekly callto}}" target="_blank"></a></span></strong><span style="color: #000000;"><strong><a href="{{lead.brand phone pm weekly callto}}" target="_blank" style="color: #000000;"></a>&nbsp;for booking assistance.</strong></span></span></p>

Thank you,

LK

[Dave_Roberts · Accepted solution]

This looks like someone copy/pasted text from another source into the Rich Text Editor (rather than using the "paste as plain text" option). Anytime you see "widows: ___" in the CSS, that's my clue that something's not setup right. Basically, Marketo tries to help you out by preserving the CSS from the source you copy from when you paste text content into the Rich Text Editor. This usually looks like a string of styles that's four-to-five lines long -- and it's usually what's making things turn out wonky. 

A part of the issue here is that the Rich Text Editor display you see in the editor panel is web-based and when you send an email it's not so there's an expected difference between "what you see" and "what you actually get" when working with the RTE. 

The first few lines of the code look more like "normal" paragraphs:

<p style="text-align: left;"><span style="color: #000000; font-size: 14px;"><strong>Hi {{lead.First Name:default=Valued Member}},</strong></span></p>
<p style="text-align: left;"><span style="font-size: 14px; color: #000000;">Explore everywhere from far-off cities&nbsp;to close-to-home destinations with the ease of a guided tour. Enjoy specially curated itineraries sure to please&nbsp;people of all ages, activity levels and group sizes!</span></p>
<p style="text-align: left;"><span style="font-size: 14px; color: #000000;"><strong><span style="text-decoration: underline;">Why Our Members  Tours</span>:</strong></span></p>

 ... but then after that it gets a little wild...

<p style="text-align: left;">
<span style="font-size: 14px; color: #000000;">
<span style="color: #000000; text-align: left;">
<strong style="color: #000000; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">
<b style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;">
<strong style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;">
<span style="color: #008000; font-family: Helvetica, Arial, sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; float: none; display: inline !important;">
✔&nbsp;
</span>
</strong>
</b>
</strong>
Visit multiple bucket list destinations in one trip
</span>

<span style="color: #000000; text-align: left;">&nbsp;</span>

<br style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" /> ...

Above: I've added some line breaks between the elements to try and make this a bit more legible. You'll notice there is a TON of code here to represent:

✔ Visit multiple bucket list destinations in one trip 

You'll notice that even the line break (<br>) is highly stylized and that's completely unnecessary -- that's another clue that something funky is going on with the code that you can pick up by looking at the actual HTML (because it'll look right in the RTE preview window b/c it's web-based).

SOLUTION(S):

✔ Remove all the noisy inline styling: Try taking out everything below the first couple of "normal" looking paragraphs and getting those setup more like the ones at the top (without all the inline styles). This might help to clear up the lack of double-spacing for you. 

✔ Use the "paste as plain text" option: If you're ever going to paste text directly into the RTE window there, you'll always always always want to use the "paste as plain text" option (Ctrl+Shift+V on Chrome/PC - or right-click and find it in the menu on other browsers). This will basically omit the 4-5 extra lines of inline styling from the source (wherever you copied the text from) and just put in the actual letters. I normally recommend to users during training sessions to highlight everything except the first and last character in a line (for example a headline) and then use the "paste as plain text" option to replace everything in the middle. This will make sure you preserve the tags around the element and don't rip out any of the styling or classes, etc. After than you can easily delete the first and last character for much less chaotic editing experience. 

To clean up the code, try opening the HTML editor and using this as a shell for your content:

<p style="text-align: left;color: #000000; font-size: 14px; line-height: 19px"> 
... add your paragraph content here ...
</p>
<p style="text-align: left;color: #000000; font-size: 14px; line-height: 19px"> 
... add another line of content here below the previous paragraph <br> 
Use one break for a 'single space' <br>
<br> 
and two breaks for a 'double space' ...
</p>

[Guitarrista82]

Thank you, @Dave_Roberts! 

I appreciate you taking the time to review my code and provide detailed feedback. I did discover that there was a small line of code that had been buried in the CSS styling that was affecting the overall paragraph spacing. However, I agree that there is a lot of gunk in the code as well that needs to be cleaned up.

Thanks again.

LK