0

I have a condition in html which should show a specific td depending if its viewed via outlook desktop or others.

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
            <tr>
                <!--[if !(mso)]>
                <td style="background-color: #4400c9; border-radius: 10px 10px 0px 0px;">
                <![endif]-->
                <!--[if mso]>
                    <td style="background: url('');">
                <![endif]-->
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">

Edit: This is the result im getting. enter image description here

Hope someone can point out whats wrong with my condition. Thanks.

Goenitz
  • 115
  • 1
  • 2
  • 10

1 Answers1

1

I see what you're trying to do there. One thing to note, that code is Outlook specific, so your !mso is basically telling Outlook to ignore the code it's wrapped around, rather than show in other email clients.

Also, your non-Outlook conditional statement should be without the brackets around mso. Like this: ...[if !mso]...

Your !mso is hiding the fallback, so you need to include a slight variation of the conditional code. You should note the extra <!--[if !mso]> <!----> at the beginning and the <!-- <![endif]--> at the end of the !mso conditional.
What this does is allow the non-Outlook content to display un-commented for all other email clients but at the same time hide that content in Outlook.

Here are some good resources to help get your head around this technique:
1 - https://stackoverflow.design/email/base/mso
2 - HTML Emails: fallback for mso conditional?
3 - https://litmus.com/community/discussions/396-conditional-code-for-outlook

Here is how your code should look:

<!-- ### RENDER EVERYWHERE ELSE ### -->
<!--[if !mso]> <!---->
  <td>Non Outlook</td>
<!-- <![endif]-->

<!-- ### RENDER IN OUTLOOK ONLY ### -->
<!--[if mso]>
  <td>Outlook only</td>
<![endif]-->