Need help fixing email table for Outlook rendering

Guitarrista82
Level 4

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