skip to Main Content

My HTML-Email template background color is not rendering properly in Outlook.

I have used different techniques but still not working.

I have wrapped the whole section into a table and applied background color to #ececec and applied color to inner td background to #ffffff but still whole outer table background color is #ffffff I want the outer table background color to be #ececec as shown in Gmail view.

Gmail view:

enter image description here

Outlook desktop view:

enter image description here

How to make it same looking as in Gmail?

Here is my code

<table bgcolor="#ececec" align="center" border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
  <tr>
      <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
        <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tr>
                  <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px; ">
                      <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-number1.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                  </td>
                  <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                      <div style="vertical-align: middle; display: inline-block;">
                          <h3 style="margin: 0; padding: 0;">Australia's No. 1</h3>
                          <span>Replica lighting store</span>
                      </div>
                  </td>
              </tr>
          </table>              
      </td>
      <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
        <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tr>
                <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px;  ">
                      <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-huge-range.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                  </td>
                  <td  bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px; ">
                      <div style="vertical-align: middle; display: inline-block; ">
                          <h3 style="margin:0; padding:0;">Huge range</h3>
                          <span>20,000+ products</span>
                      </div>
                  </td>
              </tr>
          </table>
      </td>
  </tr>
  <tr>
    <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
        <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tr>
                <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px;">
                      <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-fast-shipping.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                  </td>
                  <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                      <div style="vertical-align: middle; display: inline-block;  ">
                          <h3 style="margin:0; padding:0;">Fast shipping</h3>
                          <span>24hr dispatch on most items</span>
                      </div>
                  </td>
              </tr>
          </table>
      </td>
      <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
            <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tr>
                <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px; ">
                      <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-30-days.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                  </td>
                  <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                      <div style="vertical-align: middle; display: inline-block; ">
                          <h3 style="margin:0; padding:0;">30 days returns</h3>
                          <span>For peace of mind</span>
                      </div>
                  </td>
              </tr>
          </table>
      </td>
  </tr>
</table>

2

Answers


  1. I suggest checking out this article about outlook’s css quirks: A Guide to Rendering Differences in Microsoft Outlook Clients. It talks about using VML as a workaround.

    Issue:

    <!--[if mso]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
    <tr>
    <td style="background-color:#ececec;">
    <![endif]-->
    <table bgcolor="#ececec" align="center" border="0" cellspacing="0" cellpadding="0" style="width:100%; border-collapse: collapse;">
           <tr>
        <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
          <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                    <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px; ">
                        <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-number1.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                    </td>
                    <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                        <div style="vertical-align: middle; display: inline-block;">
                            <h3 style="margin: 0; padding: 0;">Australia's No. 1</h3>
                            <span>Replica lighting store</span>
                        </div>
                    </td>
                </tr>
            </table>              
        </td>
        <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
          <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                  <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px;  ">
                        <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-huge-range.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                    </td>
                    <td  bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px; ">
                        <div style="vertical-align: middle; display: inline-block; ">
                            <h3 style="margin:0; padding:0;">Huge range</h3>
                            <span>20,000+ products</span>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
      <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
          <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                  <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px;">
                        <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-fast-shipping.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                    </td>
                    <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                        <div style="vertical-align: middle; display: inline-block;  ">
                            <h3 style="margin:0; padding:0;">Fast shipping</h3>
                            <span>24hr dispatch on most items</span>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
        <td bgcolor="#ffffff"  style="text-align: justify;width: 50%;">
              <table bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
                <tr>
                  <td bgcolor="#ffffff" style="padding-left: 30px; padding-right: 10px; ">
                        <img width="40" height="40" alt="" src="https://www.example.com/pub/media/wysiwyg/icons/icon-30-days.png" style="vertical-align: middle; display: inline-block; width: 40px; height: 40px;">
                    </td>
                    <td bgcolor="#ffffff" style="width: 74%; padding-top: 20px;padding-bottom: 20px;">
                        <div style="vertical-align: middle; display: inline-block; ">
                            <h3 style="margin:0; padding:0;">30 days returns</h3>
                            <span>For peace of mind</span>
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    </table>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
    
    Login or Signup to reply.
  2. It looks like you’re trying to do too much with one table. You have the table background set to light grey and its <td>s set to a white background. That will give you a white table that spans 100% of the viewport. You won’t even see the light gray. The tds make up the table.

    Try nesting more tables to pull this off. Consider this simplified structure.

    <!-- body background -->
    <table width="100%">
      <tr>
        <td bgcolor="#ececec" style="padding: 20px 0 20px 0;">
          
          <!-- container background-->
          <table width="500" align="center">
            <tr>
              <td bgcolor="#ffffff" style="padding: 20px 20px 20px 20px;">
                
                <!-- content -->
                <table width="100%">
                  <tr>
                    <td>This content has a white background. No need to set a background color for every td.</td>
                  </tr>
                  <tr>
                    <td>This content has a white background too, just to be clear.</td>
                  </tr>
                </table>
    
              </td>
            </tr>
          </table>
    
        </td>
      </tr>
    </table>

    Again, this HTML is simplified to demonstrate a sturdy way to have a container of one background color exist in front of another background color.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search