I have coded my own email within Mailchimp and realised & forgot the problems with Microsoft Outlook when testing. I know that Microsoft is notoriously difficult and does not render HTML & CSS emails the same way as other platforms.

The main problem I have is my images exploding. I have looked at this article: (https://medium.com/@jasemiller/a-fix-for-outlook-image-issues-in-html-email-campaigns-b8dd1c8f7d16) to find out the solution to this problem... to use conditional formatting for Microsoft Outlook.

Now I have a header which is two columns and has a logo in 1 column and a couple of Headers (h2,h3) in the other. I have messed around with this quite a bit but I feel I am nearly there. The problem is that Microsoft Outlook does not seem to render the code (div style="display:none") and continues to display code that it should ignore meaning the header is repeated.

    #templateHeader{
  /*@editable*/background-color:#001f5e;
}
.HeaderContainer{
 width:300px !important;
 max-width:300px !important;
}
#logo{
 max-width:100% !important;
 width:100% !important;
}
.LogoContainer img{
 max-width:100% !important;
 width:100% !important;
 float:left;
}       
           <!-- BEGIN HEADER // -->
           <tr>
             <td valign="top" id="templateHeader">
               <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
                 <tr>
                    <td valign="top">

                  <!-- USE THIS CODE ONLY WHEN IN MICROSOFT / OUTLOOK & HIDE OTHER TABLES OUTSIDE OF THIS CONDITION STATEMENT NOT TO SHOW  -->
                  <!--[if mso]>
                    <table align="left" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td valign="top">
                                <div class="LogoContainer">
                                    <table align="left" width="300">
                                        <tr>
                                            <td>
                                                <img width="300" style="width=100px;" src="https://gallery.mailchimp.com/d1231a3a58e3e61da03645dc0/images/a172f779-bbba-4902-a73a-551194e5274e.png" alt="Bold Consultancy Logo">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
                  <![endif]-->

                  <!-- USE THIS CODE ONLY WHEN NOT IN MICROSOFT / OUTLOOK -->
                  <table align="left" border="0" cellpadding="0" cellspacing="0" class="HeaderContainer">
                    <tr>
                      <td valign="top">
                        <div class="LogoContainer">     
                          <img id="logo" src="https://gallery.mailchimp.com/d1231a3a58e3e61da03645dc0/images/a172f779-bbba-4902-a73a-551194e5274e.png" alt="" mc:edit="preheader_leftcol">
                        </div>
                      </td>
                    </tr>
                  </table>

                  <!-- END THE CONDITION STATEMENT -->
                  <!--[if mso]>
                    </div>
                  <![endif]-->

                  <!-- USE THIS CODE ONLY WHEN IN MICROSOFT / OUTLOOK & HIDE OTHER TABLES OUTSIDE OF THIS CONDITION STATEMENT NOT TO SHOW   -->
                  <!--[if mso]>
                    <table align="left" border="0" cellspacing="0" cellpadding="0" width="300">
                        <tr>
                            <td valign="top">
                                <div class="HeaderTitles" mc:edit="preheader_rightcol">
                                    <h2>Email Title</h2>
                                    <h4>March 2019</h4>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
                  <![endif]-->

                  <!-- USE THIS CODE ONLY WHEN NOT IN MICROSOFT / OUTLOOK -->
                  <table align="left" border="0" cellpadding="0" cellspacing="0" class="HeaderContainer">
                    <tr>
                      <td valign="top">
                        <div class="HeaderTitles" mc:edit="preheader_rightcol">
                          <h2>Email Title</h2>
                          <h4>March 2019</h4>
                        </div>
                      </td>
                    </tr>
                  </table>

                  <!-- END THE CONDITION STATEMENT -->
                  <!--[if mso]>
                    </div>
                  <![endif]-->


                </td>
              </tr>
            </table>
          </td>
        </tr>
        <!-- // END MODULE: HEADER -->

The aim is to display a header with 2 columns one with a logo on the left and the right column with titles/headers in. So Microsoft Outlook should only render the code to display the columns in the conditional statement and should NOT repeat and show both sets of code. Anything outside of the condional statement should be hidden thanks to the DIV which states display:none. Currently it is not hiding the code outside of the statement and repeating and showing the header twice.

This problem is only for outlook as the email shows perfectly in other platforms.

1 Answers

0
AlanCiccone On

You have mso-hide: all; in the wrong place.

Every section you have commented with

USE THIS CODE ONLY WHEN NOT IN MICROSOFT / OUTLOOK

Is where it should be. Put it in the wrapping table elements. I just did a quick test in Litmus builder and it's not duplicating.