CSS: Bullet rendering in Outlook 2007

Does anybody have tips for getting bullet lists to render properly in Outlook 2007? I'm noticing extra padding or margin on the top and bottom of this list itself but margin/padding to the left is either ignored or not rendering right. Bullets are showing up flush-left in the table cell they're in while other paragraph text, headings, etc. are styled properly (paying attention to cell padding defined in the CSS).

The e-mail's content area is a table with a left cell holding main content, a empty cell to the right of that which is acting as a gutter, and a right cell holding side content.

Any help is appreciated!

Dave Dave, 8 years ago

I haven't heard of any specific workarounds for this one. The Word rendering engine handles margin and padding in different ways for different elements, so the best approach is really to test different approaches yourself and see what you come up with. It's painful, so don't forget to help spread the word about why we need this fixed.

trandrus, 8 years ago

I'd be careful about mixing tables and lists in email. Lists have natural margins and paddings by default, however some email clients (like Hotmail) don't support margins, so you're left with a broken list. The bullet-proof solution is a two-column table, the left column being the bullets (fixed small width). I also use small images for individual bullets and valign=middle the td's. Even this aggressive approach doesn't work perfectly in all email clients, but its the best solution I've found.

watershed, 7 years ago

I've just found the following to work in Outlook 2007, though I haven't yet run the full CM test on how it holds up in other email clients:

In my template I have a content module that is an ordered list and another that is an unordered list and both are within a table cell with an id of content. I'm not trying to do anything fancy with the list markers, just let them render as their default roman numerals and round bullets respectively.

In my CSS I have:

/* lists */ 
ol, ul { margin: 0; padding: 0; }
td#content ol li, td#content ul li { margin-left: 1.75em; }

Early indications are that this is fine in both Outlook 2003 and 2007.

Jonathan Schofield

ic, 7 years ago
watershed :

In my CSS I have:

/* lists */ 
ol, ul { margin: 0; padding: 0; }
td#content ol li, td#content ul li { margin-left: 1.75em; }

Early indications are that this is fine in both Outlook 2003 and 2007.

Jonathan Schofield

That's awesome only thing is gmail will strip that out.

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