0

I am trying to use two conditional statements in HTML email template. The statements are testing for the MS Outlook client, if true it will render an image, otherwise it will hit the next statement to test if the client is NOT MS Outlook, then render some separate HTML.

<!--[if mso]> ... <!--<![endif]--> <!--[if !mso]><!-- --> ... <!--<![endif]-->

This works great for the majority of Outlook desktop clients, however Outlook 2003, 2011 and 2016 (mac) seem to be ignoring the if mso statement. The other issue that I have here is that Outlook.com doesn't seem to recognise this statement either.

I was wondering if anybody else had come across this issue in the past and if so what was their solution around this? I imagined the if mso statement would pickup any form of Outlook client but my assumption seems to be wrong.

Any help would be appreciated :)

Cheers!

Jamie Bradley
  • 629
  • 2
  • 7
  • 18

2 Answers2

2

Outlook for Mac (at least the 2016 release) uses Webkit to render content rather than the MS Word engine that most Windows versions of Outlook used. The good news here is that you don't need to jump through as many hoops to get it to render things 'correctly'. The bad news is that that's why [if mso] doesn't work here.

Outlook.com appears to strip all conditionals, which is why you're not seeing the image there either.

Probably not the news you are after, but hope it helps.

Alex Magill
  • 262
  • 3
  • 8
  • Cheers Alex, it's certainly a step in the right direction. Gives me something to think about on Monday morning! – Jamie Bradley Jan 28 '17 at 17:35
  • I've accepted this answer, I'm starting to work around the solution with alternative tactics but the information here has helped me understand the situation with conditional comments in Outlook much more. Cheers again Alex! – Jamie Bradley Jan 30 '17 at 10:12
0

This is what I use:

In the html type:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

in the CSS:

#outlook a{
        padding:0;
    }
    .ReadMsgBody{
        width:100%;
    }
    body{
        width:100% !important;
        min-width:100%;
        -webkit-text-size-adjust:100%;
        -ms-text-size-adjust:100%;
    }
    .ExternalClass{
        width:100%;
    }
    td{
        border-collapse:collapse !important;
    }
    v*{
        behavior:url(#default#VML);
        display:inline-block;
    }
    .ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{
        line-height:100%;
    }

and wrapping any conditional rules in the BODY of the html I use:

 <!--[if gte mso 9]>
    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" SOME OTHER RULES">
    <v:textbox inset="0,0,0,0">
    <![endif]-->

    <table>Some other HTML elements</table>

<!--[if gte mso 9]>
    </v:textbox>
    </v:rect>
<![endif]-->
scoopzilla
  • 887
  • 5
  • 15