Outlook.com problems with conditional comments in the body.

Hi, I've spent days creating a responsive email template for my company, and after much ado, it finally works.

Everywhere except for Outlook.com that is. Please note, Outlook refers to the desktop clients, and Outlook.com to the web client, seems obvious, but hey, it can get confusing.

I was having problems with Outlook 2007/2010 not applying certain css styles (despite being placed in

<!--[if gte mso 9]><style></style><![endif]-->

tags in the head, and adding !important), seems like specificity and overriding of styles is nicely bugged.

So I fixed that by having separate starting table tags for Outlook and everything else, along the lines of:

<!--[if !mso]><!--><table class="normalclass" style="inline: styles"><!--<![endif]-->
<!--[if gte mso 9]><table class="outlookclass"><![endif]-->
<tr>
<td>
stuff here
</td>
</tr>
</table>

This works great for AOL, Yahoo, Gmail, Thunderbird, and Outlook 2007. However Outlook.com totally mangles this.
I can't be sure (it's late, and I'm very tired) but I think that Outlook.com is removing all of the following:

<!--[if !mso]><!-->
<!--<![endif]-->
<!--[if gte mso 9]>
<![endif]-->

thus leaving:

<table class="normalclass" style="inline: styles">
<table class="outlookclass">
<tr>
<td>
stuff here
</td>
</tr>
</table>

I don't know whether Outlook.com tries to repair that itself or whether my browser (Chrome) is trying to fix the DOM that results from that, but it results in some tables having two <tbody> elements (both with stuff in it, like it concatenated two adjoining tables), and the rest of the content no longer being inside a table at all, neither the full background table nor the width wrapper table (neither of which have any of this conditional voodoo applied)!

Has anyone run into an issue like this before? Is there a fix for this (please oh please let there be a fix)?

roshodgekiss roshodgekiss, 3 years ago

Hi there zeorin, it doesn't entirely surprise me that Outlook.com is stripping out conditional comments. However, if you conditionally use classes instead of HTML elements, you can likely sidestep issues like this. For example...

<style type="text/css">
.normalclass  { /* your regular styles here */ }

<!--[if gte mso 9]>
   .normalclass  { /* Outlook-specific styles here, maybe add !important; if having troubles? */ }
<![endif]-->
</style>

<table class="normalclass" ... > ... </table>

Thanks, zeorin - let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
zeorin zeorin, 3 years ago

Thanks for your reply, but I've tried that approach already, although I put the conditional comments around the outside of the style tags.

My main problem was that Outlook 2007 was not good with specificity. I've been trying something along the lines of the following:

<!--[if gte mso 9]>
<style>
table td {
    border-collapse: collapse !important;
}
.section {
    width: 198px !important;
    border: 1px #ffffff solid !important;
}
.section-highlight {
    width: 598px !important;
}
.section-1-2 {
    width: 298px !important;
}
p.outlookfix {
    margin: 0;
    mso-table-lspace: 0;
    mso-table-rspace: 0;
}
</style>
<![endif]-->
<table align="left" class="section section-highlight section-1-2" style="width: 300px; border-collapse: collapse" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <!--[if gte mso 9]><p class="outlookfix"><![endif]-->
                Stuff here.
            <!--[if gte mso 9]></p><![endif]-->
        </td>
    </tr>
</table>
<table align="left" class="section section-highlight section-1-2" style="width: 300px; border-collapse: collapse" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <!--[if gte mso 9]><p class="outlookfix"><![endif]-->
                Stuff here.
            <!--[if gte mso 9]></p><![endif]-->
        </td>
    </tr>
</table>

The reason for the many classes, which each redefine the width, is because I am trying to make my CSS more modular. This works fine in web browsers (and is easier to live with once you get used to it). Normally sections are 200px. There's some other styling information apart from width that all section modules have, and these particular sections looked like a highlighted one--apart from their width--which is why the table has so many 'section' classes applied to it.

However, I would find that in Outlook the width was not 298px, as it should be (because it was defined last in the header). Hence I created the separate table elements for Outlook and non-Outlook.

I think perhaps my best bet is to walk away from modular CSS in emails and not overwrite any head-embedded style declarations like I did before. Currently all my 'outlookclasses' (as per OP) are not modular anyway, because of the specificity issue.

zeorin zeorin, 3 years ago

After a little testing, I figured out what Outlook.com is actually stripping: everything in ANY conditional comment. If I send Outlook.com the following:

