CODEWITHSUNDEEP
htmlcssemailhtml-email
cheslijones
cheslijones

Reputation: 9194

Some background colors not loading for Outlook 2016

Been trying to follow this article on making future proof responsive email templates:

https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919

What I'm working on looks good in most clients, but Outlook isn't rendering some of the background colors.

Should look like this with gray borders (this is in Gmail):

enter image description here

Outlook 2016, however, looks like the following:

enter image description here

Right now I am just trying to get the gray border to show up. Will figure out why the background image isn't later.

Anyway, here is what I have so far. Any suggestions on how to get this gray background to show up the entire width of email body like it does in Gmail?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <!--[if (gte mso 9)|(IE)]>
    <style type="text/css">
        table {border-collapse: collapse;}
    </style>
    <![endif]-->
    <style type='text/css'>
        /* Basics */
        body {
            margin: 0 !important;
            padding: 0;
            background-color: #ffffff;
            font-family: Arial, Helvetica, sans-serif;
        }

        table {
            border-spacing: 0;
            font-family: sans-serif;
            color: #333333;
        }

        img {
            border: 0;
        }

        div[style*="margin: 16px 0"] { 
            margin:0 !important;
        }

        .content {
            width: 100%;
            table-layout: fixed;
            -webkit-text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            background-color: #7E8083;
        }

        .webkit {
            max-width: 902px;
            margin: 0 auto;
        }

        .outer {
            margin: 0 auto;
            width: 95%;
            max-width: 902px;
            background-color: #1D428A;
            color: #FFF;
        }

        .content-area {
            background-position: center;
            background-size: 100% 100%;
        }

        .footer {
            font-size: 10px;
            -webkit-text-size-adjust: 95%;
        }
    </style>

</head>

<body>
    <div class="header" align="center">
        <table cellpadding="20">
            <tr>
                <td>
                    <img src="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" width="150" alt="The Company Logo">
                </td>
            </tr>
        </table>
    </div>

    <div bgcolor="#7E8083" class="content">
        <div class="webkit">
            <!--[if (gte mso 9)|(IE)]>
            <table width="902px" align="center">
            <tr>
            <td>
            <![endif]-->
            <table height="381" class="outer" align="center">
                <tr align="center">
                    <td background="https://marketing-image-production.s3.amazonaws.com/uploads/8.gif" align="center" class="content-area">
                        [content here]
                    </td>
                </tr>
            </table>
            <!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>
    </div>

    <div class="footer" align="center" size="10">
        <p>If you would like to unsubscribe and stop receiving these emails
        <a href="[unsubscribe]">click here</a>. We encourage you not to do so to ensure you receive important emails related to your account.</p>
    </div>
</body>

</html>

Upvotes: 0

Views: 4015

Answers (2)

gwally
gwally

Reputation: 3557

Outlook does not really work with <div>. You can use it, but don't be surprised when it doesn't work as expected.

Outlook does not work with background images the way you are using them. @caiovisk has an example that I suggest you pursue.

As far as background colors go, try using: background: #ff0000; instead of background-color: #ff0000;. `bgcolor="#ff0000" should always work on tables. This will also fix your issues with Android.

width="902px" is not going to work. Try `width="902" for Outlook instead. I do not understand why you're specifying a width that is 322 pixels wider than will show up in the Outlook viewport. Consider a narrower email.

My suggestion is to stop developing the way you're pursuing emails. Find a decent responsive email template and follow that as an example. The direction you're headed has so many issues I can see that you're just asking for trouble.

Good luck.

Upvotes: 1

caiovisk
caiovisk

Reputation: 3819

You can try bulletproof background images:

<td background="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" bgcolor="#1D428A" width="120" height="92" valign="top">
  <!--[if gte mso 9]>
  <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:120px;height:92px;">
    <v:fill type="tile" src="https://marketing-image-production.s3.amazonaws.com/uploads/a.gif" color="#1D428A" />
    <v:textbox inset="0,0,0,0">
  <![endif]-->
  <div>
    [content here]
  </div>
  <!--[if gte mso 9]>
    </v:textbox>
  </v:rect>
  <![endif]-->
</td>

See: https://backgrounds.cm/

There are a couple of things that we are generally asked that unfortunately are just not possible in Outlook and therefore... Unfortunately Outlook has lots of limitations on it's CSS support.

A good guide for CSS support for the most email clients can be found here: https://www.campaignmonitor.com/css/

Upvotes: 1

Related Questions