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)
Outlook 2016 Web Version:
Gmail:
Yahoo:
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">
</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">
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="16" style="width:16px;" class="em_hide">
</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">
</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> | <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> | <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> | <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> | <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">
</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">
</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">
</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"> </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}}&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}}&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"> </td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="16" style="width:16px;" class="em_hide"> </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}}&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"> </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&member_id={{lead.members id}}&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> | <a href="http://{{Lead.GoTo URL}}newresortstore&member_id={{lead.members id}}&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> | <a href="http://{{Lead.GoTo URL}}Cruise&member_id={{lead.members id}}&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> | <a href="http://{{Lead.GoTo URL}}Air&member_id={{lead.members id}}&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> | <a href="http://{{lead.GoTo URL}}guidedvacations&member_id={{lead.member id}}&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"> </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"> </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"> </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}}&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.
Thank you,
LK
.png)