Solved

How can I get my spacing accurate in the new editor in Outlook?

  • 5 April 2023
  • 3 replies
  • 498 views

Badge +1

The classic editor allowed me to tame Outlook’s (desktop) rendering quirks, but now we’re being forced into a new editor experience that seems to no longer support the ability to use conditional comments in the HTML.

Here’s a depiction of the issue:

Outlook version:
Microsoft® Outlook® for Microsoft 365 MSO (Version 2302 Build 16.0.16130.20332) 64-bit

The conditional comment is designed to create space between the paragraph (“Feature_block_copy”) and the button and looks like this (in blue):

<p style="mso-line-height-rule: exactly; line-height: 24px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px;">Feature_block_copy</span></p>

<!--[if mso]><p style="mso-line-height-rule: exactly; line-height: 16px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: red;"> </span></p><![endif]-->

<p style="text-align: center;"><a href="link_url" …

The problem may be that Klaviyo is rewriting that opening tag to include a space after the 2 dashes: <!-- [if mso]> (all of Klaviyo’s template comments are written correctly, e.g., <!--[if !true]>]), so not sure what’s going on here).

Any attempt to eliminate that space fails, as it just puts it right back after exiting the editing mode for that block.

I have a workaround for this specific case, but in general, as counterintuitive as it sounds, using MSO comments is a much cleaner way to adapt an email for the Word rendering engine. They allow you to keep all of the default style properties intact so that you can be 99% confident in knowing what you see in the editor is what you’ll see in Gmail, Outlook (web), Yahoo, AOL, etc.

icon

Best answer by Taylor Tarpley 7 April 2023, 22:31

View original

3 replies

Userlevel 7
Badge +60

Hi @doug s

 

Thanks for sharing your question with us! 

 

I can understand that originally adding MSO comments is supposed to help your emails render how you want in Outlook, but can I ask if you have tested the email without those inline codes through the new editor? Some improvements of our new editor intended to tackle were issues like this in Outlook!

 

Thanks for your participation i the Community!

-Taylor

Badge +1

I realized this morning that I was working with an existing template created in the classic editor that was converted to the new editor, so I thought, why not create some content fresh, in the new editor; that maybe things will play nice(r).

  • I dragged a split onto the page, keeping both columns as Text.
  • Using the WYSIWYG editor only—not going into the source code—I typed two paragraphs in the 1st column, and three paragraphs in the 2nd column.
  • After all my copy was entered, I went back into the 2nd column, clicked into the source, and inserted my ‘spacer paragraph’ conditional comment:

<!--[if mso]><p style="mso-line-height-rule: exactly; line-height: 30px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: 30px;">&nbsp;</span></p><![endif]-->

  • When I was in the source, I noticed that none of my paragraphs were in <p> tags, but instead wrapped in <div>s. I didn’t change anything, figuring this was intentional and styling would be applied to accommodate all email client scenarios.
  • I saved and sent the test.

I received the test in my Outlook and there was no spacing between any of the “paragraphs”—in either column—which was the result I initially expected from having them inside of <div>s.

I also noticed that my conditional comment ‘spacer’ didn’t take effect either, so I suspected that the Klaviyo engine inserted a space between the two dashes and the left bracket in the opening of the comment. Heading back into the editor, I found I was correct. And there is nothing I can do to remove that space; it always gets put back when I exit the module.

I found that in order to change the <div>s into actual <p>s—without going into the source and editing those tags manually—I had to select all the text, apply a different formatting (I chose “Formatted”) than what it was displaying initially (which was “Normal”), then selecting the text again and re-applying “Normal.”

Heading back into the source now revealed the paragraphs actually formatted with paragraph tags. I re-sent the test…

…and there was still no spacing between paragraphs in Outlook.

The problem is that the paragraphs are styled with padding-bottom: 1em and Outlook doesn’t honor padding on paragraphs (or <div>s, for that matter). It does honor margin, though, so that is my work-around: to go into the source of every paragraph in the email where I need to ensure spacing and override the padding-bottom and add a margin-bottom. (Margin also plays nice with our “Big Three” clients: Gmail, Outlook web, and Yahoo.)

*Again, my references to “Outlook” refer to the Outlook desktop app in Windows, the one powered by Word since 2007.

Userlevel 7
Badge +60

 Hi @doug s

 

Thank you for going in and testing this so thoroughly again to gain more data behind this odd behavior! 

 

 

The problem is that the paragraphs are styled with padding-bottom: 1em and Outlook doesn’t honor padding on paragraphs (or <div>s, for that matter). It does honor margin, though, so that is my work-around: to go into the source of every paragraph in the email where I need to ensure spacing and override the padding-bottom and add a margin-bottom. (Margin also plays nice with our “Big Three” clients: Gmail, Outlook web, and Yahoo.)

*Again, my references to “Outlook” refer to the Outlook desktop app in Windows, the one powered by Word since 2007.

 

Thank you so much for finding this helpful workaround from all your hard work! I have also talked with template colleagues on the product team and upon further investigation have seen this as an issues others have surfaced as well. Another workaround they mentioned is using separate text blocks for each paragraph. 

 

Thank you for your hard work and testing again @doug s, I know this conversation might help another Community member in the future when facing this issue!

 

-Taylor 

Reply