• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

html email template- mso conditional statement in outlook not working

 
Greenhorn
Posts: 1
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi. I need help with mso conditional statement in outlook.
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 screenshot I made in Gmail and Outlook and the default template of subscription in form builder for you to see.  Screenshot - https://i.stack.imgur.com/JbK00.jpg

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 & 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>

Any help would  be greatly appreciated. Thank you in advance.
finale.jpg
Screenshot
Screenshot
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic