How to remove background color from reply of html email template in Outlook 2010/2013


Tags: html,css,email,outlook,html-email

Problem :

I have created an html file that I converted into a outlook template file. My template has a solid blue background color that is defined by setting the bgcolor attribute on the body tag. When I send this to users everything is great until they reply using Outlook 2010 or 2013. When they reply the blue background color is present in their response. How can I write my css to only fill the background on the initial email, not the reply?

<body bgcolor="#0a3353"> 
<!-- Content tables -->
    <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#0a3353">
        <tr>
            <td>
                <table class="container" bgcolor="#ffffff" width="70%" align="center" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                    <table class="container" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">

I also noticed this behavior does not occur when using Outlook 2011 for mac.



Solution :

You need a 100% width table in there instead of applying the background color to the body tag.

Here are the 2 setups I use that take control the forwarding background color (#FFFFFF), while setting the html section background (#252525).

Fixed Width Email:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
  </style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="white">
  <tr>
    <td style="padding:30px;">
      Content
    </td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>

Fluid Email:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    /* Client-specific Styles */
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #005288 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}
    @media only screen and (min-width: 600px) { .maxW { width:600px !important; } }
  </style>
</head>
<body style="margin: 0px; padding: 0px; -webkit-text-size-adjust:none; -ms-text-size-adjust:none;" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" align="center" style="padding-top:30px; padding-bottom:30px;">


<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin: auto;">
  <tr>
    <td align="left" style="padding:30px;">
      Content
    </td>
  </tr>
</table>


</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td></tr></table></body></html>

    CSS Howto..

    Twitter Bootstrap with responsive design — How to style own, non-framework elements [closed]

    How to find and delete specific row in blogger css with span tag?

    How to stop CSS/HTML navigation menu wrapping at different resolutions?

    How to place a
    to the right of an input field

    How can I hide slide menu in appcelerator?

    How to give Internet Explorer different CSS lines?

    How do i remove li element margin

    How to create a scrolling background image with css/jquery/html

    Telling LESS CSS how to behave with .active li

    How can I apply CSS only to digits in jQuery?

    How to avoid Zalgo text bleeding all over place without totally removing it?

    How do I put a horizontal line/border right in the middle of a table row?

    How to select all elements that are not of a class within an id css

    How to reduce http request using PHP when HTML Doc loads JS or CSS? [closed]

    how to prevent css animation from running on page load

    Show DIV on hover of other DIV that is not parent with CSS or JS [duplicate]

    How to make rounded tabs with css? [closed]

    How to make an object go to a higher layer

    Speechbubble tooltip in CSS - how to move the arrow

    How to get css value of an element inside array?

    how to change button icon on click?

    How to make double lines border in CSS, each line in different color, without using background image?

    How to cut divs both ways to keep the objects in center?

    How to have multiple CSS color transitions on a single text line?

    How to build this layout with CSS?

    How to develop two different menu bars for a website (one for all users, and the other one for the Admin) in ASP.NET webfroms?

    CSS Flexbox : How to construct a specific layout

    css how to make text align bottom?

    How do I create a side menu navigation bar that opens items to the right [closed]

    how you can change the style of the page without changing CSS files?