Solved
Elements with class "mktoModule" are removed when Sending Sample Email
Hi,
I'm coding a email template but I keep reproducing an issue that I haven't had luck sorting out the cause of though I have resolved it in some way once or twice over the past week or two.
- The elements in my template with the "mktoModule" class are removed when using Sending Sample Email, breaking my template layout in all the email clients I have tested in. Instead of a nice column, I get a mess of everything in a single horizontal row.
- Marketo's editor describes no errors and the Preview looks as it should, though some classes are being duplicated on other unrelated elements...
Below is my source code. I removed a number of modules for brevity, but this is reproducing my issue.
Let me know if there are any more details I can provide.
Thank you in advance for the help!
<!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" lang="en" xml:lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" style="width: 100%; ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta class="mktoString" id="headlineText" mktoname="Text" mktomodulescope="true" default="Scratch Made. The Finest Ingredients. Family Pride." />
<meta class="mktoNumber" id="headlineFontSize" mktoname="Font Size" mktomodulescope="true" default="28" min="1" max="42" units="px" step="1" />
<meta class="mktoNumber" id="headlineLetterSpacing" mktoname="Letter Spacing" mktomodulescope="true" default="0" min="-10" max="20" units="px" step="0.2" />
<meta class="mktoNumber" id="headlineLineHeight" mktoname="Line Height" mktomodulescope="true" default="28" min="1" max="42" units="px" step="1" />
<meta class="mktoColor" id="headlineColor" mktoname="Font Color" mktomodulescope="true" default="#df192c" />
<meta class="mktoString" id="subHeadlineText" mktoname="Text" mktomodulescope="true" default="Gumbo beet greens corn soko endive gumbo gourd.
shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato." />
<meta class="mktoNumber" id="subHeadlineFontSize" mktoname="Font Size" mktomodulescope="true" default="30" min="1" max="42" units="px" step="1" />
<meta class="mktoNumber" id="subHeadlineLetterSpacing" mktoname="Letter Spacing" mktomodulescope="true" default="1" min="-10" max="20" units="px" step="0.2" />
<meta class="mktoNumber" id="subHeadlineLineHeight" mktoname="Line Height" mktomodulescope="true" default="30" min="1" max="42" units="px" step="1" />
<meta class="mktoColor" id="subHeadlineColor" mktoname="Font Color" mktomodulescope="true" default="#805140" />
<meta class="mktoColor" id="subHeadlineBackgroundColor" mktoname="Background Color" mktomodulescope="true" default="#f2e6ce" />
<meta class="mktoColor" id="textColor" mktoname="Text Font Color" default="#000000" />
<!-- Marketo Variable Definitions -->
<meta class="mktoNumber" id="spacerSpacer" mktoname="Space Before" mktomodulescope="true" default="15" min="1" max="300" units="px" step="1" />
<style> @-ms-viewport { width: device-width; } @media only screen and (max-width: 800px) {table#boxing { width: 100% !important } } @media only screen and (max-width: 640px) {body { width: auto !important } table[class="table700"] { width: 450px !important } table[class="table1-2"] { width: 47%
!important } table[class="footer-logo"] { text-align: right !important; width: 10% !important } td[class="outer"] { min-width: 0 !important } td[class="stack"] { padding-bottom: 40px !important } .stack-tablet { display: block !important; float: none !important; mso-hide: none !important;
overflow: visible !important; padding-bottom: 20px !important } img[class="mobile-img"] { height: auto !important; width: 100% !important } td[class="center-tablet"] { text-align: center !important } td[class="hide-tablet"] { display: none !important } table[class="footer-column"] { text-align:
left !important; width: 47% !important } .m_two-articles .table1-2 { width: 100% !important } .m_two-articles .photo img { width: 100% !important } .m_two-articles .stack-tablet td { height: 60px !important } } @media only screen and (max-width: 480px) {body { width: auto !important }
table[class="table700"] { width: 340px !important } table[class="table1-2"] { clear: both; width: 100% !important } table[class="footer-logo"] { text-align: center !important; width: 60% !important } td[class="outer"] { min-width: 0 !important } .stack-smartphone { display: block !important;
float: none !important; mso-hide: none !important; overflow: visible !important; padding-bottom: 20px !important } td[class="center-smartphone"] { text-align: center !important } img[class="mobile-img"] { width: 100% !important } td[class="center-tablet"] { text-align: center !important }
td[class="hide-smartphone"] { display: none !important } table[class="footer-column"] { text-align: center !important; width: 100% !important } } @font-face {font-family: "Bree Serif"; font-style: normal; font-weight: 400; src:
url(https://fonts.gstatic.com/s/breeserif/v10/4UaHrEJCrhhnVA3DgluA96Tp56N1.woff2) format("woff2"); unicode-range: U 100 -24F, U 259, U 1E00-1EFF, U 2020, U 20A0-20AB, U 20AD-20CF, U 2113, U 2C60-2C7F, U A720-A7FF} @font-face {font-family: "Bree Serif"; font-style: normal; font-weight: 400; src:
url(https://fonts.gstatic.com/s/breeserif/v10/4UaHrEJCrhhnVA3DgluA96rp5w.woff2) format("woff2"); unicode-range: U 0 0FF, U 131, U 152 -153, U 2BB-02BC, U 2C6, U 2DA, U 2DC, U 2000 -206F, U 2074, U 20AC, U 2122, U 2191, U 2193, U 2212, U 2215, U FEFF, U FFFD} @font-face {font-family: "SanvitoPro
Regular"; font-style: normal; font-weight: normal; src: url(https://kringle.ohdanishbakery.com/rs/134-XDK-122/images/SanvitoPro-Regular.otf) format("opentype")} @media screen and (-webkit-min-device-pixel-ratio: 0) {.primary-font { font-family: "SanvitoPro Regular", "Bree Serif", Georgia, "Times
New Roman", serif !important } .secondary-font { font-family: Arial, Helvetica, sans-serif !important } .tertiary-font { font-family: "Bree Serif", Georgia, "Times New Roman", serif !important } } </style>
<!--[if mso]>
<style type='text/css'>
.primary-font { font-family: Arial, sans-serif !important; }
</style>
<![endif]-->
<!--[if mso]>
<style type='text/css'>
.secondary-font { font-family: Arial, sans-serif !important; }
</style>
<![endif]-->
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
<body style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; min-width: 100%; width: 100%; ">
<table class="bodyTable" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; margin-top: 0; margin-right: 0; margin-bottom: 0;
margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; height: 100% !important; width: 100% !important; min-width: 100%; width: 100%; ">
<tbody>
<tr>
<td class="outer" align="center" valign="top" bgcolor="#eeeeee" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
word-break: break-word; border-collapse: collapse; color: ${textColor}; background-color: rgb(238, 238, 238); min-width: 700px; ">
<table class="mktoContainer" id="emailContainer" align="center" border="0" cellpadding="0" cellspacing="0" width="800" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; ">
<!-- Headline -->
<tbody>
<tr class="mktoModule" id="headline" mktoname="Headline">
<td align="center" valign="top" bgcolor="#ffffff" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break:
break-word; border-collapse: collapse; ">
<table class="m_headline table700" align="center" border="0" cellpadding="0" cellspacing="0" width="700" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; margin-top: 0; margin-right: auto;
margin-bottom: 0; margin-left: auto; width: 700px; ">
<tbody>
<tr>
<td style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break: break-word; border-collapse: collapse; font-size:
${headlineFontSize}; letter-spacing: ${headlineLetterSpacing}; line-height: ${headlineLineHeight}; ">
<div class="mktoText primary-font h1" mktoname="Headline Text" id="headline-text" style="font-family: "Bree Serif", Georgia, "Times New Roman", serif; font-size: 28px; color: ${headlineColor}; text-align: center; margin-top: 0.25em; margin-bottom: 0.25em; ">
${headlineText}
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Spacer Viking Line -->
<tr class="mktoModule" id="spacer-viking-line" mktoname="Viking Line Spacer">
<td align="center" valign="top" bgcolor="#ffffff" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break:
break-word; border-collapse: collapse; ">
<table class="m_spacer-viking-line spacer" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; ">
<tbody>
<tr>
<td align="center" height="${spacerSpacer}" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break: break-word;
border-collapse: collapse; font-size: ${spacerSpacer}; line-height: ${spacerSpacer}; text-align: center; "> <img src="https://kringle.ohdanishbakery.com/rs/134-XDK-122/images/flourish-viking-line.png" class="spacer" height="auto" width="700" style="-ms-interpolation-mode: bicubic; border: 0 none;
height: auto; line-height: 100%; outline: none; text-decoration: none; display: block; max-width: 700px; margin-right: auto; margin-left: auto; " /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Sub-Headline -->
<tr class="mktoModule" id="sub-headline" mktoname="Sub-Headline">
<td align="center" valign="top" bgcolor="#ffffff" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break:
break-word; border-collapse: collapse; ">
<table class="m_sub-headline" align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="border-spacing: 0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse; ">
<tbody>
<tr>
<td class="primary-font container" bgcolor="${subHeadlineBackgroundColor};" style="background-color: rgb(255, 255, 255); hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; mso-table-lspace: 0pt; mso-table-rspace: 0pt; overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust:
100%; word-break: break-word; border-collapse: collapse; font-family: "Bree Serif", Georgia, "Times New Roman", serif; color: ${subHeadlineColor}; font-size: ${subHeadlineFontSize}; letter-spacing: ${subHeadlineLetterSpacing}; line-height: ${subHeadlineLineHeight};
background-color: ${subHeadlineBackgroundColor}; ">
<center>
<div class="mktoText" mktoname="Sub-Headline Text" id="sub-headline-text">
<div class="p" style="margin-top: 0.5em; margin-bottom: 0.5em; text-align: left; margin-top: 0.25em; margin-bottom: 0.25em; margin-right: 15px; margin-left: 15px; text-align: center; ">
<b> ${subHeadlineText} </b>
</div>
</div>
</center> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
edit: 2021-12-30 in the AM - spelling and code change