Background Color in Outlook 2007/2010

Hello. Been reading the forums for a little while, but now I have a question.

I've got a <div> with a background color, but I place <p> tags within the div, the background color only disappears except for behind the text within the <p> tags. The portion of the div outside the <p> tags loses its color. I think this has something to do with the margins on the <p> tags, but when I try using padding instead of margins, I lose the spacing I'm after.

Here is a simplified version of my code:

<div style="background-color:#eeeeee; width:500px;">
<p style="margin: 6px;<strong>header</strong></p>
<p style="margin:6px;">body text</p>
</div>

Any help would be greatly appreciated. :-)

Carissa Carissa, 5 years ago

Hi OtherRob!

Welcome to the forums! It sounds like there could be other CSS styling which is affecting your design as well. Would you consider using tables instead? If you have a multi-column layout, using tables is the way to go for Outlook 2007 and 2010. We've got a recent post about this on the blog. You might try assigning the same background color to the <p> tags, and if that doesn't work to really see what's up it would be great if you could post your code here or send it in to support.


Carissa
Campaign Monitor
OtherRob, 5 years ago

Hi, Carissa. Thanks for the suggestions. Unfortunately adding the background color to the <p> tags didn't change anything. There are still areas of the <div> that don't show the background color.

The email itself is built with tables, but the <div> doesn't fill the whole cell and I only want the <div> itself to have the background color.

Any other suggestions?

Thanks.

BThies BThies, 5 years ago

For maximum support, bgcolors should only be added to <td>'s, not <div>'s or <p>'s.

Utilize nested tables to create the layout rather than <div>'s.


Brian Thies
Professional Email Developer
Thies Publishing
OtherRob, 5 years ago

Thanks, Brian. That's what I ended up doing. I replaced the <div> with a nested table and the bg color I wanted. It took a little tweaking to get it to respond the way I wanted, but I got there in the end. :-)

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