<!--[if !mso]><!--><div style="width: 300px; height: 300px; background: #00FF00">Good</div><!--<![endif]-->
<!--[if gte mso 9]><div style="width: 300px; height: 300px; background: #FF0000">Bad</div><![endif]-->
<div style="width: 300px; height: 300px; background: #00FFFF">Normal</div>

only the cyan 'Normal' square shows.

roshodgekiss roshodgekiss, 3 years ago

Aargh, Outlook! Yes, I think we'll have to live with this limitation for now, sadly - if we can find a decent workaround, we'll be sure to let you know.


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
zerocents zerocents, 3 years ago

Change <!--> to <!-- -->

For example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>

<div style="width: 300px; height: 300px; background: #484848; color: #ffffff;">Control</div>

<!--[if !mso]><!-- -->
<div style="width: 300px; height: 300px; background: #e52890; color: #ffffff;">All Except MSO 07-13</div>
<!--<![endif]-->

<!--[if gte mso 9]>

<div style="width: 300px; height: 300px; background: #9028e5; color: #ffffff;">Only MSO 07-13</div>

<![endif]-->

<div style="width: 300px; height: 300px; background: #282828; color: #ffffff;">Control</div>

</body>
</html>

Hope this helps.


Michael Muscat
zazzyzeph, 3 years ago

Hi! Hopefully this gets to you / helps someone else out.

    <style>
    td[class="ecxoutlooktdbig"]{ height:20px; font-size: 20px; line-height: 20px;}
    td[class="ecxoutlooktdsmall"]{ height:10px; font-size: 10px; line-height: 10px;}
    </style>
    
    <tr valign="bottom">
        <td height="0" style="font-size:0px; line-height:0px;" class="outlooktdsmall">&nbsp;
        </td>
    </tr>
    <!--[if !mso]><!-->
    <tr valign="bottom">
        <td height="20" style="font-size:20px; line-height:20px;">&nbsp;
        </td>
    </tr>
    <!--<![endif]-->
    <!--[if lt mso 15]>
    <tr valign="bottom">
        <td height="14" style="font-size:14px; line-height:14px;">&nbsp;
        </td>
    </tr>
    <![endif]-->
    <!--[if gte mso 15]>
    <tr valign="bottom">
        <td height="7" style="font-size:7px; line-height:7px;">&nbsp;
        </td>
    </tr>
    <![endif]-->

Basically make a 0 height / font-size / line-height classed spacer tr/td, and then prepend "ecx" to your class name in your style tag. I don't like having a bunch of crazy outlook classes, so I tend to keep only a few outlook spacer classes because it's their fault everything looks crummy.

roshodgekiss roshodgekiss, 3 years ago

Nice one, zazzyzeph! Really appreciate your help on the forums here. Have an excellent week!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
lester, 2 years ago

Thank for the information, me too appreciate your help!

cancantona, 2 years ago

thank you shared :D
tham tu uy tin
tham tu sai gon
tham tu gia re
http://thegioimuonmau.info/

jsakas, 2 years ago
zerocents :

Change <!--> to <!-- -->

Worked for me. Many thanks.

gregjmackay, 1 year ago

Hi there! I have the following conditional comments but Outlook.com is stripping everything within the <td class="full-image"> and appending ecx as stated above. I already had <!-- --> sorted and tried css in the header. Any ideas on the below would be appreciated! Note: I'm serving up a gif for clients that support it and a backup jpg for those that don't.

<tr>
    <td class="full-image">
        <!--[if !mso]><!-- -->
        <img src="picture.gif" alt="" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
        <!--<![endif]-->
        <!--[if gte mso 9]>
        <img src="picture.jpg" alt="" width="100%" style="display:inline-block;border:none;outline:none;padding:0;margin:0;width:100%;height:auto;" border="0" hspace="0" vspace="0">
        <![endif]-->
    </td>
</tr>

mathildtombi373, 1 year ago

hey, thanks roshodgekiss for this code, i had the same problem, now its work great :))) greetings :D

_______________________________________________
Télécharger Assassin's Creed Unity

jeuxxgratuit, 1 year ago

Thanks for code. Using this code is goog. Thanks man :)


___________________________________
Télécharger Raven’s Cry PC Gratuit
jeuxxgratuit, 1 year ago

thanks for code. good news :)


___________________________________
Télécharger Raven’s Cry PC Gratuit
jeuxxgratuit, 1 year ago

ohhh bro. Thanks for shared code. good job


___________________________________
Télécharger Raven’s Cry PC Gratuit
jeuxxgratuit, 1 year ago

you code is good. thanks. im using code.


___________________________________
Télécharger Raven’s Cry PC Gratuit

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098