Extravision Blogsblog

Recent Posts

Categories

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">
    <tr>
      <td width="10" valign="top">&bull;</td>
      <td width="270" valign="top">Content goes here.</td>
    </tr>
    <tr>
      <td valign="top">&bull;</td>
      <td valign="top"> Content goes here.</td>
    </tr>
 </table>

 
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

How to craft the perfect re-engagement email: Topshop example

In an ideal world, everyone on your list would be eagerly awaiting your email. They…

Jenni Malley
June 1, 2017

How To Get Your Perfect Email Template

If you send email campaigns then you probably use a template. Not every email campaign…

Jenni Malley
May 12, 2017

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog