CODEWITHSUNDEEP
htmlhtml-emailemailemail-templates
webdevgirl
webdevgirl

Reputation: 27

html - mso conditional statement not working

I’m customizing the Opt-in confirmation email template in Form builder Mailchimp for a project. When I sent a test everything looks great in Gmail, Yahoo, and Outlook web mail client, except for the Outlook desktop app v16.0, which I have a spacing rendering issue. The cause of the problem was the “Confirm Subscription link/button” from the form builder, that generates the <br> tag after it, which outlook desktop app didn’t ignore, unlike other email clients. To fix the issue, I tried to add CSS style for <br> tag and display it none but it didn’t seem to work. I also used mso conditional statement to target this specific version of outlook desktop app. I added padding-bottom in <td> of a first text and place it inside mso, to have an equal spaces. But unluckily, outlook desktop still didn’t acknowledged it. I tried many things adding css, margin, etc., nothing works. Any idea how to fix this? It seems that I did something wrong with mso.

I have also attached the sample test email I made in Gmail, Outlook.com and Outlook desktop app, and the default template of subscription in form builder for you to see. See screenshot here

Here is my code: I have to split my HTML into two parts to make the “Confirm subscription link” in the middle. Since this link was unable to remove.

https://codepen.io/christine-tine27/pen/QWyeEGz

<!-- PART 1.HTML -->
<div class="es-wrapper-color" style="background-color:#FFFFFF">
    <table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:auto !important;width:100%">
       <tr style="border-collapse:collapse">
          <td align="center" style="padding:0;Margin:0">
             <table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
                <tr style="border-collapse:collapse">

                       <!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->
                        <!--[if gte mso 9]>
                            <td align="left" style="padding-bottom:8px;padding-left:0px;padding-right:20px;padding-top:25px;mso-line-height-rule:exactly;line-height:20px!important;Margin:0;">
                        <![endif]-->
                        <!-- END  -->

                   <td align="left" style="padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;mso-line-height-rule:exactly;line-height:20px!important;Margin:0;">
                      <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                         <tr style="border-collapse:collapse">
                            <td align="center" valign="top" style="padding:0;Margin:0;width:560px">
                               <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                                  <tr style="border-collapse:collapse">
                                     <td align="left" style="padding:0;Margin:0">
                                        <p style="Margin:0;padding:0 0 0px 0;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;text-align:justify">You’re just one step away</p>
                                     </td>
                                  </tr>
                               </table>
                            </td>
                         </tr>
                      </table>
                   </td>
                </tr>
             </table>
          </td>
       </tr>
    </table>
 </div>


<!-- PART 2.HTML -->
 <div class="es-wrapper-color" style="background-color:#FFFFFF">
    <table class="es-content" cellspacing="0" cellpadding="0" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;table-layout:auto !important;width:100%">
       <tr style="border-collapse:collapse">
          <td align="center" style="padding:0;Margin:0">
             <table class="es-content-body" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px;background-color:#FFFFFF;width:600px">
                <tr style="border-collapse:collapse">
                   <td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px">
                      <table cellpadding="0" cellspacing="0" width="100%" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                         <tr style="border-collapse:collapse">
                            <td align="center" valign="top" style="padding:0;Margin:0;width:560px">
                               <table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;border-spacing:0px">
                                  <tr style="border-collapse:collapse">
                                     <td align="left" style="padding:0;Margin:0">
                                        <p style="Margin:0;padding:0px 0px 0px 0px;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;mso-line-height-rule:exactly;font-size:14px;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333333;text-align:justify"> Upon confirmation, you'll receive an email with an exclusive 10% off food &amp; beverage code which can be redeemed during your next stay.<br><br>Warmly,<br>The </p>
                                     </td>
                                  </tr>
                               </table>
                            </td>
                         </tr>
                      </table>
                   </td>
                </tr>
             </table>
          </td>
       </tr>
    </table>
 </div>

Upvotes: 0

Views: 2807

Answers (1)

Nathan
Nathan

Reputation: 5259

To get Outlook to display a gap, it needs to render something, such as text. We can use the non-breaking space. The key attributes needed that will determine the height are line-height and font-size.

In addition, since this is a row, you should insert a <tr>, and thus it should be before the other <tr>. Although I don't quite understand what you are trying to do here.

<!--[if gte mso 9]>
<tr>
  <td align="left" style="padding:0;margin:0;mso-line-height-rule:exactly;line-height:20px;font-size:20px;">&nbsp;</td>
</tr>
<![endif]-->

The other thing to note is that Outlook (desktops, at least) strip anything with a "!important" tag on it.

But I'm not sure why this doesn't work in the first place - cross-email-compatible emails can achieve this with padding and <br>'s no problems.

Upvotes: 0

Related Questions