CODEWITHSUNDEEP
htmlcssoutlookhtml-email
Randy Hall
Randy Hall

Reputation: 8127

HTML Email Outlook div padding has no background color

<div bgcolor="#DEF2FB" style="background:#DEF2FB;border:2px solid #58bce9;border-radius:5px;padding:4px 7%;">Some text</div>

This is inside a table cell.

The border shows up (obviously I expect border-radius to fail in many scenarios).

The text itself has the background color behind it. However, the space between the border and text (the padding) has no background color, or is possibly white (the color behind this element is white).

I haven't found anything on this specifically, and there's a lot of articles on things wrong with Outlook.

Seeing this in versions 2007, 2010, and 2013. Oddly enough, it displays as expected in 2011 and 2016.

enter image description here

Upvotes: 5

Views: 6015

Answers (2)

Matt Maclennan
Matt Maclennan

Reputation: 1304

As per this Campaign Monitor page, padding on div tags isn't supported in Outlook 07,10 and 13. Reason it works in Outlook 11 and 16 is that these clients use Webkit as it's rendering engine, so generally, CSS support is better in these clients.

To combat this, you will need to put the padding and background color on the table cell, this will be the more cross client compatible solution, e.g.

<td bgcolor="#DEF2FB" style="background:#DEF2FB;border:2px solid #58bce9;border-radius:5px;padding:4px 7%;"><div>Some text</div></td>

Let me know if that works!

Upvotes: 6

Rik Nijdeken
Rik Nijdeken

Reputation: 50

Try this:

<div bgcolor="#DEF2FB" style="background-color:#DEF2FB;border:2px solid #58bce9;border-radius:5px;padding:4px 7%;">Some text</div>

Now its supposed to work. A friend of mine had the same issue today.

Upvotes: -2

Related Questions