- Marketing Nation
- :
- Products
- :
- Product Discussions
- :
- Re: Spacing issues in Marketo and Outlook
Your Achievements
Next /
Sign inSign in to Community to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
SOLVED
Re: Spacing issues in Marketo and Outlook
Go to solution
Topic Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-12-2022
07:56 AM
09-12-2022
07:56 AM
Hello all -
First off, I am not a developer. I have basically pulled parts of code from multiple email templates, so please be kind on that front.
My issue is spacing. It seems like Marketo is adding extra space around my variables, so what's rendering in Marketo does not match the Outlook desktop version. Code is below:
<!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" style="width: 100%;">
<head>
<!-- Marketo Variable Definitions -->
<meta class="mktoColor" id="spacerBackgroundColor" mktoname="Background Color" default="#ffffff" mktomodulescope="true" />
<meta class="mktoColor" id="spacerColor" mktoname="Spacer Color" default="#007ac3" mktomodulescope="true" />
<meta class="mktoNumber" id="spacerSpacer" mktoname="Spacer Height" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="Barspacertop" mktoname="Spacer Top" default="32" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="ColoredBarheight" mktoname="Color Bar Height" default="6" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="Barspacerbottom" mktoname="Spacer Bottom" default="32" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="freeImageBackgroundColor" mktoname="Background Color" default="#ffffff" mktomodulescope="true" />
<meta class="mktoColor" id="freeTextBackgroundColor" mktoname="Background Color" default="#ffffff" mktomodulescope="true" />
<meta class="mktoNumber" id="Spacerhero" mktoname="Space Before Hero" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="freeTextSpacer" mktoname="Space Before Text" default="15" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="freeTextSpacer2" mktoname="Space After Text" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="footerBackgroundColor" mktoname="Background Color" default="#474747" mktomodulescope="true" />
<meta class="mktoNumber" id="footerSpacer" mktoname="Space Before Text" default="10" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoNumber" id="footerSpacer2" mktoname="Space After Text" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<meta class="mktoColor" id="ctaBackgroundColor" mktoname="Background Color" default="#ffffff" mktomodulescope="true" />
<meta class="mktoString" id="ctaLink" mktoname="Button Link" default="http://mylink" mktomodulescope="true" />
<meta class="mktoString" id="ctaLinkText" mktoname="Button Label" default="Call to Action Text" mktomodulescope="true" />
<meta class="mktoColor" id="ctaButtonColor" mktoname="Button Color" default="#007AC3" mktomodulescope="true" />
<meta class="mktoNumber" id="ctaSpacer" mktoname="Space Before Button" default="20" min="1" max="300" units="px" step="1" mktomodulescope="true" />
<!-- Other Meta Tags -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--[if mso]>
<style type='text/css'>
.primary-font {
font-family: Fira Sans, Arial, sans-serif !important;
}
</style>
<![endif]-->
<!--[if mso]>
<style type='text/css'>
.secondary-font {
font-family: Fira Sans, Arial, sans-serif !important;
}
</style>
<![endif]-->
<style>
/*startcommon*/
@media only screen and (max-width: 800px) {
table#boxing{
width: 100% !important;
}
}
/*endcommon*/
</style>
<!--[if gte mso 9]>
<style type="text/css">
#hero .table3-3{
width: 100% !important;
}
</style>
<![endif]-->
<style media="all">
/* CLIENT-SPECIFIC STYLES */
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
/* Force Hotmail to display emails at full width */
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
/* Force Hotmail to display normal line spacing */
/* iOS BLUE LINKS */
.appleBody a {
color: #000;
text-decoration: none;
}
.appleFooter a {
color: #000;
text-decoration: none;
}
@-ms-viewport {
width: device-width;
}
h1 {
font-family: Fira Sans, Arial, sans-serif !important;
font-size: 24px !important;
line-height: 30px !important;
text-align: left !important;
}
h2 {
font-family: Fira Sans, Arial !important;
font-size: 45px !important;
line-height: 40px !important;
text-align: left !important;
font-weight: 200 !important;
}
p {
font-family: Fira Sans, Arial !important;
text-align: left !important;
}
p .footer {
font-family: Fira Sans, Arial !important;
color: #ffffff !important;
text-align: left !important;
font-size: 12px !important;
}
</style>
<style media="all">
@media only screen and (max-width: 640px) {
/*starttablet*/
body {
width: auto !important;
}
table.table-inner{
width: 86% !important;
}
table.table2-3{
width: 64% !important;
}
table.table3-3{
width: 100% !important;
clear: both;
}
table.footer-logo{
width: 10% !important;
text-align: right !important;
}
td.outer{
min-width: 0 !important;
}
td.stack{
padding-bottom: 40px !important;
}
.stack-tablet {
padding-bottom: 20px !important;
overflow: visible !important;
float: none !important;
mso-hide: none !important;
display: block !important;
}
img.mobile-img{
width: 100% !important;
height: auto !important;
}
td.hide-tablet{
display: none !important;
}
table.footer-column{
width: 47% !important;
text-align: left !important;
}
.m_free-image img {
width: 450px !important;
}
/*endtablet*/
}
@media only screen and (max-width: 479px) {
/*startmobile*/
body {
width: auto !important;
}
td.colorbar {
line-height: 4px !important;
font-size: 8px !important;
}
.secondary-font-text h1 {
font-size: 18px !important;
line-height: 25px !important;
}
.secondary-font-text h3 {
font-size: 16px !important;
line-height: 20px !important;
font-weight: 500 !important;
}
.secondary-font-text p {
font-size: 14px !important;
line-height: 20px !important;
text-align: left !important;
}
.secondary-font-text li {
font-size: 14px !important;
line-height: 20px !important;
text-align: left !important;
}
.footer p {
font-size: 12px !important;
line-height: 16px !important;
color: #ffffff !important;
}
table.table600 {
width: 320px !important;
}
table.table-inner{
width: 90% !important;
float: none !important;
}
table.table2-3{
width: 100% !important;
}
table.table3-3 {
width: 50% !important;
clear: both;
}
table.footer-logo{
width: 60% !important;
}
td.outer {
min-width: 0 !important;
}
td.td3-1 {
width: 60% !important;
}
img.mobile-img{
width: 100% !important;
}
td.hide-smartphone{
display: none !important;
}
table.footer-column{
width: 100% !important;
}
.m_hr .table-inner {
width: 100% !important;
}
td.footer img {
width: 20px !important;
height: 20px !important;
}
.m_footer p {
color: #ffffff !important;
}
/*endmobile*/
}
a:link {
color:#007ac3;
text-decoration:underline;
}
a:visited {
color:#007ac3;
text-decoration:underline;
}
a:active {
color:#007ac3;
text-decoration:underline;
}
a:hover {
color:#007ac3;
text-decoration:underline;
}
</style>
</head>
<body style="margin-bottom: 0; -webkit-text-size-adjust: 100%; padding-bottom: 0; min-width: 100%; margin-top: 0; margin-right: 0; -ms-text-size-adjust: 100%; margin-left: 0; padding-top: 0; padding-right: 0; padding-left: 0; width: 100%;">
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
</div>
<!-- Outer table START -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;">
<tbody>
<tr>
<td class="outer" valign="top" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; min-width: 570px; border-collapse: collapse; background-color: #ededed">
<table width="600" align="center" id="boxing" border="0" cellpadding="0" cellspacing="0" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: #ffffff">
<tbody>
<tr>
<td class="mktoContainer boxedbackground" id="template-wrapper" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="mktoModule m_spacer" id="spacer" mktoname="spacer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${spacerBackgroundColor};" bgcolor="${spacerBackgroundColor}" valign="top">
<table class="table600" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${spacerSpacer};font-size:${spacerSpacer};" height="${spacerSpacer}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_free-image" id="headera5c7b734-23d5-49d5-b4d3-c6de1953fdad" mktoname="header-clone" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor};" bgcolor="${freeImageBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="table3-3" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" align="left" border="0" cellpadding="0" cellspacing="0" width="175">
<tbody>
<tr>
<td class="logo" style="-webkit-hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -ms-text-size-adjust: 100%; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<div style="display:inline-block" class="mktoImg" id="logof81b1e2a-0eeb-444a-a37f-e001212a360b" mktoname="Logo" mktolockimgsize="true" mktolockimgstyle="false">
<a href="https://mylink" target="_blank"><img style="" height="auto" width="175" /></a>
</div> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_spacer" id="spacer-bar" mktoname="spacer-bar" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${spacerBackgroundColor};" bgcolor="${spacerBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacertop};font-size:${Barspacertop};" height="${Barspacertop}"> </td>
</tr>
<tr>
<td class="colorbar" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${ColoredBarheight};font-size:${ColoredBarheight};background-color:${spacerColor};" bgcolor="${spacerColor}" height="${ColoredBarheight}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacerbottom};font-size:${Barspacerbottom};" height="${Barspacerbottom}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_hero-text" id="heroa41cc562-c9d4-46b9-8ff3-7c841ed0c801" mktoname="hero" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor};" bgcolor="${freeImageBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer}; background-color: ${freeImageBackgroundColor};" height="${freeTextSpacer}"> </td>
</tr>
<tr>
<td class="secondary-font-text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none; background-color:${freeImageBackgroundColor}; font-family: Fira Sans, Arial, sans-serif;font-size: 16px;line-height: 24px;color: #232323;border-collapse: collapse;">
<div class="mktoText" mktoname="hero-text" id="hero-text4a66edd3-a028-4845-b94b-df9a2d224f4d">
<p><span style="color: #232323; font-family: 'Fira Sans', Arial; font-size: 45px; line-height: 50px; font-weight: 300;">Email headline</span></p>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor}; line-height:${freeTextSpacer2};font-size:${freeTextSpacer2};" height="${freeTextSpacer2}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_free-image" id="hero" mktoname="hero" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor};" bgcolor="${freeImageBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Spacerhero};font-size:${Spacerhero}; background-color: ${freeImageBackgroundColor};" height="${Spacerhero}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<div class="mktoImg" id="hero-image" mktoname="hero-image" mktolockimgsize="true" mktolockimgstyle="false">
<a href="https://mylink" target="_blank"> <img style="" width="570" /> </a>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer}; background-color: ${freeImageBackgroundColor};" height="${freeTextSpacer}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_free-image" id="hero621450e7-f714-46cd-ace9-5d3cd8f2eb88" mktoname="hero-clone-clone-clone" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor};" bgcolor="${freeImageBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${freeTextSpacer};font-size:${freeTextSpacer}; background-color: ${freeImageBackgroundColor};" height="${freeTextSpacer}"> </td>
</tr>
<tr>
<td class="secondary-font-text" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none; background-color:${freeImageBackgroundColor}; font-family: Fira Sans, Arial;font-size: 16px;line-height: 24px;color: #232323;border-collapse: collapse;">
<div class="mktoText" mktoname="hero-text" id="hero-text4b72cd1b-d5cd-42b9-ad52-574823c8b504">
<p><a href="https://mylink" target="_blank" id="">Lorem ipsum dolor sit amet</a>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
</ul>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${freeImageBackgroundColor}; line-height:${freeTextSpacer2};font-size:${freeTextSpacer2};" height="${freeTextSpacer2}"> </td>
</tr>
<tr style="outline: medium none;">
<td class="cta" style="mso-line-height-rule: exactly; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table style="border-spacing: 0; border-collapse: collapse; mso-table-lspace: -1pt; mso-table-rspace: -1pt;" align="left" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="buttoncell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;" bgcolor="${ctaButtonColor}"> <a href="${ctaLink}" target="_blank" class="primary-font-button" style="-webkit-text-size-adjust:
100%;-ms-text-size-adjust: 100%;border-left-color:${ctaButtonColor};font-size: 14px;font-family: Fira Sans, Arial;color: #ffffff;padding-top: 12px;padding-right: 32px;padding-bottom: 12px;padding-left: 32px;display: inline-block;border-top-style: solid;border-right-style:
solid;border-bottom-style: solid;border-left-style: solid;border-top-color:${ctaButtonColor};border-right-color:${ctaButtonColor};border-bottom-color:${ctaButtonColor};text-decoration: none;background-color:${ctaButtonColor};">${ctaLinkText}</a> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_spacer" id="spacer-barfe79d3ae-a358-44dd-b5d2-3699ff9c5fe4" mktoname="spacer-bar-clone" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${spacerBackgroundColor};" bgcolor="${spacerBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacertop};font-size:${Barspacertop};" height="${Barspacertop}"> </td>
</tr>
<tr>
<td class="colorbar" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${ColoredBarheight};font-size:${ColoredBarheight};background-color:${spacerColor};" bgcolor="${spacerColor}" height="${ColoredBarheight}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacerbottom};font-size:${Barspacerbottom};" height="${Barspacerbottom}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_footer" id="footer" mktoname="footer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${footerBackgroundColor};" bgcolor="${footerBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; background-color: ${footerBackgroundColor};" border="0" cellpadding="0" cellspacing="0" width="570">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacertop};font-size:${Barspacertop};" height="${Barspacertop}"> </td>
</tr>
<tr>
<td class="colorbar" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${ColoredBarheight};font-size:${ColoredBarheight};background-color:${spacerColor};" bgcolor="${spacerColor}" height="${ColoredBarheight}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${Barspacerbottom};font-size:${Barspacerbottom};" height="${Barspacerbottom}"> </td>
</tr>
<tr>
<td class="footer" style="-moz-hyphens: none;-webkit-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-ms-text-size-adjust: 100%;hyphens: none;font-family: Fira Sans, Arial;font-size: 12px;line-height: 16px;color: #ffffff;border-collapse: collapse;background-color: ${footerBackgroundColor};">
<div class="mktoText" mktoname="footer-text" id="footer-text">
<div style="font-family: fira sans, arial; font-size: 12px; line-height: 25px; color: #ffffff; font-weight: 300px;">
<p><span style="font-size: 12px; color: #ffffff;"><a href="https://mylink" target="_blank" style="color: #ffffff;">Contact us</a> | <a href="https://mylink" style="color: #ffffff;" target="_blank">Email preferences</a> | <a href="https://mylink" style="color: #ffffff;" target="_blank">Unsubscribe</a></span></p>
<p><br /></p>
<p><span style="color: #ffffff; font-size: 12px;"><a href="https://mylink" target="_blank" title="LinkedIn" style="color: #ffffff;"><img src="https://s3.amazonaws.com/assets.knak.io/img/icons/builder-social/linkedin.png" alt="LinkedIn" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://mylink" target="_blank" title="Twitter" style="color:
#ffffff;"><img src="https://s3.amazonaws.com/assets.knak.io/img/icons/builder-social/twitter.png" alt="Twitter" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://mylink" target="_blank" title="Facebook" style="color: #ffffff;"><img src="https://s3.amazonaws.com/assets.knak.io/img/icons/builder-social/facebook.png" alt="Facebook" height="30" width="30" constrain="true" imagepreview="false" /></a> <a href="https://mylink" target="_blank" title="YouTube" style="color: #ffffff;"><img src="https://s3.amazonaws.com/assets.knak.io/img/icons/builder-social/youtube.png" alt="YouTube" height="30" width="30" constrain="true" imagepreview="false" /></a></span></p>
</div>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${footerSpacer};font-size:${footerSpacer};background-color: ${footerBackgroundColor};" height="${footerSpacer}"> </td>
</tr>
<tr>
<td style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<table class="table3-3" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="175">
<tbody>
<tr>
<td class="center-tablet logo" style="-webkit-hyphens: none; -webkit-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; word-break: break-word; -ms-text-size-adjust: 100%; -moz-hyphens: none; hyphens: none; border-collapse: collapse;">
<div style="display:inline-block" class="mktoImg" id="logo1f71d567-c429-4d13-a012-260612760ce72" mktoname="Logo2" mktolockimgsize="true" mktolockimgstyle="false">
<a href="https://mylink" target="_blank"><img src="https://info.wkelmsolutions.com/rs/874-VIE-290/images/ButtonBackground_EAB2014.png" style="-ms-interpolation-mode: bicubic; outline: none; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; text-decoration: none; border-top-width: 0; max-width: 100%; line-height: 100%; width: 175px; display: inline-block; height: auto;" height="auto" width="175" /></a>
</div> </td>
</tr>
<tr>
<td class="" style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${footerSpacer2};font-size:${footerSpacer2};background-color: ${footerBackgroundColor};" height="${footerSpacer2}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="mktoModule m_spacer" id="spacer-21cc2114d-5ea2-4973-a5fc-761241b47395" mktoname="spacer-2-clone-clone" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;background-color:${spacerBackgroundColor};" bgcolor="${spacerBackgroundColor}" valign="top">
<table class="table600" align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-spacing: 0; border-collapse: collapse; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${spacerSpacer};font-size:${spacerSpacer};" height="${spacerSpacer}"> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<!-- Outer Table END -->
</body>
</html>
Solved! Go to Solution.
1 ACCEPTED SOLUTION
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-13-2022
06:19 AM
09-13-2022
06:19 AM
Hi @Kalena_Cavanagh,
You need to standardized your code, instead of <p> tag try to use <div> tag and give the style in the <td> tag instead of <span> tags.
If you still face any issue let me know, I will share the code with you, and please share the screenshot of issue again.
Thanks!
Jasbir
5 REPLIES 5
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-12-2022
08:00 AM
09-12-2022
08:00 AM
Re: Spacing issues in Marketo and Outlook
Marketo screenshot:
Outlook:
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-13-2022
06:19 AM
09-13-2022
06:19 AM
Hi @Kalena_Cavanagh,
You need to standardized your code, instead of <p> tag try to use <div> tag and give the style in the <td> tag instead of <span> tags.
If you still face any issue let me know, I will share the code with you, and please share the screenshot of issue again.
Thanks!
Jasbir
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-15-2022
11:52 AM
09-15-2022
11:52 AM
Re: Spacing issues in Marketo and Outlook
Thank you! This did the trick.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-14-2022
02:35 PM
09-14-2022
02:35 PM
Re: Spacing issues in Marketo and Outlook
Yeah, I'd agree that the <p> tags are probably what's causing the different spacing here. If you're not adding those in there intentionally it might be that your system is setup to add a <p> around text elements in Email -- it's the default setting for whatever reason. Changing the root block elements to "None" instead of "<p>" might help to shore up the issues here moving forward but you'd still need to go back in and delete any <p> tags in the editor.
Here's a link to an idea in the Community which has some more info on where to find this setting and what to adjust it to:
https://nation.marketo.com/t5/ideas/acceptable-defaults-root-block-elements-none/idi-p/310510
You can find the Root Block Elements panel under the Admin > Email > Edit Text Editor Settings (see image in thread above)
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
09-14-2022
11:24 PM
09-14-2022
11:24 PM
Re: Spacing issues in Marketo and Outlook
Hi @Kalena_Cavanagh,
I have checked your code and found that spacing issues are coming due to these reasons:
1. <p> used in place of div tags
2. Spacer height in between the element is not defined properly.
Please use this code
<tr>
<td style="font-size:1px; line-height:1px;" height="${spacerSpacer}"> </td>
</tr>
In place of this code
<tr>
<td style="-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;mso-table-lspace: 0pt;mso-table-rspace: 0pt;word-break: break-word;-webkit-hyphens: none;-moz-hyphens: none;hyphens: none;border-collapse: collapse;line-height:${spacerSpacer};font-size:${spacerSpacer};" height="${spacerSpacer}"> </td>
</tr>
Make sure to update the height variable in every spacer height code.
Hope this helps!
Thanks,
Disha
.png)