17 Replies Latest reply on Dec 23, 2017 9:25 PM by Carlito Jay Alap

    Bullets aren't rendering correctly in email (formatting)

    Erica Dipyatic

      Hi all - I'm baffled. My bullets aren't rendering correctly in my email. It's fine when I'm in the editor, but then when looking at the email, still in draft, the bullets aren't indented as desired.

       

      CODE

      <span style="font-size: 14px; color: #000000; font-family: arial, helvetica, sans-serif;">Check inquiries and verification</span> <br />

      <ul>

      <li><span style="color: #000000; font-family: arial, helvetica, sans-serif; font-size: 14px;">Individuals: Take the check in question...</span><br /></li>

      <li><span style="color: #000000; font-family: arial, helvetica, sans-serif; font-size: 14px;">Financial institutions: Call 1-800....</span></li>

      </ul>

       

      ATTACHMENTS

      Bullets_Email-Mkto.PNG

       

      TIA!

        • Re: Bullets aren't rendering correctly in email (formatting)
          Akshay Pant

          Hi Erica Dipyatic,

           

          The <ul> <li> takes by default padding and margin which creates the rendering issues on email clients. So, Please use the attached code:

           

          Regards,

          Akshay Pant

            • Re: Bullets aren't rendering correctly in email (formatting)
              Erica Dipyatic

              Thank you, Akshay Pant

              1 of 1 people found this helpful
              • Re: Bullets aren't rendering correctly in email (formatting)
                Brienne Edmonds

                Hey All

                I am having this issue - well similar- i am getting an extra space before my bullets begin. How do i get rid of that extra space??

                • Re: Bullets aren't rendering correctly in email (formatting)

                  Hi Ashkay. Could you please help me as well? I'm getting an extra bullet before my 2nd indents (client entertaining)

                   

                  <ul>
                  <li><font color="#414042" style="font-family:'Calibri', Arial, sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#414042;">All expense claims must be entered into and approved through the Concur expense system.<br></font></li>
                  <li><font color="#414042" style="font-family:'Calibri', Arial, sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#414042;">A number of expenses require pre-approval which are outlined in Appendix 1 of the policy. This includes all air travel which must be pre-approved by the employee&rsquo;s relevant Executive prior to making travel arrangements.<br></font></li>
                  <li><font color="#414042" style="font-family:'Calibri', Arial, sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#414042;">Expenses must be supported by local sales tax (VAT/GST etc.) receipts where applicable and receipts must be addressed to the employee&rsquo;s employing entity wherever possible e.g. hotel bills, conference costs, car hire etc.<br></font></li>
                  <li><font color="#414042" style="font-family:'Calibri', Arial, sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#414042;">Claims for expenses greater than 3 months from the transaction date will not be reimbursed.</font></li>
                  <li><font color="#414042" style="font-family:'Calibri', Arial, sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#414042;">Lunch is not a business expense, unless it is:</font></li>
                  <li style="list-style: none; display: inline">
                  <ul>
                  <li><font color="#414042" style="font-family:'Calibri', Arial, sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#414042;">Client entertaining.</font></li>
                  <li><font color="#414042" style="font-family:'Calibri', Arial, sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#414042;">An employee is travelling abroad.</font></li>
                  <li><font color="#414042" style="font-family:'Calibri', Arial, sans-serif; font-size:13px; line-height:18px; font-weight:normal; color:#414042;">Pre-approved by a member of the Executive team.</font></li>
                  </ul>
                  </li>
                  </ul>

                  Thank you!

                • Re: Bullets aren't rendering correctly in email (formatting)
                  Perkuto Access

                  Hi Erica,

                   

                  I made a lot of test with bullets. If you want a use the real bullet <ul><li></li></ul> I would say not to try to change the spacing to the left of the bullets. Keep the natural behavior of the bullets. The problem is mostly in Outlook, and you will have rendering issues that are too inconsistent. Some version of Outlook will just not render bullets at all, some version will render them badly and other correctly.

                   

                  But you can style the color of the bullet and the HTML shape, don't use images.

                   

                  Simply use that inline CSS

                  <ul>

                  <li style="color:#30a4dc; font-size:18px;"><span style="font-size: 15px; color:#585858;">Aliquam iaculis, orci at sollicitudin posuere</span></li>

                  </ul>

                   

                  A table option is also a good option and I think a lot of people already gives you examples. Just consider if it's for the email editor 1.0 or 2.0

                   

                  For email 2.0, you can create a row module so you can add as many bullets you need. You can use images as bullets. It's flexible and fully customizable.

                   

                  For email 1.0 it's not possible to use modules, so if you need to remove or add more bullets, you will need some basic knowledge in HTML, it may be a wrong idea if your team has many members and the HTML knowledge is not the same through all of them.

                   

                  Hope it helps you,

                   

                  Regards,

                   

                  Eric

                   

                  See our template here: Responsive Marketo Email 2.0 Templates | Perkuto