Strange additional bullet point in Outlook 2013

At the end of a newsletter I have a bullet point list. Outlook 2013 is the only email program that shows an additional point that shouldn't be there. No problem in all the other Outlook versions. Any idea what might causing this problem and how to fix it?

The Code is like this

<ul style="margin-top:0px;margin-bottom:18px;margin-left:19px;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<li>Text</li>
<li>Text</li>
</ul>

goatlady goatlady, 3 years ago

This is not very helpful, but I have also seen this during testing. The final copy for this particular newsletter was changed however (for other reasons, not because of the Outlook glitch), and once there was more copy under the bullet list the problem went away, so I didn't investigate further.


Need templates designed or built? Talk to me today: http://www.zingry.com/
roshodgekiss roshodgekiss, 3 years ago

How very strange! jacob1982 - are you continuing to see this phantom bullet point, even after changes are made like goatlady suggested? Love to know if anyone else has experienced this.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
Karmak, 3 years ago

Yes, we are having the same problem.  Outlook 2013 shows an extra bullet with no text after it, but there is no extra <li></li> in the code.  Does not happen when non-list text is added after the last bullet, but does happen when the last item within the <layout> section is a bullet.

Karmak, 3 years ago

Additional detail: appears to only happen when using bullet lists with left-aligned images and bullet is the last item in the editable region.  Template code:

<layout label="Text with left-aligned image">             
                
                  <tr><td class="w640" bgcolor="#FFFFFF" width="30"></td>
                    <td class="w640" bgcolor="#FFFFFF" width="580">        
                    <p class="article-title" align="left"><singleline label="Title">Add a title</singleline></p>              
             </td>
                    <td class="w640" bgcolor="#ffffff" width="30">&nbsp;</td></tr>
                <tr><td class="w640" bgcolor="#FFFFFF" height="10" style="font-size: 10px; line-height: 10px;" width="30">&nbsp;</td>
                    <td class="w640" bgcolor="#FFFFFF" height="10" style="font-size: 10px; line-height: 10px;" width="580">                          
                                  <table class="w580" border="0" cellspacing="0" cellpadding="0" width="580">
                            <tbody><tr>
                                <td class="w580" width="580">                             
<table align="left" border="0" cellpadding="0" cellspacing="0" style="mso-table-rspace:7pt;border-collapse:collapse;border:1px solid #ffffff;">
                                        <tbody><tr>
                                            <td><img class="w300" border="0" width="300" label="Image" editable="true"></td>
                                            <td class="w30" width="15"></td>
                                        </tr>
                                        <tr><td></td><td class="w30" height="5" width="15" style="font-size: 5px; line-height: 5px;"></td></tr>
                                    </tbody></table>
                                    <div class="article-content" align="left">
                                        <multiline label="Description">Enter your description</multiline>
                                    </div>
                                </td>
                            </tr>
                            <tr><td class="w580" height="1" style="font-size: 1px; line-height: 1px;" width="580"></td></tr>
                        </tbody></table></td>
                    <td class="w640" bgcolor="#ffffff" height="10" style="font-size: 10px; line-height: 10px;" width="30">&nbsp;</td></tr>    
            </layout>
Jonathan Hodak Jonathan Hodak, 3 years ago

Jacob,

   If outlook 2013 is giving you problems with unordered lists, then cheat the system.  Do not use a list at all, but instead create a faux list by hand.  I have had nothing but problems with lists rendering properly across all browsers and have had to give up on them entirely and instead create my faux lists like so.

Your symbol code for the little circle (I don't know the proper name) is &#8226;

In case anyone sees it and wonders - &8203; is a symbol for a non-width space, only really useful when a &nbsp; is too wide and actually pushes your td width wider than you want it (1-2px).



<tr>
<td width="20" height="20" style="font-size:20px; line-height:20px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">&nbsp;
</td>
<td width="10" style="color:#3da101; font-size:14px;vertical-align:top;">
&#8226;
</td>
<td width="249" style="font-size:14px; line-height:20px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">Email addresses
</td>
</tr>

<tr height="8" style="font-size:8px; line-height:8px;">
<td height="8" width="20" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="10" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="249" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
</tr>


<tr>
<td width="20" style="font-size:14px; line-height:21px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
</td>
<td width="10" style="color:#3da101; font-size:14px;vertical-align:top;">
&#8226;
</td>
<td width="249" style="font-size:14px; line-height:20px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
Contact names
</td>
</tr>

<tr height="8" style="font-size:8px; line-height:8px;">
<td height="8" width="20" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="10" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="249" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
</tr>


<tr>
<td width="20" height="20" style="font-size:21px; line-height:21px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">&nbsp;
</td>
<td width="10" style="color:#3da101; font-size:14px;vertical-align:top;">
&#8226;
</td>
<td width="249" style="font-size:14px; line-height:20px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">Addresses
</td>
</tr>

<tr height="8" style="font-size:8px; line-height:8px;">
<td height="8" width="20" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="10" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="249" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
</tr>

<tr>
<td width="20" style="font-size:14px; line-height:21px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
</td>
<td width="10" style="color:#3da101; font-size:14px;vertical-align:top;">
&#8226;
</td>
<td width="249" style="font-size:14px; line-height:20px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
Job titles</td>
</tr>

<tr height="8" style="font-size:8px; line-height:8px;">
<td height="8" width="20" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="10" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="249" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
</tr>

<tr>
<td width="20" style="font-size:14px; line-height:21px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
</td>
<td width="10" style="color:#3da101; font-size:14px;vertical-align:top;">
&#8226;
</td>
<td width="249" style="font-size:14px; line-height:20px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
Phone numbers</td>
</tr>

<tr height="8" style="font-size:8px; line-height:8px;">
<td height="8" width="20" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="10" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="249" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
</tr>

<tr>
<td width="20" style="font-size:14px; line-height:21px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
</td>
<td width="10" style="color:#3da101; font-size:14px;vertical-align:top;">
&#8226;
</td>
<td width="249" style="font-size:14px; line-height:20px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
Demographic or firmographic information</td>
</tr>

<tr height="8" style="font-size:8px; line-height:8px;">
<td height="8" width="20" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="10" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
<td height="8" width="249" style="font-size:8px; line-height:8px;" >&#8203;
</td> 
</tr>

<tr>
<td width="20" style="font-size:14px; line-height:21px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
</td>
<td width="10" style="color:#3da101; font-size:14px;vertical-align:top;">
&#8226;
</td>
<td width="249" style="font-size:14px; line-height:20px; font-family: Arial, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, sans-serif; color:#333333; text-align:left; vertical-align:top;">
And much more!</td>
</tr>

Try something along these lines, and it should render uniformly.  Feel free to copy and paste the code, edit the TD widths to match what you need, edit the font-family to suit your tastes and change font-size, line-height to an appropriate px for your email, change the colors as well for your text and see if you are still have any problems.


Best of luck,

- Jon
Weezil, 2 years ago

Yes, I have a client who is having the same issue - is there a way to make this work so they don't have to handcode a table? They send their own campaigns using a template.

Peter Scher Peter Scher, 2 years ago

As Karmak pointed out, the additional bullet point appears only when the bullet point is the final element the editable region.

So, why not set something else as the final element?

Using jacob1982's example, we can add a hidden <div></div> to prevent Outlook 2013 from seeing the list as the final element and therefore preventing the additional bullet!

It'd look something like this:

<ul style="margin-top:0px;margin-bottom:18px;margin-left:19px;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">
<li>Text</li>
<li>Text</li>
</ul>
<div style="display:none;">&nbsp;</div>

The key here is the <div style="display:none;">&nbsp;</div>.

I styled the <div> with a display:none to hide it, and included the non-breaking space to allow the line of code to be saved in the source code editor I use (I am unable to save an empty <div>). That worked for me, but you might be able to leave an empty <div> on the template level.

(Using the &nbsp; allowed the plaintext version of my email to be unaffected, a better result than using lorem ipsum which was actually displayed)

Hope this helps!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098