SOLVED

Re: Spacing issues in Marketo and Outlook

Go to solution
Kalena_Cavanagh
Level 2

Spacing issues in Marketo and Outlook

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;">
       &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
    </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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</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>&nbsp;|&nbsp;<a href="https://mylink" style="color: #ffffff;" target="_blank">Email preferences</a>&nbsp;|&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;&nbsp;<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}">&nbsp;</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}">&nbsp;</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}">&nbsp;</td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table></td> 
                </tr> 
              </tbody> 
            </table> </td> 
        </tr> 
      </tbody> 
    </table> 
    <!-- Outer Table END -->  
  </body>
</html>

 

1 ACCEPTED SOLUTION

Accepted Solutions
Jasbir_Kaur
Level 5

Re: Spacing issues in Marketo and Outlook

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

View solution in original post

5 REPLIES 5
Kalena_Cavanagh
Level 2

Re: Spacing issues in Marketo and Outlook

Marketo screenshot: 

Kalena_Cavanagh_2-1662994834033.png

 

 

Outlook: 

Kalena_Cavanagh_1-1662994759752.png

 

Jasbir_Kaur
Level 5

Re: Spacing issues in Marketo and Outlook

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

Kalena_Cavanagh
Level 2

Re: Spacing issues in Marketo and Outlook

Thank you! This did the trick.

Dave_Roberts
Level 10

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)

Disha_Goyal6
Level 4

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}">&nbsp;</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}">&nbsp;</td>
</tr>

 

Make sure to update the height variable in every spacer height code.

 

Hope this helps!

 

Thanks,

Disha