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

Re: Need help fixing email table for Outlook rendering

Guitarrista82
Level 6
Level 6
‎08-09-2021 10:17 AM
‎08-09-2021 10:17 AM

Need help fixing email table for Outlook rendering

Hi Community,

 

I am working on creating a new module for our master email template.

 

With some help, I have been able to create a framework but for some reason, the middle logo is getting pushed down when viewed in Desktop Outlook (2016) and other Desktop clients like Lotus.

 

The table appears okay in other email clients.

 

Desktop 2016 Outlook for Microsoft 365 MSO (16.0.14131.20278) 

Guitarrista82_0-1628528300124.png

 

Outlook 2016 Web Version:

 

Guitarrista82_1-1628528495524.png

 

Gmail:

 

Guitarrista82_3-1628528573201.png

 

Yahoo:

 

Guitarrista82_2-1628528523658.png

 

Does anyone have an idea of how I can resolve this issue? Do I need to add a special tag specifically for formatting in Outlook desktop? If so what would that be?

 

Please see module code here (as it appears in the template):

 

<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: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="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="${Mod_USAA_Perks_Image_Link01}" target="_blank" style="border-collapse: collapse; mso-line-height-rule: exactly;"><span style="vertical-align: middle"><img src="${Mod_USAA_Perks_Image01}" 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="${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="220" height="26" style="display:block;" border="0"></a>
												</td>
											</tr>
											</tbody>
											</table>
										</div>
									</td>
								</tr>
								<!--<![endif]-->
								<!-- //Mobile Show -->
								</tbody>
								</table>
								<table width="345" 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="16" style="width:16px;" 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="226" height="41" alt="${Mod_USAA_Perks_AltText_02}" style="display:block; max-width:226px;" border="0"></a>
										</tr>
										</tbody>
										</table>
									</td>
								</tr>
								<tr>
									<td align="center" valign="top">
										<table width="100%" border="0" cellspacing="0" cellpadding="0">
										<tbody>
										<tr>
											<td width="16" style="width:16px;" 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="125" border="0" cellspacing="0" cellpadding="0" style="width:125px;" 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="22" style="width:22px;" 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="22" style="width:22px;" 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>

 

 

 

 

Module code from using inspect element on template:

 

 

<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="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://{{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="220" height="26" style="display:block;" border="0"></a> </td> 
                                                  </tr> 
                                                </tbody> 
                                              </table> 
                                            </div> </td> 
                                        </tr> 
                                        <!--<![endif]--> 
                                        <!-- //Mobile Show --> 
                                      </tbody> 
                                    </table> 
                                    <table width="345" 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="16" style="width:16px;" 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="226" height="41" alt="MEMBER TRAVEL PRIVILEGES" style="display:block; max-width:226px;" 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="16" style="width:16px;" 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="125" border="0" cellspacing="0" cellpadding="0" style="width:125px;" 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="22" style="width:22px;" 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="22" style="width:22px;" 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>

 

 

 

I'm also noticing a lot of space appearing between the center logo and the content in the far right in some of the Outlook versions.

 

So, I think the alignment between the left logo and the center logo and the right content and the center logo might be off.

 

Guitarrista82_0-1628530122826.png

 

 

Thank you,

 

LK

 

 

0 Likes
950
Reply
1 REPLY 1
Robert_Stanley
Level 3
Level 3
‎08-25-2022 07:36 AM
‎08-25-2022 07:36 AM

Re: Need help fixing email table for Outlook rendering

Hello Guitarrista82 - did you ever find a solution for this?  Seeing a similar issues with one of our new email templates but can't figure it out. 

0 Likes
619
Reply
Home