<!--[if gte mso 9]> Getting stripped out

Hi,

I'm having a problem using the conditional statements to target Outlook 2007/10. The template works fine when sent not using campaign monitor, but when i import the template into CM and send a test, the code that is targeted solely for outlook 07/10 is getting used for every email client possible.

The reason I'm trying to target outlook 2007 is because i'm playing around with left alligned tables to create an interesting mobile version. But it turns out outlook 07/10 adds extra bit of padding or margin to a left alligned object that seem impossible to take off, so as a hack I'm shortening the table in the conditional statement just for 07.

This was working great until it got imported into campaign monitor, any ways heres my code if anybody knows why the <!--[if gte mso 9]> is not soley being used for outlook 07/10

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<style type="text/css">
body {
-webkit-text-size-adjust: none;
width: 100% !important;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
a {
color:#000000;
}
@media only screen and (max-device-width: 480px) {
table[class="mobilewidth"] {
width: 320px !important;
}
table[class="block"],
img[class="block"] {
clear:both !important;
width: 100% !important;
}
table[class="hide"],
td[class="hide"],
img[class="hide"],
span[class="hide"] {
display:none;
width:0px;
height:0px;
}
table[class="gap"],
td[class="gap"],
img[class="gap"],
span[class="gap"] {
display:none;
width:0px;
height:0px;
}
img[class="maxwidth"] {
width: 100% !important;
}
table[class="heading-one"],
div[class="heading-one"],
td[class="heading-one"] {
font-size:24px !important;
border-right: #FFF;
}
table[id="twothirds"],
div[id="twothirds"],
td[id="twothirds"] {
clear:both !important;
width: 100% !important;
}
table[id="onethirds"],
div[id="onethirds"],
td[id="onethirds"] {
clear:both !important;
width: 100% !important;
}
}
</style>
<!--[if gte mso 9]>
<style>
#twothirds { width:390px;}
#onethirds { width:190px;}
</style>
<![endif]-->
</head>
<body bgcolor="black">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#666">
 <tr>
  <td align="center">
   <table class="mobilewidth" cellpadding="0" cellspacing="0" width="620" bgcolor="#333">
    <tr>
     <td align="left">
      <!-- Floated table 1 -->
      <table width="400" bgcolor="white" id="twothirds" cellspacing="0" cellpadding="0" border="0" align="left">
       <tr>
        <td width="380" id="twothirds">
         <multiline label='Description'>table 1</multiline>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
      <!-- Floated table 2 -->
      <table bgcolor="#ffffff" id="onethirds" width="200" cellspacing="0" cellpadding="0" border="0" align="left">
       <tr>
        <td width="180">
         <unsubscribe>table 2</unsubscribe>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#666">
 <tr>
  <td align="center">
   <!-- Floated table 3 -->
   <table class="mobilewidth" cellpadding="0" cellspacing="0" width="620" bgcolor="#333">
    <tr>
     <td align="left">
      <table bgcolor="white" id="onethirds" width="200" cellspacing="0" cellpadding="0" border="0" align="left">
       <tr>
        <td width="180">
         <webversion>table 3</webversion>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
      <!-- Floated table 4 -->
      <table bgcolor="white" id="onethirds" width="200" cellspacing="0" cellpadding="0" border="0" align="left">
       <tr>
        <td width="180">
         <multiline label='Description'>table 4</multiline>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
      <!-- Floated table 5 -->
      <table bgcolor="white" id="onethirds" width="200" cellspacing="0" cellpadding="0" border="0" align="left">
       <tr>
        <td width="180">
         <multiline label='Description'>table 5</multiline>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>

Interestingly in campaign monitor whilst in editing mode it diplays how it should do until you press preview where it uses the [if gte mso 9] conditional statement, as you can see below:

Edit mode
http://www.jarrang.com/assets/tests/Screen%20Shot%202012-03-27%20at%2018.14.12.png

Preview mode
http://www.jarrang.com/assets/tests/Screen%20Shot%202012-03-27%20at%2018.14.38.png

peterthomassimmons, 4 years ago

I have found putting a !important on the table's inline style forces outlook to choose the specific styles of 07/10 set in the head and ignore the !important styles set in the body.

Only problem with that now is my mobile media query styles that use the !important will get ignored as there is a !important cascaded farther down taking more importance, any one have a solution to that problem?

Still think this isn't explaining why every client is reading the styles inside the <!--[if gte mso 9]> though :(

This is what it should look like in the mobile with 100% widths
http://www.jarrang.com/assets/tests/Screen%20Shot%202012-03-27%20at%2021.14.57.png

But because the !important inline is taking control they are taking the desktops width so for example table 2,3,4,5 are taking the width 200px instead of the 100% width.
http://www.jarrang.com/assets/tests/Screen%20Shot%202012-03-27%20at%2021.14.29.png

If anyone knows how to solve this i would be ever grateful!

Here is the updated code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<style type="text/css">
body {
-webkit-text-size-adjust: none;
width: 100% !important;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
a {
color:#000000;
}

@media only screen and (max-device-width: 480px) {
table[class="mobilewidth"] {
width: 320px !important;
}
table[class="block"],
img[class="block"] {
clear:both !important;
width: 100% !important;
}
table[class="hide"],
td[class="hide"],
img[class="hide"],
span[class="hide"] {
display:none;
width:0px;
height:0px;
}
table[class="gap"],
td[class="gap"],
img[class="gap"],
span[class="gap"] {
display:none;
width:0px;
height:0px;
}
img[class="maxwidth"] {
width: 100% !important;
}
table[id="twothirds"],
div[id="twothirds"],
td[id="twothirds"] {
clear:both !important;
width: 100% !important;
}
table[id="onethirds"],
div[id="onethirds"],
td[id="onethirds"] {
clear:both !important;
width: 100% !important;
}
}
</style>
<!--[if gte mso 9]>
<style>
#twothirds { width:390px;}
#onethirds { width:190px;}
</style>
<![endif]-->
</head>
<body bgcolor="black">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#666">
 <tr>
  <td align="center">
   <table class="mobilewidth" cellpadding="0" cellspacing="0" width="620" bgcolor="#333">
    <tr>
     <td align="left">
      <!-- Floated table 1 -->
      <table bgcolor="white" cellspacing="0" cellpadding="0" border="0" align="left" id="twothirds" width="400px" style="width:400px !important;">
       <tr>
        <td>
         <multiline label='Description'>table 1</multiline>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
      <!-- Floated table 2 -->
      <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="left" id="onethirds" width="200px" style="width:200px !important;">
       <tr>
        <td>
         <unsubscribe>table 2</unsubscribe>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#666">
 <tr>
  <td align="center">
   <!-- Floated table 3 -->
   <table class="mobilewidth" cellpadding="0" cellspacing="0" width="620" bgcolor="#333">
    <tr>
     <td align="left">
      <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="left" id="onethirds" width="200px" style="width:200px !important;">
       <tr>
        <td >
         <webversion>table 3</webversion>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
      <!-- Floated table 4 -->
      <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="left" id="onethirds" width="200px" style="width:200px !important;">
       <tr>
        <td >
         <multiline label='Description'>table 4</multiline>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
      <!-- Floated table 5 -->
      <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="left" id="onethirds" width="200px" style="width:200px !important;">
       <tr>
        <td>
         <multiline label='Description'>table 5</multiline>
         <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div>
        </td>
        <td width="20" class="hide" bgcolor="red">
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>
  </td>
 </tr>
</table>
</body>
</html>
roshodgekiss roshodgekiss, 4 years ago

Hi peter, I'm sorry to say that many of your woes here are caused by a known bug in our app. At present, conditional comments are being inlined, much to our dismay. Your code would be 99% there if this wasn't the case.

Given this issue, I've streamlined your code a little and fixed small things like width="200px". The gaps in Outlook remain, but at least it's slightly more tolerable:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<style type="text/css">
body {
    -webkit-text-size-adjust: none;
    width: 100% !important;
}
.ReadMsgBody {
    width: 100%;
}
.ExternalClass {
    width: 100%;
}
a {
    color:#000000;
}
 @media only screen and (max-device-width: 480px) {
table[class="mobilewidth"] {
    width: 320px !important;
}
table[class="block"], img[class="block"] {
    clear:both !important;
    width: 100% !important;
}
table[class="hide"], td[class="hide"], img[class="hide"], span[class="hide"] {
    display:none;
    width:0px;
    height:0px;
}
table[class="gap"], td[class="gap"], img[class="gap"], span[class="gap"] {
    display:none;
    width:0px;
    height:0px;
}
img[class="maxwidth"] {
    width: 100% !important;
}
table[id="twothirds"], div[id="twothirds"], td[id="twothirds"] {
    clear:both !important;
    width: 100% !important;
}
table[id="onethirds"], div[id="onethirds"], td[id="onethirds"] {
    clear:both !important;
    width: 100% !important;
}
}
</style>

</head>
<body bgcolor="black">
<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#666">
  <tr>
    <td align="center"><table class="mobilewidth" cellpadding="0" cellspacing="0" width="630" bgcolor="#333">
        <tr>
          <td><!-- Floated table 1 -->
            
            <table bgcolor="white" cellspacing="0" cellpadding="0" border="0" align="left" id="twothirds" width="400">
              <tr>
                <td><multiline label='Description'>table 1</multiline>
                  <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div></td>
                <td width="20" class="hide" bgcolor="red"></td>
              </tr>
            </table>
            
            <!-- Floated table 2 -->
            
            <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="left" id="onethirds" width="200">
              <tr>
                <td><unsubscribe>table 2</unsubscribe>
                  <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div></td>
                <td width="20" class="hide" bgcolor="red"></td>
              </tr>
            </table>
            
            <!-- Floated table 3 -->
            
            <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="left" class="onethirds" width="200">
              <tr>
                <td ><webversion>table 3</webversion>
                  <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div></td>
                <td width="20" class="hide" bgcolor="red"></td>
              </tr>
            </table>
            
            <!-- Floated table 4 -->
            
            <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="left" id="onethirds" width="200">
              <tr>
                <td ><multiline label='Description'>table 4</multiline>
                  <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div></td>
                <td width="20" class="hide" bgcolor="red"></td>
              </tr>
            </table>
            
            <!-- Floated table 5 -->
            
            <table bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="0" align="left" id="onethirds" width="200">
              <tr>
                <td><multiline label='Description'>table 5</multiline>
                  <div class="space" style="margin: 0px; padding: 0px; font-size: 20px; line-height: 20px;  background-color:#999;">&nbsp;</div></td>
                <td width="20" class="hide" bgcolor="red"></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>

Once we have this bug fixed, you can reinsert:

<!--[if gte mso 9]>
<style>
#twothirds { width:388px !important; }
#onethirds { width:190px !important; }
</style>
<![endif]-->

Thanks, peter - we'll let you know as soon as this is fixed.


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

Hi Rosanne and peter,

as I discovered, CM "Edit" buttons add some space into code, when you edit your campaign. In preview these buttons go out, then page looks as it sends. When you switch between modes, you can see small displacement of page items. OK, try to add into your stylesheet this:

.cs-el-wrap,
.cs-it-wrap {margin:0px; padding:0px;}

These lines eliminates extra spaces in edit mode and page looks the same in edit mode as in preview mode. Sure, when you have in your template some blocks with small height, "Edit" buttons do not fit and will be overlapped over each other.

peterthomassimmons, 4 years ago

Thank you so Rosanne for clarifying, it was driving me nuts trying to work it out!

peterthomassimmons, 4 years ago

Got my template mobile test working

Instead of changing the width of the floated table, i just adjusted the gaps width in the head and then put a !important width version inline as !important gets ignored in 07/10 so its all good and in the media query there is no mention of width so its not a problem ( i hide the gaps anyway).

Also you will see the red bars near the bottom, Table 2 and 3 are reversed in the desktop versions, I see this as a good way to have a menu far over to the right in the desktop version so it doesn't distract from the intro text but in the mobile version where a menu might be more useful before the intro text it can now be created. For some reason i couldn't achieve this by having them both right aligned, instead i had to left align table 3 and right align table 2.

Heres how it looks like it in outlook 2007:
(you can see the extra gaps its puts on the floated objects)
http://www.jarrang.com/assets/tests/fb79a4e0-d153-49a4-a742-ea35c81bb379.windowoff.png

Heres how it looks like it in standard gmail:
http://www.jarrang.com/assets/tests/Screen%20Shot%202012-03-28%20at%2017.43.21.png

And heres how it will look on iPhone and default android app
http://www.jarrang.com/assets/tests/andriod.jpg

roshodgekiss roshodgekiss, 4 years ago

Thank you so much for the follow-up, this is awesome! Love what you're doing with responsive email design and can't wait to see the final product.

Thank you too for your help, dedra - your earlier post on Outlook's padding really made my morning :)


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

Hi again peter, I should have mentioned earlier that we now have a workaround for the extra spacing that appears on aligned tables. Here's the fix:

<table align="left" style="border-collapse: collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">...</table>

Hope that helps - sorry about the bug again, we'll hopefully have that fixed soon.


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

Hi Rosanne and peter,

maybe you can try "margin-*:auto;" (where * = left or right, other side have "0px") instead "align=" attribute. You can try "mso-padding-alt: 0px 0px 0px 0px;" too.

Maybe instead "width:100%;" you may use real width in pixels (CSS, not html). No one knows, how and from which 100% is calculated, mainly in Microsoft clients (IE, Outlook, etc.). I addition, margins, padding, extra spaces and block model. We all know, that "width=200" (for example) attribute is defined as minimal width, not exact width.

At last, many webmail portals cannot respect "<!--[if gte mso 9]>" conditional comment (resp. all conditional comments) and read these styles only for Outlook all times and use it as last style definition. Depends on the clients, which target subscribers use, but I recommend do not use conditional comments if possible. Or, if you must use conditional comments, calculate with this (not) functionality.

-------------------------------------

For your information, now I solve some mistakes, that our (I mean Czech) webmail service provider Seznam.cz have. I discover, that for webmail browser look his script probably as read mail content paste end paragraph tag before begin paragraph tag. Then it's look like in mail are two paragraphs (lines) instead one, and if I have in one "multiline" block more than one paragraph, spaces between it visually are not the same. Noticeable difference is, if I have table with another background (as warning/information box) - right, left and bottom margin spaces are OK, but on top, space is "doubled". I try to explaint them, that it's a mistake in his script and in other clients and webmails this is OK. As well as all clients and webmails preserve superscript and subscript tags - Seznam.cz swap these tags with spaces. Strange situation.

On other side, Slovak similar webmail Zoznam.sk strip out all CSS styles, but for now they prepare a new environment, resp. they pass to Microsoft's Live.

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