CODEWITHSUNDEEP
htmlhtml-emailemail-templates
Christine Salazar
Christine Salazar

Reputation: 1

HTML Email template - mso conditional statement

I'm working with an HTML email template for a project. Everything works great on Gmail, Yahoo, and Outlook web email client, except for the Outlook desktop app v16.0, which I have a spacing rendering issue. I used mso conditional statement to target this specific version. But it doesn't seem to work the margin-bottom that I added in and wrapped in mso statement didn't acknowledge. Any idea how to fix this?.

Email rendered in Gmail and Outlook

Here is my code:

<tr style="border-collapse:collapse">
  <td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;">
  <table cellpadding="10" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;font-weight: 400 !important;" width="100%">
    <tbody>
      <tr style="border-collapse:collapse">
        <td align="center" style="padding:0;Margin:0;width:560px" valign="top">
        <table cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;font-weight:400 !important;" width="100%">
          <tbody>
          <tr style="border-collapse:collapse">
            <!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->

            <!--[if gte mso 9]>
                   <td align="left" style="padding:0;Margin:0;Margin-bottom:8px;">
             <![endif]-->

              <!-- END  -->
              
              <td align="left" style="padding:0;Margin:0;">
              <p style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">You&rsquo;re just one step away from being</p>
              </td>
            </tr>
          </tbody>
        </table>
        </td>
      </tr>
    </tbody>
  </table>
  </td>
</tr>

Upvotes: 0

Views: 621

Answers (2)

Yogendra Chauhan
Yogendra Chauhan

Reputation: 825

You have done some typo here, You have made first letter capital of margin property, which is setting paragraph margin to 0. Make this margin property all lowercase. See typo error in code below:

<p style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">You&rsquo;re just one step away from being</p>

Replace all Margin to lowercase margin to fix this issue.

Upvotes: 0

Bidstrup
Bidstrup

Reputation: 1617

Your html is not valid with two after eachother on outlook. And as @jmona789 says, a td you make it on the side not above. Maybe this would work better with a new

<tr style="border-collapse:collapse">
    <td align="left" style="Margin:0;padding-bottom:0px;padding-left:0px;padding-right:20px;padding-top:25px;">
        <table cellpadding="10" cellspacing="0"
            style="border-collapse:collapse;border-spacing:0px;font-weight: 400 !important;" width="100%">
            <tbody>
                <tr style="border-collapse:collapse">
                    <td align="center" style="padding:0;Margin:0;width:560px" valign="top">
                        <table cellpadding="0" cellspacing="0" role="presentation"
                            style="border-collapse:collapse;border-spacing:0px;font-weight:400 !important;"
                            width="100%">
                            <tbody>
                                <!-- ADDED MSO CONDITIONAL STATEMENT FOR OUTLOOK ONLY-->

                                <!--[if gte mso 9]>
                                <tr style="border-collapse:collapse">
                                    <td height="8" style="height: 8px; font-size: 0px; line-height:0px">&nbsp;
                                    </td>
                                </tr>
                                 <![endif]-->

                                <!-- END  -->
                                <tr style="border-collapse:collapse">


                                    <td align="left" style="padding:0;Margin:0;">
                                        <p
                                            style="Margin:0;font-size:14px;font-weight:400 !important;font-family:arial, 'helvetica neue', helvetica, sans-serif;line-height:21px;color:#333;">
                                            You&rsquo;re just one step away from being</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </td>
</tr>

Upvotes: 0

Related Questions