Hello,

We are currently using Pardot as our marketing automation platform, and we slightly modified their responsive templates so that there is a background color behind white text, as seen here:

The code seems to hold up for most browsers, except in Outlook 2007/2010/2013, where it renders like this:

Does anyone know how to fix? I'm not very experienced in html, so I greatly appreciate any help!

Below is sample code for text area in "Is Your Brand Disruptor-Proof?"

    <tr>

    <td align="left" class="leftColumnContent" pardot-region="left_column_content" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; font-family: Arial; font-size: 14px; line-height: 21px; text-align: left; padding: 0 20px 20px; " valign="top">

    <h4 style="color:#FFF !important; display: block; font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px; margin: 0px; padding: 10px; text-align: left; background-color:#4d4d4f; max-width:240px; height:72px !important;"><a href="http://www.desantisbreindel.com/insights/is-your-brand-disruptor-proof/" style="color:#FFFFFF !important; text-decoration: none !important; display: block; font-family: Arial; font-size: 12px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 16px;"><span style="color: #FFFFFF; text-decoration: none; font-weight: bold; height: 72px;">Is Your Brand Disruptor-Proof?</span></a></h4>

    </td>
    </tr>