Hi,
I am currently creating our company's brand-specific email template with some reusable modules for our marketers. I am trying to make it compatible with outlook desktop clients particulary the old versions. However, when creating new email instance from my template, i've noticed it has stripped off some conditional mso comments from the template e.g.
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:800px;" width="800" ><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;"><v:image style="border:0;height:469px;mso-position-horizontal:center;position:absolute;top:0;width:800px;z-index:-3;" src="${hero2BgImage}" xmlns:v="urn:schemas-microsoft-com:vml" /><![endif]-->
Solved! Go to Solution.
Hi @mydeguzman, I am using the below code in Marketo and everything works fine.
<table class="mktoModule" mktoName="Hero w/ CTA Module" mktoAddByDefault="true" id="banner1" cellpadding="0" align="center" cellspacing="0" style="margin:0 auto;width:100%;border-collapse: collapse;border-spacing: 0;" border="0" width="100%">
<tr>
<td bgColor="${banner2-bg-Color}" valign="top" background="${banner1_img}" style="background-image:url('${banner1_img}');background-Color:${banner2-bg-Color};background-repeat: no-repeat; background-size: cover;background-position:center;vertical-align: top;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;display:block;height:${outlook-ht1}px;">
<v:fill type="frame" src="${banner1_img}" Color="${banner2-bg-Color}" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellpadding="0" cellspacing="0" align="center" class="main" style="margin:0 auto; width:660px;border-spacing: 0px;border-collapse: collapse;" border="0" width="660">
<tr>
<td valign="top">
<table class="inner_table" width="590" style="margin: 0 auto; width: 590px; border-spacing: 0px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table class="inner_table" width="${BannerContentWidth}" style="margin: 0 auto; width: ${BannerContentWidth}px; border-spacing: 0px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="${BannerContentAlignment}">
<tr>
<td height="${top_Space20}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td style="font-family: ${fontfamily2a},Arial, sans-serif; color: ${headlineFontColorwhite}; font-size: ${headlineFontSize30}px; line-height: 130%; mso-line-height-rule: exactly; text-align: ${aligncontent}">
<div class="mktoText" mktoName="Headline" id="banner1-text">
<div><strong>Hero Text Headline Here</strong></div>
</div>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td style="font-family: ${fontfamily},Arial, sans-serif; color: ${FreeTextColorwhite}; font-size: ${FreeTextSize18}px; line-height: 130%; mso-line-height-rule: exactly; text-align: ${aligncontent}">
<div class="mktoText" mktoName="Text" id="banner1-text2">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</td>
</tr>
<tr>
<td height="25" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td>
<div class="mktoText" id="banner-btn" mktoname="CTA">
<div>
<table cellpadding="0" cellspacing="0" border="0" align="${aligncontent}">
<tbody>
<tr>
<td bgcolor="${CTABGColor}" style="text-align: center;border:1px solid ${CTABorderColor}; color:${CTAColor}; background-color:${CTABGColor};text-decoration:none; font-size:18px; line-height:110%; font-family: ${fontfamily},Arial, sans-serif; padding: 13px 20px; border-radius: ${CTABorderRadius}px; font-weight:500;">
<a style="text-decoration:none; color:${CTAColor};" href="${CTAURL}">${CTAText}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_Space20}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Hi @mydeguzman, I am using the below code in Marketo and everything works fine.
<table class="mktoModule" mktoName="Hero w/ CTA Module" mktoAddByDefault="true" id="banner1" cellpadding="0" align="center" cellspacing="0" style="margin:0 auto;width:100%;border-collapse: collapse;border-spacing: 0;" border="0" width="100%">
<tr>
<td bgColor="${banner2-bg-Color}" valign="top" background="${banner1_img}" style="background-image:url('${banner1_img}');background-Color:${banner2-bg-Color};background-repeat: no-repeat; background-size: cover;background-position:center;vertical-align: top;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;display:block;height:${outlook-ht1}px;">
<v:fill type="frame" src="${banner1_img}" Color="${banner2-bg-Color}" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<table cellpadding="0" cellspacing="0" align="center" class="main" style="margin:0 auto; width:660px;border-spacing: 0px;border-collapse: collapse;" border="0" width="660">
<tr>
<td valign="top">
<table class="inner_table" width="590" style="margin: 0 auto; width: 590px; border-spacing: 0px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<table class="inner_table" width="${BannerContentWidth}" style="margin: 0 auto; width: ${BannerContentWidth}px; border-spacing: 0px; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0" align="${BannerContentAlignment}">
<tr>
<td height="${top_Space20}" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td style="font-family: ${fontfamily2a},Arial, sans-serif; color: ${headlineFontColorwhite}; font-size: ${headlineFontSize30}px; line-height: 130%; mso-line-height-rule: exactly; text-align: ${aligncontent}">
<div class="mktoText" mktoName="Headline" id="banner1-text">
<div><strong>Hero Text Headline Here</strong></div>
</div>
</td>
</tr>
<tr>
<td height="10" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td style="font-family: ${fontfamily},Arial, sans-serif; color: ${FreeTextColorwhite}; font-size: ${FreeTextSize18}px; line-height: 130%; mso-line-height-rule: exactly; text-align: ${aligncontent}">
<div class="mktoText" mktoName="Text" id="banner1-text2">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</td>
</tr>
<tr>
<td height="25" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td>
<div class="mktoText" id="banner-btn" mktoname="CTA">
<div>
<table cellpadding="0" cellspacing="0" border="0" align="${aligncontent}">
<tbody>
<tr>
<td bgcolor="${CTABGColor}" style="text-align: center;border:1px solid ${CTABorderColor}; color:${CTAColor}; background-color:${CTABGColor};text-decoration:none; font-size:18px; line-height:110%; font-family: ${fontfamily},Arial, sans-serif; padding: 13px 20px; border-radius: ${CTABorderRadius}px; font-weight:500;">
<a style="text-decoration:none; color:${CTAColor};" href="${CTAURL}">${CTAText}</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td height="${btm_Space20}" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Thank you! Seems like i had some bad syntax which caused the Email Editor to scrub out some mso comments.