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>
Any help would be greatly appreciated. :-)
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.
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?
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.
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. :-)