Trouble With Ol And Ul Tags In Email Sent With Outlook

So I am trying to create an html email that will be sent out through outlook. The problem seems to be with ol and ul groupings and I can't figure out how to fix it. When I look at

Solution 1:

The best way to do bulleted lists in email is to mimic them with tables. Click here for JSFiddle.

<tablecellspacing="0"cellpadding="0"><tr><tdwidth="20"align="center"valign="top">&bull;</td><tdwidth="200"align="left"valign="top">Text text text text text text</td></tr><tr><tdalign="center"valign="top">&bull;</td><tdalign="left"valign="top">Really really really long and wrapping text here text here text here text here text here </td></tr></table>

Be sure to use align and valign="top" so that your bullets stay flush with the top of long, wrapping text.

Solution 2:

add <br /> tag before the list. Note: P, H, and List tags don't code well with all email clients. use <br /> tags for paragraph end/spacing. Sample:

<spanstyle="font-size:14px; font-weight:bold;">Headline</span><br /><br />
my paragraph text here. <br /><br /><span...anotherheadlinehere. 
<br /><br /><ol><li> etc.

Another way to create lists is to make them in tables (not as easy but guarantees correct spacing across email clients).

See campaign monitor for a list of CSS rules that are acceptable in email clients. here

Solution 3:

Microsoft Outlook compiler sometimes ignores paddings and standard CSS styling in some instances. That being said, try to write very simple code and inline styling for your HTML code that is intended to be sent through email.

Try the following code for your list items:

<tr><!-- Row container for Intro/ Description --><tdalign="left"style="font-size: 14px; font-style: normal; font-weight: 100; color: #191919; line-height: 1.8; text-align:justify; padding:0px 20px 0px 20px; font-family: sans-serif;"><ul><li><ahref="#">Item 1</a></li><li><ahref="#">Item 2</a></li><li><ahref="#">Item 3</a></li></ul></td></tr>

I hope that helps,

Thanks!

~Newton

Solution 4:

I solve the problem with set some extra margin to ul and ol tags:

It is because outlook set some negative margin to lists(I think) so you should set some extra margin to them:

 <!– [if gte mso 9]>
 <style>li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em;}
     ul, ol{    margin-left: 40px!important;}
 </style>
 <![endif]–>