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

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>

I believe you want something like this <div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> </div> <div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> </div> <div id="footer" style="position:absolute; bottom:0px;...

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?

Use the ASP.NET role provider which integrates with some of the built in ASP.NET controls like Menu and TreeView. See Recipe: Implementing Role-Based Security with ASP.NET 2.0 using Windows Authentication...