13 Replies Latest reply on Mar 22, 2017 9:26 PM by Dave Roberts

    Email Editor line spacing

      Guys - am I the only one having line spacing issues with the email editor? I create an email and it renders correctly. Then when I preview or send myself a test, they are missing line breaks.

       

      Today I created an email that rendered perfectly. I sent myself a test and it rendered perfectly. Then, when I sent the email (to 70 of my most important customers), it was missing a line break.

       

      Here's the correctly formatted email (this was a test sent to my inbox):

      Here's what was sent out (notice line break missing after #3:

       

      Any advice? This is incredibly frustrating!

        • Re: Email Editor line spacing
          Dayna Wellman

          Hi Joey,

          Which email client are you using and do you know what your clients use? Emails render differently in each client, which could explain the difference. Bullet lists like what you have are usually a problem area. I recommend hard coding a break "<br>" in your HTML code for your email after the bullets and before the next paragraph and that should take care of it, but you'll want to test the email in multiple clients if possible. Litmus is a great tool where you can check how your email looks across multiple email clients and mobile devices.

           

          I'm happy to help show you where to place the break if you post a screen shot of your code.

          • Re: Email Editor line spacing
            Dave Roberts

            Hey Joey,

            1. Could you post the HTML you're using in that section to make your list in the editable section? Feel free to inbox me at dave@digitalpi.com if your more comfortable with that than posting it.
            2. When you say 'line-break' - do you mean an actual <br> tag or the space after the list element or both?

             

            One possible issue could be what @Joe Reitz mentioned above (<div>/<p>/none) -

            Personally, I use the "none" option, so that Marketo isn't adding any additional HTML to my editable areas. I've found in testing thru Litmus that if you don't account for (and unless you do it inline, for some email clients, you can't account for) styling <div> and <p> elements in your code that these settings can skew your layout somewhat. This is because different email clients have different "default" standards (styles) for <p> and <div> elements and will render them "natively" unless you've declared them otherwise [inline, or in your <style> tag (which isn't read by some clients)]. This means the result is "erratic" line spacing depending on the client you are using to render the email code, b/c all of your editable elements are now wrapped in an additional <p> or <div> container (sometimes).

             

            Another possibility has more to do with the "-webkit" attributes of list item displays.

            Again, depending on the email client, lists will be rendered with a "-webkit-margin-* ".

            For Chrome, the default settings for an ordered list (ex - the list above in this message) look like this in the inspector:

             

            ol {

             

            1.    display: block;
            2.    list-style-type: decimal;
            3.    -webkit-margin-before: 1em;
            4.    -webkit-margin-after: 1em;
            5.    -webkit-margin-start: 0px;
            6.    -webkit-margin-end: 0px;
            7.    -webkit-padding-start: 40px;

             

            That "-webkit-margin-before:1em;" and "-webkit-margin-after:1em;" are adding space before and after your list element. That's something that gets added in by the browser (Chrome), so it may have something to do with why you sometimes see it and sometimes don't. Outlook for example, is not a "webkit" browser (client) so this isn't an issue there (but padding is). Rather than try to balance all of that and to be sure, I add a style inline to my lists to override that default to 0px [reset] - so it'd look something like this:

             

            <ol style="-webkit-margin-before:0px !important;-webkit-margin-after:0px!important;">

               <li>List Item 1</li>

            </ol>

             

            --

             

            The safest way to add vertical spacing to an email is with "line-height".

            If you wanted to add some "padding" or a "margin" to the top / bottom of that list, i'd add a <div> or <td> (depending on your Framework) above & below the list that looked like this:

             

            <!-- This is a 20px vertical spacer -->

            <div style="line-height:20px;font-size:20px;"> </div>

            <!-- LIST HERE -->

            <div class="mktoText" id="ListName" mktoname="List 1: ListName">

            <ol style="-webkit-margin-before:0px!important;-webkit-margin-after:0px!important;">

               <li>List Item 1</li>

            </ol>

            <!-- This is a 20px vertical spacer -->

            <div style="line-height:20px;font-size:20px;"> </div>

             

            ** NOTE: It's subtle, but Yahoo! does a better job of respecting an "!important" rule if there is no space between the "__px" and it. The spacer <div>s should also have "& nbsp ;" (w/ no spaces) in the middle of them to hold an "empty" space 20px tall [it renders a blank character in the code above rather than the non-breaking space] **

             

            Hope this was helpful, please let me know if you've got any questions or if this helped to solve your issue?

             

            Cheers!

            -Dave

            3 of 3 people found this helpful