CODEWITHSUNDEEP
htmlemailoutlook
Travis
Travis

Reputation: 2245

HTML Email behaving strange in Outlook

Hello All i have a very simple html table that is in an email and for some reason the last cell in thead / td is not taking the BG color it is coming out white.

I have NO IDEA why this is happening, it is only happening in outlook. It looks fine in gmail, yahoo, icloud and hotmail.

I have a fiddle that shows it correctly but figured i would include it 

<table id="responsive" bgcolor="#0057a0" align="center" style="width:100%;max-width:535px;background: #0057a0;">
    <thead bgcolor="#0057a0">
        <tr bgcolor="#0057a0">
            <th width="31%" style="font-weight:normal;background: #0057a0;color: #fff;">&nbsp;</th>
            <th width="23%" style="font-weight:normal;background: #0057a0;color: #fff;">LEVEL 1</th>
            <th width="23%" style="font-weight:normal;background: #0057a0;color: #fff;">LEVEL 2</th>
            <th width="23%" bgcolor="#0057a0" style="font-weight:normal;background: #0057a0;background: #0057a0 !important;background-color: #0057a0;background-color: #0057a0 !important;color: #fff;">LEVEL 3</th>
        </tr>
    </thead>
    <tbody style="background:#fff;color:#0057a0;font-size:14px;">
        <tr>
            <td style="background:#d1ecf3;font-size:14px;padding: 10px;">Yeah Buddy</td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">Lipsum</td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">Lipsum</td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">Lipsum</td>
        </tr>
        <tr>
            <td style="background:#d1ecf3;font-size:14px;padding: 10px;">Yeppers</td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">Lipsum</td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">Lipsum</td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">Lipsum</td>
        </tr>
        <tr>
            <td style="background:#d1ecf3;font-size:14px;padding: 10px;">Yo Yo Yo</td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"></td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"></td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;">Lipsum</td>
        </tr>
        <tr>
            <td style="background:#d1ecf3;font-size:14px;padding: 10px;">BLah Blah</td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"><img src="http://placehold.it/90x70" border="0" alt="dog image"/></td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"><img src="http://placehold.it/90x70" border="0" alt="dog image"/></td>
            <td style="background:#fff;font-size:11px;text-align:center;padding: 10px;"><img src="http://placehold.it/90x70" border="0" alt="dog image"/></td>
        </tr>
    </tbody>
</table>

The CSS i have is also in the fiddle. Any suggestions would be great!

Upvotes: 1

Views: 1754

Answers (1)

John
John

Reputation: 12193

Not sure if it is related, but try removing the <thead> and <tbody>, just to limit the possible causes. Straight table/tr/td always do the trick in html email.

Also, you need the 6-digit hex for all colors and unfortunately have to declare them in each cell (at least for text). bgcolor you could normally get away with just declaring it in the table, changing it up only when needed, but in your example you are kinda cheating by not zeroing out the cellpadding and cellspacing, using that gap as borders. This might not display consistently across all clients, but is a lot cleaner code-wise than other solutions like adding borders to every cell.

This should work:

<table id="responsive" bgcolor="#0057a0" align="center" style="width:100%;max-width:535px;">
  <tr>
      <td bgcolor="#0057a0" align="center" width="31%" style="color:#0057a0;">&nbsp;</td>
      <td bgcolor="#0057a0" align="center" width="23%" style="color: #FFFFFF;">LEVEL 1</td>
      <td bgcolor="#0057a0" align="center" width="23%" style="color: #FFFFFF;">LEVEL 2</td>
      <td bgcolor="#0057a0" align="center" width="23%" bgcolor="#0057a0" style="font-weight:normal; color: #FFFFFF;">LEVEL 3</td>
  </tr>
  <tr>
      <td bgcolor="#d1ecf3" style="font-size:14px; padding: 10px; color:#0057a0;">Yeah Buddy</td>
      <td bgcolor="#FFFFFF" align="center" style="font-size:11px; padding: 10px; color:#0057a0;">Lipsum</td>
      <td bgcolor="#FFFFFF" align="center" style="font-size:11px; padding: 10px; color:#0057a0;">Lipsum</td>
      <td bgcolor="#FFFFFF" align="center" style="font-size:11px; padding: 10px; color:#0057a0;">Lipsum</td>
  </tr>
  <tr>
      <td bgcolor="#d1ecf3" style="font-size:14px; padding: 10px; color:#0057a0;">Yeah Buddy</td>
      <td bgcolor="#FFFFFF" align="center" style="font-size:11px; padding: 10px;"><img alt="dog image" src="http://placehold.it/90x70" width="90" height="70" style="margin: 0; border: 0; padding: 0; display: block;"></td>
      <td bgcolor="#FFFFFF" align="center" style="font-size:11px; padding: 10px;"><img alt="dog image" src="http://placehold.it/90x70" width="90" height="70" style="margin: 0; border: 0; padding: 0; display: block;"></td>
      <td bgcolor="#FFFFFF" align="center" style="font-size:11px; padding: 10px;"><img alt="dog image" src="http://placehold.it/90x70" width="90" height="70" style="margin: 0; border: 0; padding: 0; display: block;"></td>
  </tr>
</table>

You can also use valign="middle" on your cells to vertically center them if needed.

Upvotes: 2

Related Questions