Bullets aren't rendering correctly in email (formatting)

[Anonymous]

Hi Akshay. No luck - same result.

[Itay_Billet4]

Hi Akshay, is there a way to control the bullet size?

[Carlito_Jay_Ala]

One workaround so you can have overall control about your bullets is using a <table> tag instead of a <ul> tag and using &bull; as your bullet point.

It's like,

<table>

    <tr>

          <td>&bull;</td><td>your points</td>

    </tr>

</table>

will look like this ↓

•	your points

Just a workaround.

[Akshay_Pant]

Hi Carl Alap​,

It may cause render issues in outlook.

Thanks!!

[Daniel_Petrucci]

That's not true. Support for table elements in just about every medium is greater than css2/3 especially in Outlook.

The solution that Carl provided is just about the the most bulletproof means of support for bullet/number lists.

The following is the module I've worked with personally for over 2 years that has given limited to zero issues with any of the spacing issues mentioned in this thread.

<code>
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="bulletList" mktoname="Bullet List" class="mktoModule" style="text-align:left; width:100%; border-collapse:collapse; max-width:####px;">

                <tbody>

                  <tr>

                    <td style="padding: 18px 10px 5px 20px;" align="left" valign="top" class="bullets mktEditable" id="bltList" mktoname="bltList">

                      <table style="border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" width="100%">

                        <tbody>

                          <tr>

                            <td style="font-family:helvetica,arial,sans-serif;font-size: 13px; color: #000000; mso-line-height-rule: exactly; line-height: 19px;" align="center" valign="top">-</td>

                            <td style="padding-left: 8px; font-family:helvetica,arial,sans-serif; font-size: 13px; color: #000000; mso-line-height-rule: exactly; line-height: 19px;" align="left" valign="top">Support of FERPA, GLBA and HIPAA compliance</td>

                          </tr>

                          <tr>

                            <td style="font-family:helvetica,arial,sans-serif; font-size: 13px; color: #000000; mso-line-height-rule: exactly; line-height: 19px; padding-top: 6px;" align="center" valign="top">-</td>

                            <td style="padding-left: 8px; font-family:helvetica,arial,sans-serif; font-size: 13px; color: #000000; mso-line-height-rule: exactly; line-height: 19px; padding-top: 6px;" align="left" valign="top">Remote deployment and management tools for installing and configuring backup policies across all computers</td>

                          </tr>

                          <tr>

                            <td style="font-family:helvetica,arial,sans-serif; font-size: 13px; color: #000000; mso-line-height-rule: exactly; line-height: 19px; padding-top: 6px;" align="center" valign="top">-</td>

                            <td style="padding-left: 8px; font-family:helvetica,arial,sans-serif; font-size: 13px; color: #000000; mso-line-height-rule: exactly; line-height: 19px; padding-top: 6px;" align="left" valign="top">Free, award-winning U.S.-based support, 7 days/week</td>

                          </tr>

                        </tbody>

                      </table></td>

                  </tr>

                </tbody>

              </table>

</code>

[Akshay_Pant]

Hi Itay Billet​,

Yes, It is possible.First of all you have to create image of bullets and then upload in marketo and after that you have to create two td's in tr (one for the image and other for text) and give the same style to both td's like font size and line-height.

For eg.

<table>

    <tr>

          <td style="font-size: 1px; line-height: 1px;"><img src=".png"></td>

<td style="font-size: 1px; line-height: 1px;">your points</td>

    </tr>

</table>

Thanks!!

[Carlito_Jay_Ala]

Hello Akshay Pant​,

&bull; is already an HTML character, so there's no need really to use images unless of course you wanted to use other illustrations aside from a bullet point.

[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