Your Achievements
Level 1
0% to
Level 2
Next /
to gain points, level up, and earn exciting badges like the new Applaud 5 BadgeLearn more!
View All BadgesSign in to view all badges
Open Alert Bar
SOLVED

Need help modifying html table for new module

Go to solution
Guitarrista82
Level 6
Level 6
‎08-02-2021 04:32 PM
‎08-02-2021 04:32 PM

Hello Community,

 

I am creating a new module and am not great at modifying html tables.

 

I am basing the new module off of code from an existing module (Module 10C) that shows one version of the logo (vertical) when viewed in Desktop mode and another version of the logo (horizontal) when viewed in Mobile.

 

I am trying to accomplish two things: 

 

1. Make it so that the USAA Perks logo (vertical version) aligns vertically with the Member Travel Privileges logo

2. Make the logo larger (around 150 x 86)

 

Current:

Guitarrista82_0-1627945418912.png

 

Desired:

USAA Perks logo vertical.png

 

Module 10C code:

 

 

<tr class="mktoModule" mktoname="Module 10C | USAA Mobile Logo+Nav" id="Module_10B_Header_Mobile_Different_Logo31a9df63-3e8c-4726-a094-1816e43e11aa" mktoaddbydefault="false"> 
        <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:0px 20px 20px 20px;" class="em_plrtb_01"> 
                  <table width="560" border="0" cellspacing="0" cellpadding="0" style="width:560px;" class="em_wrapper"> 
                    <tbody> 
                      <tr> 
                        <td valign="top"> 
                          <table width="70" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper" style="width:70px;"> 
                            <tbody> 
                              <tr> 
                                <td align="center" valign="top" class="em_hide" style="border-collapse: collapse; mso-line-height-rule: exactly;"><a href="${Mod_USAA_Image_Link01}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img src="${Mod_USAA_Image01}" alt="${Mod_USAA_AltText_01}" width="70" height="115" style="display:block;" border="0" /></a></td> 
                              </tr> 
                              <!-- Mobile Show --> 
                              <!--[if !mso 9]><!--> 
                              <tr> 
                                <td height="0"> 
                                  <div class="em_hide_desktop" style="display:none;width:0;overflow:hidden;max-height:0!important"> 
                                    <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                      <tbody> 
                                        <tr> 
                                          <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly;"><a href="${Mod_USAA_Image_Link01}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img class="em_full_img01" src="${Mod_USAA_Image01_Mobile}" alt="${Mod_USAA_AltText_01}" width="300" height="36" style="display:block;" border="0" /></a></td> 
                                        </tr> 
                                      </tbody> 
                                    </table> 
                                  </div></td> 
                              </tr> 
                              <!--<![endif]--> 
                              <!-- //Mobile Show --> 
                            </tbody> 
                          </table> 
                          <!--[if gte mso 9]>
                           </td>
                           <td valign="top">
                              <![endif]--> 
                          <table width="490" border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper" style="width:490px;"> 
                            <tbody> 
                              <tr> 
                                <td valign="top"> 
                                  <table width="355" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper"> 
                                    <tbody> 
                                      <tr> 
                                        <td height="40" style="height:40px;" class="em_h30">&nbsp;</td> 
                                      </tr> 
                                      <tr> 
                                        <td> 
                                          <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                            <tbody> 
                                              <tr> 
                                                <td width="46" style="width:46px;" class="em_hide">&nbsp;</td> 
                                                <td align="center" class="em_defaultlink em_pbottom25" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding-bottom: 22px;"><a href="${Mod_USAA_Image_Link02}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img src="${Mod_USAA_Image02}" width="236" height="43" alt="${Mod_USAA_AltText_02}" style="display:block; max-width:236px;" border="0" /></a></td> 
                                              </tr> 
                                            </tbody> 
                                          </table></td> 
                                      </tr> 
                                      <tr> 
                                        <td align="center" valign="top"> 
                                          <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                            <tbody> 
                                              <tr> 
                                                <td width="46" style="width:46px;" class="em_hide">&nbsp;</td> 
                                                <td align="center" class="em_defaultlink" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:bold;color:${Mod_USAA_Font_Color};"><a href="${Mod_USAA_Text_1_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:${Mod_USAA_Font_Color};">${Mod_USAA_Text_1}</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="${Mod_USAA_Text_2_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; 
                                                               text-decoration: none; text-decoration:none;color:${Mod_USAA_Font_Color};">${Mod_USAA_Text_2}</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="${Mod_USAA_Text_3_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:${Mod_USAA_Font_Color};">${Mod_USAA_Text_3}</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="${Mod_USAA_Text_4_Link}" target="_blank" style="border-collapse: 
                                                               collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:${Mod_USAA_Font_Color};">${Mod_USAA_Text_4}</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="${Mod_USAA_Text_5_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; 
                                                               text-decoration:none;color:${Mod_USAA_Font_Color};">${Mod_USAA_Text_5}</a></td> 
                                              </tr> 
                                            </tbody> 
                                          </table></td> 
                                      </tr> 
                                    </tbody> 
                                  </table> 
                                  <!--[if gte mso 9]>
                                       </td>
                                       <td valign="top">
                                          <![endif]--> 
                                  <table width="135" border="0" cellspacing="0" cellpadding="0" style="width:135px;" class="em_wrapper" align="right"> 
                                    <tbody> 
                                      <tr> 
                                        <td align="left" valign="top"> 
                                          <table border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper"> 
                                            <tbody> 
                                              <tr> 
                                                <td height="40" style="height:40px;" class="em_h25">&nbsp;</td> 
                                              </tr> 
                                              <tr> 
                                                <td align="center" valign="top"> 
                                                  <table border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper"> 
                                                    <tbody> 
                                                      <tr> 
                                                        <td valign="top" align="center" style="border-collapse: collapse; mso-line-height-rule: exactly;"> 
                                                          <table width="100%" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px;" class="em_wrapper"> 
                                                            <tbody> 
                                                              <tr> 
                                                                <td width="27" style="width:27px;" class="em_hide">&nbsp;</td> 
                                                                <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:12px;line-height:18px;color:${Mod_07_Font_Color};font-weight:bold;"><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_07_Font_Color};">${Mod_09_Text_1}</a></td> 
                                                              </tr> 
                                                              <tr> 
                                                                <td width="27" style="width:27px;" class="em_hide">&nbsp;</td> 
                                                                <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:12px;line-height:18px;color:${Mod_07_Font_Color};"><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_07_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> 
                            </tbody> 
                          </table></td> 
                      </tr> 
                    </tbody> 
                  </table></td> 
              </tr> 
            </tbody> 
          </table></td> 
    </tr>

 

 

 

New Module 10D code:

 

 

<tr class="mktoModule" mktoname="Module 10D | USAA Perks Mobile Logo+Nav" id="Module_10B_Header_Mobile_Different_Logo31" mktoaddbydefault="false"> 
        <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:0px 20px 20px 20px;" class="em_plrtb_01"> 
                  <table width="560" border="0" cellspacing="0" cellpadding="0" style="width:560px;" class="em_wrapper"> 
                    <tbody> 
                      <tr> 
                        <td valign="top"> 
                          <table width="70" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper" style="width:70px;"> 
                            <tbody> 
                              <tr> 
                                <td align="center" valign="top" class="em_hide" style="border-collapse: collapse; mso-line-height-rule: exactly;"><a href="${Mod_USAA_Perks_Image_Link01}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img src="${Mod_USAA_Perks_Image01}" alt="${Mod_USAA_Perks_AltText_01}" width="70" height="40" style="display:block;" border="0" /></a></td> 
                              </tr> 
                              <!-- Mobile Show --> 
                              <!--[if !mso 9]><!--> 
                              <tr> 
                                <td height="0"> 
                                  <div class="em_hide_desktop" style="display:none;width:0;overflow:hidden;max-height:0!important"> 
                                    <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                      <tbody> 
                                        <tr> 
                                          <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly;"><a href="${Mod_USAA_Perks_Image_Link01}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img class="em_full_img01" src="${Mod_USAA_Perks_Image02_Mobile}" alt="${Mod_USAA_AltText_01}" width="300" height="36" style="display:block;" border="0" /></a></td> 
                                        </tr> 
                                      </tbody> 
                                    </table> 
                                  </div></td> 
                              </tr> 
                              <!--<![endif]--> 
                              <!-- //Mobile Show --> 
                            </tbody> 
                          </table> 
                          <!--[if gte mso 9]>
                           </td>
                           <td valign="top">
                              <![endif]--> 
                          <table width="490" border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper" style="width:490px;"> 
                            <tbody> 
                              <tr> 
                                <td valign="top"> 
                                  <table width="355" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper"> 
                                    <tbody> 
                                      <tr> 
                                        <td height="40" style="height:40px;" class="em_h30">&nbsp;</td> 
                                      </tr> 
                                      <tr> 
                                        <td> 
                                          <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                            <tbody> 
                                              <tr> 
                                                <td width="46" style="width:46px;" class="em_hide">&nbsp;</td> 
                                                <td align="center" class="em_defaultlink em_pbottom25" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding-bottom: 22px;"><a href="${Mod_USAA_Perks_Image_Link02}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img src="${Mod_USAA_Perks_Image02}" width="236" height="43" alt="${Mod_USAA_Perks_AltText_02}" style="display:block; max-width:236px;" border="0" /></a></td> 
                                              </tr> 
                                            </tbody> 
                                          </table></td> 
                                      </tr> 
                                      <tr> 
                                        <td align="center" valign="top"> 
                                          <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                            <tbody> 
                                              <tr> 
                                                <td width="46" style="width:46px;" class="em_hide">&nbsp;</td> 
                                                <td align="center" class="em_defaultlink" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:bold;color:${Mod_USAA_Perks_Font_Color};"><a href="${Mod_USAA_Perks_Text_1_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:${Mod_USAA_Perks_Font_Color};">${Mod_USAA_Perks_Text_1}</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="${Mod_USAA_Perks_Text_2_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; 
                                                               text-decoration: none; text-decoration:none;color:${Mod_USAA_Perks_Font_Color};">${Mod_USAA_Perks_Text_2}</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="${Mod_USAA_Perks_Text_3_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:${Mod_USAA_Perks_Font_Color};">${Mod_USAA_Perks_Text_3}</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="${Mod_USAA_Perks_Text_4_Link}" target="_blank" style="border-collapse: 
                                                               collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:${Mod_USAA_Perks_Font_Color};">${Mod_USAA_Perks_Text_4}</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="${Mod_USAA_Perks_Text_5_Link}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; 
                                                               text-decoration:none;color:${Mod_USAA_Perks_Font_Color};">${Mod_USAA_Perks_Text_5}</a></td> 
                                              </tr> 
                                            </tbody> 
                                          </table></td> 
                                      </tr> 
                                    </tbody> 
                                  </table> 
                                  <!--[if gte mso 9]>
                                       </td>
                                       <td valign="top">
                                          <![endif]--> 
                                  <table width="135" border="0" cellspacing="0" cellpadding="0" style="width:135px;" class="em_wrapper" align="right"> 
                                    <tbody> 
                                      <tr> 
                                        <td align="left" valign="top"> 
                                          <table border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper"> 
                                            <tbody> 
                                              <tr> 
                                                <td height="40" style="height:40px;" class="em_h25">&nbsp;</td> 
                                              </tr> 
                                              <tr> 
                                                <td align="center" valign="top"> 
                                                  <table border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper"> 
                                                    <tbody> 
                                                      <tr> 
                                                        <td valign="top" align="center" style="border-collapse: collapse; mso-line-height-rule: exactly;"> 
                                                          <table width="100%" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px;" class="em_wrapper"> 
                                                            <tbody> 
                                                              <tr> 
                                                                <td width="27" style="width:27px;" class="em_hide">&nbsp;</td> 
                                                                <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:12px;line-height:18px;color:${Mod_07_Font_Color};font-weight:bold;"><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_07_Font_Color};">${Mod_09_Text_1}</a></td> 
                                                              </tr> 
                                                              <tr> 
                                                                <td width="27" style="width:27px;" class="em_hide">&nbsp;</td> 
                                                                <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:12px;line-height:18px;color:${Mod_07_Font_Color};"><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_07_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> 
                            </tbody> 
                          </table></td> 
                      </tr> 
                    </tbody> 
                  </table></td> 
              </tr> 
            </tbody> 
          </table></td> 
    </tr>

 

 

 

Does anyone have any suggestions for achieving the design I'm looking for?

 

Thank you!

 

LK

0 Likes
9,470
Reply
3 ACCEPTED SOLUTIONS
Dave_Roberts
Level 10
Level 10
‎08-04-2021 05:03 AM
‎08-04-2021 05:03 AM

Thanks for sharing the preview link, I was able to load that up in the browser and tinker with the HTML a bit.

 

Here's a look at the updated HTML for that entire module:

<tr class="mktoModule" id="Module_10B_Header_Mobile_Different_Logo31b7761b7a-dee0-402d-8441-34cabbc815fb">
	<td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:0px 0px 0px 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="#ffffff">
		<tbody>
		<tr>
			<td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:0px 20px 20px 20px;" class="em_plrtb_01">
				<table width="560" border="0" cellspacing="0" cellpadding="0" style="width:560px;" class="em_wrapper">
				<tbody>
				<tr>
					<td valign="top">
						<!--[if gte mso 9]>
                           </td>
                           <td valign="top">
                              <![endif]-->
						<table width="560" border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper" style="width:560px;">
						<tbody>
						<tr>
							<td valign="middle" style=" vertical-align: middle; ">
								<table width="70" border="0" cellspacing="0" cellpadding="0" class="em_wrapper" style="width:70px;vertical-align: middle;" valign="middle" align="left">
								<tbody>
								<tr>
									<td height="40" style="height:40px;" class="em_h30">
										&nbsp;
									</td>
								</tr>
								<tr>
									<td align="center" valign="middle" class="em_hide" style="border-collapse: collapse; mso-line-height-rule: exactly;">
										<a href="http://ng.ovstravel.com/ol/h0FQccfGdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymVZNR6znxOgKUQxJP2O_Xy/jExQc83NL1lNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9f-X45jPO1q9q9is--O5ynyNm8qEgdZ89sULeB2Li6Z-jQeljR4q7lL-g5Kx5O0tn2MMjcHruPVS4UqSsXDtdxAOnoxZoYxZaExF7KMljg0eLgnRMZf89ZQ-BrBEP42cX8rtPjqivnyC3YlHrBQf6pxG5hhf4H4sH0yaqq4cq8ALyIwvE8L1lYWy1VsXL_VaAd8TIg3USG9BMau8WeKzJ0NvwzttxiRfQCRa-4uCFLxg6No88jtqvtbmzi960vEH1" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><span style="vertical-align: middle"><img src="https://promos.ovstravel.com/rs/512-JJP-615/images/USAAPerks_CoreBlue_Vertical.png" alt="FOR USAA MEMBERS | USAA" width="70" height="40" style="vertical-align:middle" border="0"></span></a>
									</td>
								</tr>
								<!-- Mobile Show -->
								<!--[if !mso 9]><!-->
								<tr>
									<td height="0">
										<div class="em_hide_desktop" style="display:none;width:0;overflow:hidden;max-height:0!important">
											<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0">
											<tbody>
											<tr>
												<td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly;">
													<a href="http://ng.ovstravel.com/ol/h0FQd8zNdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymVZNR6y31OgKUQxJP2O_Xy/jExQc83ILllNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9f-X45jPO1q9q9is--O5ynyNm8qEgdZ89sULeB2Li6Z-jQeljR4q7lL-g5Kx5O0tn2MMjcHruPVS4UqSsXDtdxAOnoxZoYxZaExF7KMljg0eLgnRMZf89ZQ-BrBEP42cX8rtPjqivnyC3YlHrBQf6pxG5hhf4H4sH0yaqq4cq8ALyIwvE8L1lYWy1VsXL_VaAd8TIg3USG9BMau8WeKzJ0NvwzttxiRfQCRa-4uCFLxg6No88jtqvtbmzi960vEH1" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img class="em_full_img01" src="https://promos.ovstravel.com/rs/512-JJP-615/images/USAAPerks_CoreBlue_Horizontal.png" alt="FOR USAA MEMBERS | USAA" width="300" height="36" style="display:block;" border="0"></a>
												</td>
											</tr>
											</tbody>
											</table>
										</div>
									</td>
								</tr>
								<!--<![endif]-->
								<!-- //Mobile Show -->
								</tbody>
								</table>
								<table width="355" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper">
								<tbody>
								<tr>
									<td height="40" style="height:40px;" class="em_h30">
										&nbsp;
									</td>
								</tr>
								<tr>
									<td>
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tbody>
										<tr>
											<td width="46" style="width:46px;" class="em_hide">
												&nbsp;
											</td>
											<td align="center" class="em_defaultlink em_pbottom25" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding-bottom: 22px;">
												<a href="http://ng.ovstravel.com/ol/h0FQccHPdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymVZNR6zX1OgKUQxJP2O_Xy/jExQc83OLllNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9f-X45jPO1q9q9is--O5ynyNm8qEgdZ89sULeB2Li6Z-jQeljR4q7lL-g5Kx5O0tn2MMjcHruPVS4UqSsXDtdxAOnoxZoYxZaExF7KMljg0eLgnRMZf89ZQ-BrBEP42cX8rtPjqivnyC3YlHrBQf6pxG5hhf4H4sH0yaqq4cq8ALyIwvE8L1lYWy1VsXL_VaAd8TIg3USG9BMau8WeKzJ0NvwzttxiRfQCRa-4uCFLxg6No88jtqvtbmzi960vEH1" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img src="https://iceovs.s3.amazonaws.com/SilverPop/Monks/MKG-8321/last_minute_deals/header_logo.png" width="236" height="43" alt="MEMBER TRAVEL PRIVILEGES" style="display:block; max-width:236px;" border="0"></a>
											</td>
										</tr>
										</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td align="center" valign="top">
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tbody>
										<tr>
											<td width="46" style="width:46px;" class="em_hide">
												&nbsp;
											</td>
											<td align="center" class="em_defaultlink" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:bold;color:#303030;">
												<a href="http://ng.ovstravel.com/ol/h0FQcsHJdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymWZdN0zH5OgKUQxJP2O_Xy/jE9RdMPPLVlNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9O6Ons2achP90-Hdgs68u2Ecpta0jdpIuo0LYD3-lp9mrFK4tE-Tgy6Sx5apyKV1m29Z1PS2AeQroScnOKHlZ_geJmnM5PCs1KzVXC-o8rRmB4CkPIb5fF3ft3igu1DQv1KVc4YD87H3JOSi-anCt_h2g3zC0Jopf7EC3gvMV9QHiElO80ttWcGSAKLvO-0CPSYbfr3IXYcl9Zew1IoC32ujt5YMSqAPeH0Gu4_SXHw5hK_01rtaMytSO8N6jmUzGh2Zm1ytlDikj1zWYZoq-RCYfxqzRtcWKqoLj2hgawD5xC3IoiDzceKQTgk7hOMqA1WehakSDrJyZij77fGg," target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Hotel</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://ng.ovstravel.com/ol/h0FTccXLdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymZZd50zXBOgKUQxJP2O_Xy/jEBRecPOI1lNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9O6Ons2achP90-Hdgs68u2Ecpta0jdpIuo0LYD3-lp9mrFK4tE-Tgy6Sx5apyKV1m29Z1PS2AeQroScnOKHl_9ASekyY3Iy99Mj9IDKkvnwDesH5Xde4ceSmwxXt2kjpwhP8AmIj1oXSfaXXvACn6_ELzml_0fNFRnXmZj-A06iGKHzfL5sNWQW6ULaaNgXqFZ7HsnQwlGfJ2UtYAPoWz5suJ_PgbrxPzJVbE5ae_ETomGqQ5g9ebmf7zsIyAu2zF3XRZ3SdADxhp7AvGLLy_OTd_wZ7VgfCM0YOJ9GdWyXZMKztUoGH6C8M_nRf-Dti6qXKtc2Kf_Ye_qgPcXXu7kD__sX3sR5o," target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Resort</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://ng.ovstravel.com/ol/h0FQdMbOdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymWZNJ7yHlOgKUQxJP2O_Xy/jE9QdczLKllNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9O6Ons2achP90-Hdgs68u2Ecpta0jdpIuo0LYD3-lp9mrFK4tE-Tgy6Sx5apyKV1m29Z1PS2AeQroScnOKHlS4waFhTB-MDZ-fT1fBO0rgC-MuSYIIr1bF3HjwW8iyX9626lU27bxtXLDMCm6a3Wu8k-mwBufPY4Jn1qmvsYM0Dr8BCC-rcJXZGSAL9CSvRm-eZ_bqVUHbdN8afg-Db6m7u2rlPVriSryPGmV_teVGB0-fr1bktmYib6GmIy8pEHxnURDin9TFxRvvBLdL6K_IXciyr6izOy4sqm1klta_FY2DjBLlArnEdgftErEDdiT-nK0SX-c1MS3ozb0WWG3" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Cruise</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://ng.ovstravel.com/ol/h0FQccTNdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymXbdVwzXtOgKUQxJP2O_Xy/jE5ZcsfOKFlNoVcspLPfYfi8xm6GOcn54uc7Sqa3i5R4mhwoKaqMaRG805USTcNjPq_dUFNISNYikV0AQabWJdcbvLYEUhr0G2Ko2-eZPtwYKvIwjZE0pO7miTFU8ZvBww2cUglNESA4P0DeOO9x33ukYcF6BEXEoyyac8RyzXxTw_5VhsLwO_Dlqib7sweSum7Idwgkv4fYuw3tV98pyodY5AdnvAd9O6Ons2achP90-Hdgs68u2Ecpta0jdpIuo0LYD3-lp9mrFK4tE-Tgy6Sx5apyKV1m29Z1PS2AeQroScnOKHlQ-AHKlzgoajZrKzJfG9Anlk3X6C0PJrpZH2a1lTl4ym4s0JdQ2tSq6X7BPC26bH_zqgSU3wCrdK82522-rs8L0AmHYy7ays5CcGPsH6HRk0GmVIT-mG4BesRlesgkDaWGmd_q6tsarQzVDGeQwvGDUwR0Ba8GtYGlqLS0vfyTo2H-gB5vtQRBfw5vtTn5T-6KKBcBp6aBru-515zo2WRO73w2Kg0ChW7JCJ4ho17GOfa61VG5TiOj2pu4jRTX" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Air</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://ng.ovstravel.com/ol/h0FRdcfNdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpymTZNZ3xXhOgKUQxJP2O_Xy/jEpQccDGK1lNoVcspLOONb6jmDrWbJmruqh0Bvn019g_y0xtPO_ANQ7oh-xFE80iZO6bXAUFGpRkxBpZGeGBdY9O6bNcBlHpVT7ygqTIUIRKLJNF7vI2rf70jlMknZuDn0yXB04DRU5lYFvPMe5w0Gi3Y9YuVBe47nTKaKkXuTEksK0v47H7L56AzlKB1GKL_WKAC15r9tWoyXOJOKFGvN83mFIyuHFxU-_Q6RzG-JshrycpuPQvuxZq565KEJFi9TusTCzJ693-f8F6GoamwfrCjaksVyoR3qkrTEHVe0HqFq_Vcy083yGIqWMSFyt6FzRMDMURuBm3kC5XVOEMSwiV" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Tour</a>
											</td>
										</tr>
										</tbody>
										</table>
									</td>
								</tr>
								</tbody>
								</table>
								<!--[if gte mso 9]>
                                       </td>
                                       <td valign="top">
                                          <![endif]-->
								<table width="135" border="0" cellspacing="0" cellpadding="0" style="width:135px;" class="em_wrapper" align="right">
								<tbody>
								<tr>
									<td align="left" valign="top">
										<table border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper">
										<tbody>
										<tr>
											<td height="40" style="height:40px;" class="em_h25">
												&nbsp;
											</td>
										</tr>
										<tr>
											<td align="center" valign="top">
												<table border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper">
												<tbody>
												<tr>
													<td valign="top" align="center" style="border-collapse: collapse; mso-line-height-rule: exactly;">
														<table width="100%" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px;" class="em_wrapper">
														<tbody>
														<tr>
															<td width="27" style="width:27px;" class="em_hide">
																&nbsp;
															</td>
															<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:12px;line-height:18px;color:#303030;font-weight:bold;">
																<a href="http://ng.ovstravel.com/ol/h0FRd8TMdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpyqXY9dzzn5OgKUQxJP2O_Xy/j05XcMTNLVlNoVcspLPfYfi8yW6GOcn46uc7Sqa2ipR4mh0mKaqMbBi0zpAESsl0JrzKWkRTRsQ6hk8NTrvTP9UXobMeXxjpHniq0_qcLNkXKvIwiJk6uevwjTtap9aWrUjDAhIgdFR1SDONQooD1G_KBKUCfiKht2qWO7gsijoctp4r46aTUZS8zVSz4xTnuxuBEltU5fu87lq9HtRyw-ELulB20GB-d_XexifP6LN3rxYS4bREmU13xs0mJfFcxkalWxPM4N3iFvFLD7-93czAuMJ_RTgnn7QqbWv7FnG6PafNdAF78x6ktw,," style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">1-866-691-5107</a>
															</td>
														</tr>
														<tr>
															<td width="27" style="width:27px;" class="em_hide">
																&nbsp;
															</td>
															<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:12px;line-height:18px;color:#303030;">
																<a href="http://ng.ovstravel.com/ol/h0FTcMzMdlhd6BInudazEv-8yniTLcH97fEwRKa0hp9sjAVuYOPLdQyi2YYASMNlNK-TEgUZF80xhghRHr3FOpNOp6UbDki2BTf-lbPbIYZHfLZy0M1B_rq30XYMq5OBnVGKHEYKHSQ_MFXIMetwwj7vNZMobBaKpyqYYN5yy3pOgKUQxJP2O_Xy/j0FUecXIKVlNoVcspLOONb6jmDrWbJmruqh0Bvn019g_y0xtPO_ANQ7tjd1UGpsmdqbBDAcdEZVz_wVcR7LAKtURq6IETUC_SGDxgazfUIRKLOYrjZE1qvj2nm0OvuKWnVeRJ3srWV1ZdC2oSu9yqQnSEbECeU6WrXX-OpExiBsrqogw7r6MdYWT6GXw1BPo4xOEHVBHw8Wd607xFMFckdIQ7XkUsFozVcXk6x_IkLoVgDJjxvgmlSxeovlKFO89zBa-cSCx_tbhaqVkTficoubN6tcPfwoGj5MrUVH7IGmeWoe7cyB82TI," target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: underline; text-decoration:underline;color:#303030;">My Account</a>
															</td>
														</tr>
														</tbody>
														</table>
													</td>
												</tr>
												</tbody>
												</table>
											</td>
										</tr>
										</tbody>
										</table>
									</td>
								</tr>
								</tbody>
								</table>
							</td>
						</tr>
						</tbody>
						</table>
					</td>
				</tr>
				</tbody>
				</table>
			</td>
		</tr>
		</tbody>
		</table>
	</td>
</tr>

 

Here's a few shots of what I'm seeing with this code in the browser:

desktopdesktop

 

mobilemobile

 

To get this into shape I needed to move the logo <td> into the same table with the rest of the content and then adjust the width of the table to include the logo (from 490px to 560px). I also added the "em_wrapper" class to the table, it looks like that's what's helping it stack up on mobile.

 

Let me know if you've got any questions here or if this is working out on your end as well? If not, feel free to post an updated preview link once you've got these changes in play and I'd be happy to see if there's anything else we can figure out together here.

 

Thanks,
Dave

View solution in original post

0 Likes
9,409
Reply
Dave_Roberts
Level 10
Level 10
‎08-10-2021 04:23 AM
‎08-10-2021 04:23 AM

Hey Laura,

 

I don't have access to test this out on Outlook so Im kinda shooting in the dark here, but it sounds like what's happening might have something to do with the MSO-conditional code you've got in between the tables. I noticed that the issue here has to do with the middle column (width 355px) and that that <table> was the only one that didn't have the MSO code to break it up into <td>s. As I understand it, Outlook doesn't like "touching tables" in the code and so you use those bits of code for Outlook only to add in some <td>s around the tables so they can act more like columns. 

 

Im not sure if this'll solve your problem all together but it might help get something moving here. Unfortunately, Im not able to view the code you linked to in drive and it's really hard to troubleshoot without being able to preview the email and also send it off to something like Litmus or Email on Acid for a render test.

 

I've added another line of MSO-only code here and added a few comments above/below the code so it's easy to identify. You can safely leave or remove those comments.

<tr class="mktoModule" id="Module_10B_Header_Mobile_Different_Logo31"> 
          <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:0px 0px 0px 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="#ffffff"> 
              <tbody> 
                <tr> 
                  <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding:0px 20px 20px 20px;" class="em_plrtb_01"> 
                    <table width="560" border="0" cellspacing="0" cellpadding="0" style="width:560px;" class="em_wrapper"> 
                      <tbody> 
                        <tr> 
                          <td valign="top"> 
                            <!--[if gte mso 9]>
                           </td>
<td valign="top">
                              <![endif]--> 
                            <table width="560" border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper" style="width:560px;"> 
                              <tbody> 
                                <tr> 
                                  <td valign="middle" style=" vertical-align: middle; "> 
                                    <table width="90" border="0" cellspacing="0" cellpadding="0" class="em_wrapper" style="width:90px;vertical-align: middle;" valign="middle" align="left"> 
                                      <tbody> 
                                        <tr> 
                                          <td height="52" style="height:52px;" class="em_h30">&nbsp; </td> 
                                        </tr> 
                                        <tr> 
                                          <td align="center" valign="middle" class="em_hide" style="border-collapse: collapse; mso-line-height-rule: exactly;"> <a href="http://{{Lead.Brand Website}}benefits/?member_id={{lead.members id}}&amp;name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><span style="vertical-align: middle"><img src="https://promos.ovstravel.com/rs/512-JJP-615/images/USAAPerks_CoreBlue_Vertical.png" alt="FOR USAA MEMBERS | USAA" width="90" height="52" style="vertical-align:middle" border="0"></span></a> </td> 
                                        </tr> 
                                        <!-- Mobile Show --> 
                                        <!--[if !mso 9]><!--> 
                                        <tr> 
                                          <td height="0"> 
                                            <div class="em_hide_desktop" style="display:none;width:0;overflow:hidden;max-height:0!important"> 
                                              <table align="center" width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                                <tbody> 
                                                  <tr> 
                                                    <td align="center" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly;"> <a href="http://{{Lead.Brand Website}}benefits/?member_id={{lead.members id}}&amp;name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img class="em_full_img01" src="https://promos.ovstravel.com/rs/512-JJP-615/images/USAAPerks_CoreBlue_Horizontal.png" alt="FOR USAA MEMBERS |  USAA" width="300" height="36" style="display:block;" border="0"></a> </td> 
                                                  </tr> 
                                                </tbody> 
                                              </table> 
                                            </div> </td> 
                                        </tr> 
                                        <!--<![endif]--> 
                                        <!-- //Mobile Show --> 
                                      </tbody> 
                                    </table> 
<!-- new code starts here ----------------------------------------------------------->
                                    <!--[if gte mso 9]>
                                       </td>
                                        <td valign="top">
                                          <![endif]--> 
<!-- new code ends here ------------------------------------------------------------>
                                    <table width="355" border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper"> 
                                      <tbody> 
                                        <tr> 
                                          <td height="40" style="height:40px;" class="em_h30">&nbsp; </td> 
                                        </tr> 
                                        <tr> 
                                          <td> 
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                              <tbody> 
                                                <tr> 
                                                  <td width="26" style="width:26px;" class="em_hide">&nbsp; </td> 
                                                  <td align="center" class="em_defaultlink em_pbottom25" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; padding-bottom: 22px;"> <a href="http://{{Lead.Brand Website}}benefits/?member_id={{lead.members id}}&amp;name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><img src="https://iceovs.s3.amazonaws.com/SilverPop/Monks/MKG-8321/last_minute_deals/header_logo.png" width="236" height="43" alt="MEMBER TRAVEL PRIVILEGES" style="display:block; max-width:236px;" border="0"></a> </td> 
                                                </tr> 
                                              </tbody> 
                                            </table> </td> 
                                        </tr> 
                                        <tr> 
                                          <td align="center" valign="top"> 
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                                              <tbody> 
                                                <tr> 
                                                  <td width="26" style="width:26px;" class="em_hide">&nbsp; </td> 
                                                  <td align="center" class="em_defaultlink" valign="top" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;font-weight:bold;color:#303030;"> <a href="http://{{Lead.GoTo URL}}Hotel&amp;member_id={{lead.members id}}&amp;name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Hotel</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://{{Lead.GoTo URL}}newresortstore&amp;member_id={{lead.members id}}&amp;name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Resort</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://{{Lead.GoTo URL}}Cruise&amp;member_id={{lead.members id}}&amp;name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Cruise</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://{{Lead.GoTo URL}}Air&amp;member_id={{lead.members id}}&amp;name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Air</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="http://{{lead.GoTo URL}}guidedvacations&amp;member_id={{lead.member id}}&amp;name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">Tour</a> </td> 
                                                </tr> 
                                              </tbody> 
                                            </table> </td> 
                                        </tr> 
                                      </tbody> 
                                    </table> 
                                    <!--[if gte mso 9]>
                                       </td>
                                        <td valign="top">
                                          <![endif]--> 
                                    <table width="115" border="0" cellspacing="0" cellpadding="0" style="width:115px;" class="em_wrapper" align="right"> 
                                      <tbody> 
                                        <tr> 
                                          <td align="left" valign="top"> 
                                            <table border="0" cellspacing="0" cellpadding="0" align="left" class="em_wrapper"> 
                                              <tbody> 
                                                <tr> 
                                                  <td height="40" style="height:40px;" class="em_h25">&nbsp; </td> 
                                                </tr> 
                                                <tr> 
                                                  <td align="center" valign="top"> 
                                                    <table border="0" cellspacing="0" cellpadding="0" align="right" class="em_wrapper"> 
                                                      <tbody> 
                                                        <tr> 
                                                          <td valign="top" align="center" style="border-collapse: collapse; mso-line-height-rule: exactly;"> 
                                                            <table width="100%" border="0" cellspacing="0" cellpadding="0" align="right" style="border-collapse: collapse; mso-table-lspace: 0px; mso-table-rspace: 0px;" class="em_wrapper"> 
                                                              <tbody> 
                                                                <tr> 
                                                                  <td width="27" style="width:27px;" class="em_hide">&nbsp; </td> 
                                                                  <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:12px;line-height:18px;color:#303030;font-weight:bold;"> <a href="{{Lead.Brand CallTo}}" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: none; text-decoration:none;color:#303030;">{{Lead.Brand Phone}}</a> </td> 
                                                                </tr> 
                                                                <tr> 
                                                                  <td width="27" style="width:27px;" class="em_hide">&nbsp; </td> 
                                                                  <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:12px;line-height:18px;color:#303030;"> <a href="http://{{lead.Brand Website}}benefits/?member_id={{lead.members id}}&amp;name_id={{lead.name id}}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly; color: inherit; text-decoration: underline; text-decoration:underline;color:#303030;">My Account</a> </td> 
                                                                </tr> 
                                                              </tbody> 
                                                            </table> </td> 
                                                        </tr> 
                                                      </tbody> 
                                                    </table> </td> 
                                                </tr> 
                                              </tbody> 
                                            </table> </td> 
                                        </tr> 
                                      </tbody> 
                                    </table> </td> 
                                </tr> 
                              </tbody> 
                            </table> </td> 
                        </tr> 
                      </tbody> 
                    </table> </td> 
                </tr> 
              </tbody> 
            </table> </td> 
        </tr>

 

Otherwise, the math on the tables seems to add up so that's not a reason that the tables would be breaking over into 2 rows -- maybe it could be something in the stylesheet in the <head>?

View solution in original post

0 Likes
9,294
Reply
Guitarrista82
Level 6
Level 6
‎08-16-2021 04:41 PM
‎08-16-2021 04:41 PM

UPDATE:

 

If anyone runs into issues similar to what I shared with regard to a nested table extending beyond the parent table, I was able to resolve the issue by adjusting the left and right padding of the nested table--the one that contains the two logos and phone number/My Account text.

 

I also discovered that the spacing issues around the center logo were occurring with nearly all of the 120 dpi versions of Microsoft Outlook.

 

I found some very helpful information in this article: https://litmus.com/community/discussions/151-mystery-solved-dpi-scaling-in-outlook-2007-2013 

 

Guitarrista82_0-1629156601030.png

 

After following the guidelines to add inline styles for table cell pixel width and also adding style="mso-cellspacing:0px;mso-padding-alt:0px 0px 0px 0px" to each of the tables, the spacing looks much better! 👍

 

Guitarrista82_3-1629157128136.png

 

 

Please Note: 

You do want to make sure that you've done the following, if this code is not already included in your html document:

 

Guitarrista82_0-1629222724722.png

 

Code:

<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/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

 

LK

 

 

View solution in original post

0 Likes
11,059
Reply
13 REPLIES 13
Home