Extravision Blogsblog

Recent Posts



Bullet points – layout issues in Outlook 2007/2010

April 1, 2014

Outlook 2010 does not like ul, ol and li tags within your HTML email. When testing your email in Outlook 2010, you will notice that it will obscure the layout of your email, pushing the contents out to the left and/or right. This usually happens when the bullet points are content heavy. In figure 1 you can see that the bullet points have pushed out to the right.
Figure 1.
Example of bullet point issue
You must avoid using ul, ol, and li tags in your HTML email especially if most of your subscribers use Outlook 2010. The best way to overcome this formatting issue is by using a two column layout. It might take a little extra time to code but it will save a lot of trouble when testing your email.
Here is an example of how you would code bullet points using tables.

<table width="280" border="0" cellspacing="0" cellpadding="0">
      <td width="10" valign="top">&bull;</td>
      <td width="270" valign="top">Content goes here.</td>
      <td valign="top">&bull;</td>
      <td valign="top"> Content goes here.</td>

Figure 2 is an example of how the bullet points are neatly kept within the table, no layout issues.
Figure 2.
Example of fixed bullet point width

Posted by Carissa Lo
Email Design

No comments

Comments are closed.

From the Blog

Line height issues in Outlook

Line height is not always consistent when viewing emails in Outlook. This is especially true…

Andrew Chau
March 1, 2017

Are you making the most of your ESP?

If you use an Email Service Provider, you now get some pretty powerful technology alongside…

Jenni Malley
February 10, 2017

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog