New Participant

Question

Please help with email table alignment issues (urgent!)

Forum|Forum|4 years ago
September 15, 2021
1 reply
3739 views

Problem: Hello Community, We are working on a campaign launching very soon. I am having an issue with a module that we're going to use wherein the logo on the left and the text on the right are not lining up vertically in Outlook Desktop, including the older versions and Outlook 2019 Windows and Outlook 2019 120 DPI. The tds that they are in are set to valign="top" so not sure why this is not working. Link to email: Government Vacation Rewards (ovstravel.com) The specific module with the issue is: Module 10 | BofA Header Logo-1 Relevant Code Structure: html

Phone text and "My Account" link

The email includes extensive meta tags for Marketo variables and responsive CSS styling for various email clients.

Marketo

Jo_Pitts1

Community Manager

Mate,

I started trying to test this. There are so many references to fields in your database, that it is a nightmare!!

I stripped the code back to something I could actually test with

<!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" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head> 
    <!--[if gte mso 9]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG/>10
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]--> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0 " /> 
    <meta name="format-detection" content="telephone=no" /> 
    <!--Global Variable--> 
    <meta class="mktoColor" id="Main_Brand_Color" mktoname="Template Background Color" default="#a7a7a7" /> 
    <!--//Global Variable--> 
    <!--Module 05--> 
    <meta class="mktoString" id="Mod_05_Image_Link" mktoname="Image Link" default="" mktomodulescope="true" /> 
    <meta class="mktoString" id="Mod_05_AltText_1" mktoname="Alt Text" default="" mktomodulescope="true" /> 
    <!--//Module 05--> 
    <!--Module 06--> 
    <meta class="mktoColor" id="Mod_06_Font_Color" mktoname="Font Color" default="#303030" mktomodulescope="true" /> 
    <!--Module 06--> 
    <!--Module 6A | 9C | 10C USAA| MEMBER TRAVEL PRIVILEGES--> 
    <!--Module 6A | 9C | 10C  USAA| MEMBER TRAVEL PRIVILEGES--> 
    <!--Module 07--> 
    <meta class="mktoColor" id="Mod_07_Font_Color" mktoname="Font Color" default="#303030" mktomodulescope="true" /> 
    <!--Module 07--> 
    <!--Module 09, 09A, 10 and 10A--> 
    <meta class="mktoString" id="Mod_09_Text_1" mktoname="Phone No.Text" default="" mktomodulescope="true" /> 
    <meta class="mktoString" id="Mod_09_Text_1_Link" mktoname="Phone No. URL" default="" mktomodulescope="true" /> 
    <meta class="mktoString" id="Mod_09_Text_2" mktoname="My Acc. Link text" default="My Account" mktomodulescope="true" /> 
    <meta class="mktoString" id="Mod_09_Text_2_Link" mktoname="My Acc. Link text" default="" mktomodulescope="true" /> 
    <meta class="mktoColor" id="Mod_01_BG_Color" mktoname="Module Background Color" default="#ffffff" mktomodulescope="true" /> 
    <!--Section Top Bottom space--> 
    <meta class="mktoNumber" id="section_top_space_01" mktoname="Section Top Space" default="0" min="0" max="50" units="px" step="1" mktomodulescope="true" /> 
    <meta class="mktoNumber" id="section_bottom_space_01" mktoname="Section Bottom Space" default="0" min="0" max="50" units="px" step="1" mktomodulescope="true" /> 
    <style type="text/css">
.body { background-color: #ffffff !important; }
 @media only screen and (min-width: 481px) and (max-width: 599px) {
.em_main_table { width: 100% !important }
.em_wrapper { width: 100% !important }
.em_hide { display: none !important }
.em_full_img { width: 100% !important; height: auto !important; max-width: none !important }
.em_full_img01 { width: 100% !important; height: auto !important }
.em_full_img img { width: 100% !important; height: auto !important; max-width: none !important }
.em_center { text-align: center !important }
.em_left { text-align: left !important }
.em_aside8 { padding: 10px 5px!important; }
.em_h30 { height: 30px!important; }
.em_font_18 { font-size: 18px!important; line-height: 22px!important; }
.em_font_22 { font-size: 19px!important; line-height: 22px!important; }
.em_asideall10 { padding: 15px 10px!important; }
.em_w65 { width: 35px!important; padding-right: 5px!important; }
.em_defaultlink a { color: inherit; text-decoration: none; }
.em_main_table { width: 100%!important; }
.em_side14 { width: 14px !important }
.em_aside10 { padding: 0px 10px !important }
.em_side15 { width: 15px !important }
.em_aside14 { padding: 0px 14px !important }
.em_ptop { padding-top: 20px !important }
.em_pbottom { padding-bottom: 20px !important }
.em_p10 { padding: 10px !important }
.em_p15 { padding: 15px !important }
.em_plrb15 { padding: 0px 15px 15px 15px !important }
.em_h20 { height: 20px !important; font-size: 1px !important; line-height: 1px !important }
.em_h30 { height: 30px !important }
.em_bg_none { background-image: none !important }
.em_mob_block { display: block !important }
.em_hauto { height: auto !important }
.em_font_N { font-size: Npx }
.em_wN { width: Npx !important }
.em_clear { clear: both !important; width: 100% !important; display: block !important }
.em_pad_01 { padding: 8px 14px !important }
.em_plrtb_01 { padding: 20px 14px 20px 14px !important }
.em_plrtb_02 { padding: 20px 14px 10px 14px !important }
.em_bg { height: auto !important; }
.em_mog_bg01 { height: auto !important; background-position: center !important; background-size: cover !important }
.em_ptb { padding: 25px 0px 25px 0px !important }
.em_hide_desktop { display: table !important; float: none !important; width: 100% !important; overflow: visible !important; height: auto !important; }
.em_padtop10 { padding-top: 10px !important }
.em_wrapperA { width: 100% !important; height: auto !important; max-width: 360px !important }
.em_ptop0 { padding-top: 0px !important; }
.em_pad1 { padding: 11px 27px 11px 16px !important; }
/*New CSS START*/	
.em_font_16 { font-size: 16px !important; line-height: 18px !important; }
/*New CSS END*/	
}
 @media screen and (max-width: 480px) {
.em_main_table { width: 100% !important }
.em_wrapper { width: 100% !important }
.em_hide { display: none !important }
.em_full_img { width: 100% !important; height: auto !important; max-width: none !important }
.em_full_img01 { width: 100% !important; height: auto !important }
.em_full_img img { width: 100% !important; height: auto !important; max-width: none !important }
.em_center { text-align: center !important }
.em_left { text-align: left !important }
.em_aside8 { padding: 10px 5px!important; }
.em_h30 { height: 30px!important; }
.em_font_18 { font-size: 18px!important; line-height: 22px!important; }
.em_font_22 { font-size: 19px!important; line-height: 22px!important; }
.em_font_16 { font-size: 14px!important; line-height: 20px!important; }
.em_asideall10 { padding: 15px 10px!important; }
.em_defaultlink a { color: inherit; text-decoration: none; }
.em_w65 { width: 35px!important; padding-right: 5px!important; }
.em_side14 { width: 14px !important }
.em_aside10 { padding: 0px 10px !important }
.em_side15 { width: 15px !important }
.em_aside14 { padding: 0px 14px !important }
.em_ptop { padding-top: 20px !important }
.em_pbottom { padding-bottom: 20px !important }
.em_p10 { padding: 10px !important }
.em_p15 { padding: 15px !important }
.em_plrb15 { padding: 0px 15px 15px 15px !important }
.em_bg { height: auto !important; }
.em_h20 { height: 20px !important; font-size: 1px !important; line-height: 1px !important }
.em_h30 { height: 30px !important }
.em_bg_none { background-image: none !important }
.em_mob_block { display: block !important }
.em_hauto { height: auto !important }
.em_font_N { font-size: Npx }
.em_wN { width: Npx !important }
.em_clear { clear: both !important; width: 100% !important; display: block !important }
u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important }
.em_pad_01 { padding: 8px 14px !important }
.em_plrtb_01 { padding: 20px 14px 20px 14px !important }
.em_plrtb_02 { padding: 20px 14px 10px 14px !important }
.em_mog_bg01 { height: auto !important; background-position: center !important; background-size: cover !important }
.em_font24 { font-size: 24px !important }
.em_ptb { padding: 25px 0px 25px 0px !important }
.em_padtop10 { padding-top: 10px !important }
.em_hide_desktop { display: table !important; float: none !important; width: 100% !important; overflow: visible !important; height: auto !important; }
.em_wrapperA { width: 100% !important; height: auto !important; max-width: 360px !important }
/*New CSS START*/	
.em_font_16 { font-size: 14px !important; line-height: 18px !important; }
/*New CSS END*/	
.em_aside8 { padding: 10px 5px!important; }
.em_aside8 { padding: 10px 5px!important; }
.em_font_22 { font-size: 19px!important; line-height: 22px!important; }
.em_w65 { width: 35px!important; padding-right: 5px!important; }
.em_w651 { width: 40px!important; max-width: 40px!important; }
.em_ptop0 { padding-top: 0px !important; }
.em_pad1 { padding: 20px 15px !important; }
}
</style> 
  </head> 
  <body class="em_body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; margin:0px auto; padding:0px;" bgcolor="${Main_Brand_Color}"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mktoContainer em_full_wrap" id="Template" bgcolor="${Main_Brand_Color}" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; ">
      <tr class="mktoModule" mktoname="Module 10 | BofA Header Logo-1" id="Module_10_BofA_Header_Logob6f3523d-15fe-41d4-8716-548a31149937"> 
        <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:${section_top_space_01} 0px ${section_bottom_space_01} 0px;"> 
          <table align="center" width="600" border="0" cellspacing="0" cellpadding="0" class="em_main_table" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; width:600px; table-layout:fixed;" bgcolor="${Mod_01_BG_Color}"> 
            <tbody> 
              <tr> 
                <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:25px 22px 20px 22px; vertical-align: top" class="em_plrtb_01"> 
                  <table width="556" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; width:556px;" class="em_wrapper"> 
                    <tbody> 
                      <tr> 
                        <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding-bottom:22px;vertical-align: top"> 
                          <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; "> 
                            <tbody> 
                              <tr> 
                                <td valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; vertical-align: top"> 
                                  <table width="250" border="0" cellspacing="0" cellpadding="0" align="left" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; width:250px;" class="em_wrapper"> 
                                    <tbody> 
                                      <tr> 
                                        <td align="center" valign="top" class="em_pbottom" style="border-collapse: collapse; mso-line-height-rule: exactly; vertical-align: top"> <a href="${Mod_05_Image_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; text-decoration:none;"> <img src="http://promos.ovstravel.com/rs/512-JJP-615/images/BoA-VIP-Cruise-Collection-logo-hzs-250px.png" width="250" alt="${Mod_05_AltText_1}" style="border: 0 !important; outline: none !important; display:block;max-width:250px;font-family:Helvetica, Arial, sans-serif;font-size:15px;line-height:18px;color:#000000;" border="0" /> </a> </td> 
                                      </tr> 
                                    </tbody> 
                                  </table> 
                                  <table width="300" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px; width:300px;" class="em_wrapper"> 
                                    <tbody> 
                                      <tr> 
                                        <td align="right" valign="top" class="em_defaultlink em_center" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:'Helvetica', Arial, sans-serif;font-size:14px;line-height:18px;color:${Mod_06_Font_Color};font-weight:bold; vertical-align: top"> <a href="${Mod_09_Text_1_Link}" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; 
text-decoration: none; text-decoration:none;color:${Mod_06_Font_Color};"> <span style="color: #303030; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: bold; letter-spacing: normal; orphans: 2; text-align: -webkit-right; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">Contact Us |&nbsp;a number</span> </a> </td> 
                                      </tr> 
                                      <tr> 
                                        <td align="right" valign="top" class="em_defaultlink_und em_center" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:'Helvetica', Arial, sans-serif;font-size:14px;line-height:18px;color:${Mod_06_Font_Color}; vertical-align: top;"> <a href="${Mod_09_Text_2_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; 
text-decoration: underline; text-decoration:underline;color:${Mod_06_Font_Color};"> ${Mod_09_Text_2} </a> </td> 
                                      </tr> 
                                    </tbody> 
                                  </table> </td> 
                              </tr> 
                            </tbody> 
                          </table> </td> 
                      </tr> 
                    </tbody> 
                  </table> </td> 
              </tr> 
            </tbody> 
          </table> </td> 
      </tr>
    </table>  
  </body>
</html>

And then stripped the two <DIV> from around the contact us.

It seems to work well like that. You've got a reference to a color variable in the DIV, but you override it in the span anyway. If it is needed, move it to the span.

Cheers

Jo

G

Guitarrista82Author

New Participant

Hi Jo!

Thank you for your help 🙂.

It does look like the logo and Contact Us text are aligned at the top now 👍 however, the text is no longer editable in the Email Editor, which is something that is needed by our marketers as they are always updating that text for different promotions.

For comparison below is the updated code that you provided with neither the Contact Us or My Account editable:

And this is the original code with the editable text on the right:

Was the issue with having the text encased in the <div> tags or was it something else?

Appreciate your help!

LK

Jo_Pitts1

Community Manager

@guitarrista82 ,

You're welcome mate.

So, I gutted all the Database specific stuff from your code so I could actually get it to work in my instance of Marketo (i.e. all the {{lead.mycustomfield}} stuff). That might be part of it.

Also, there is a marketo class and name in your <DIV>, specifically:

mktoname="Phone text" class="mktoText"

Try moving that to the surrounding <TD> and see how you get on.

On that topic of (re)moving things.. it feels like that template has WAY more redundant tables than are needed even to cater to crazy formatting in dicey email clients. If I were you, I'd embark on a project to see how much of that can be gutted! I removed about half of module 10 with no issues.

AND...

On the naming of the modules.. WHY???? Talk about scary. That could be a second project!

OH...

And the variables.. if you are going to have all those module specific variables, then they should actually relate to that module. Module 10 (bletch... that name 😞 ) has references to variables from a variety of other modules. Stripping it back to something I could work with was an exercise in rapidly diminishing patience :). You could rationalise a LOT of that stuff.

That's my $0.02 🙂

Cheers

Jo

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded