cssoutlookhtml-emailoutlook-2013outlook-2011
mso-line-height and mso-text-raise not working in Outlook 2013?
I have a footer with 3 columns that are all strictly nested in a table-based layout for an HTML email template. I'm trying to fix the footer in which the line height for the third column does not match the top baseline of the first two.
I've been doing research to see if there was a fix for this and tried a variation of mso-line-height-rule:exactly; mso-text-raise:44px; to the last column where line-height is declared but it doesn't seem to be having any effect.
You can see in the image below, the text shifted down on the last column and text is spaced out a bit unlike the second image which renders in the email correctly.
Outlook 2013 (in Amazon Workspace - Windows 7 Pro):
Outlook 2011 for Mac:
Footer code:
<!-- Footer -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
<td align="center">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:650px; min-width:650px; font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="25" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- Column 1 -->
<th class="column-top" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="150">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="img" style="font-size:0pt; line-height:0pt; text-align:left"><image src="https://www.designevo.com/res/templates/thumb_small/black-and-yellow-basketball.png" border="0" width="120" height="120" alt="Healthy Moms. Strong Babies." /></div></td>
</tr>
</table>
</th>
<!-- END Column 1 -->
<!-- Column -->
<th class="column" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="20"><div style="font-size:0pt; line-height:0pt;" class="mobile-br-20"></div></th>
<!-- END Column -->
<!-- Column 2 -->
<th class="column-top" style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="150">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!-- Button -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="blue" style="border-radius: 0;">
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="18"></td>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<div class="text-button" style="color:#ffffff; font-family:Arial,sans-serif; font-size:19px; line-height:18px; text-align:center; text-transform:uppercase">
<a href="#" target="_blank" class="link-white" style="color:#ffffff; text-decoration:none"><span class="link-white" style="color:#ffffff; text-decoration:none; font-weight:bolder;">BUTTON</span></a>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
</td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="18"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END Button -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="10" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<div class="text-col-2" style="color:#0F1934; font-family:Arial,sans-serif; font-size:14px; line-height:24px; text-transform:capitalize; font-weight: bolder; text-align:left;">
<span class="purple-text">Connect With Us</span>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="5" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
<!-- Social Icons -->
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="" width="23" height="23"/></a></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="#" width="23" height="23"/></a></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="25"><a href="#" target="_blank"><img alt="#" src="#" width="21" height="23"></a></td>
<td class="img" style="font-size:0pt; line-height:0pt; text-align:left" width="27"><a href="#" target="_blank"><img alt="#" src="#" width="23" height="23"></a></td>
</tr>
</table>
<!-- END Social Icons -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
<!-- END Column 2 -->
<!-- Column -->
<th class="column" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; padding:0; margin:0; font-weight:normal; Margin:0" width="20"><div style="font-size:0pt; line-height:0pt;" class="mobile-br-20"></div></th>
<!-- END Column -->
<!-- Column 3 -->
<th class="column-top" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; padding:0; margin:0; font-weight:normal; vertical-align:top; Margin:0" width="400">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div class="text-col-3 copyright-text" style="color:#0F1934; font-family:Arial,sans-serif; font-size:14px; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:24px; text-align:left;">
<span style="font-size:14px; color:#787985; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:15px;">The Company, 1234 Main Street
<br/>
Suite 9999, Los Angeles, CA 10001</span>
<br/>
<br/>
<span style="font-size:12px; color:#787985; mso-line-height-rule:exactly; mso-text-raise:44px; line-height:17px;">&copy; 2019 The Company
<br/>
All Rights Reserved
<br/>
<a href="#" target="_blank" style="color:#787985;">Terms, Privacy & Notices</a></span>
</div>
</td>
</tr>
</table>
</th>
<!-- END Column 3 -->
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="spacer" style="font-size:0pt; mso-line-height-rule:exactly; line-height:0pt; text-align:center; width:100%; min-width:100%"><tr><td height="50" class="spacer" style="font-size:0pt; line-height:0pt; text-align:center; width:100%; min-width:100%"> </td></tr></table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td class="content-spacing" style="font-size:0pt; line-height:0pt; text-align:left" width="1"></td>
</tr>
</table>
<!-- END Footer -->
Solution
Outlook support for div is spotty.
Remove the div and move the style sheet to the parent td. Use line-height instead, so it works for all email clients.
Remove span and use p instead.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-col-3 copyright-text" style="color: #0F1934; font-family: Arial,sans-serif; font-size: 14px; line-height: 15px; text-align: left;">
<p>The Company, 1234 Main Street
<br />
Suite 9999, Los Angeles, CA 10001</p>
<p>&copy; 2019 The Company
<br />
All Rights Reserved
<br />
<a href="#" target="_blank" style="color: #787985;">Terms, Privacy & Notices</a></p>
</td>
</tr>
</table>
Good luck.
- Counting pulses using a swiss flow meter with an Arduino, how is it done?
- How to create a folder in C (need to run on both Linux and Windows)
- Is there any way to compute the width of an integer type at compile-time?
- What kind of implementation can I use for a static associative array on a vintage system with very limited resources?
- How can I initialize all members of an array to the same value?
- How to perform addition of two vectors of 8-bit integers with a single addition in C/C++
- Is C notably faster than C++
- How to get the Windows SDK version number a program is compiling with at compile time
- Confused by difference between expression inside if and expression outside if
- Equivalent of atoi for unsigned integers
- k&r: Exercise 1-18. Program takes input but doesnt produce any output?
- Using in C thrd_sleep() to either wait for time or interrupt by signal. Example?
- How to get the sign, mantissa and exponent of a floating point number
- How can I compute `exp(x)/2` when `x` is large?
- c programming: answer always equates to 0
- Is it possible to access a parameter of a function from another function in C?
- Will this expression evaluate to true or false (1 or 0) in C?
- What Is the Return Value of strcspn() When Str1 Does not Contain Str2?
- Mapping a numeric range onto another
- Signalled and non-signalled state of event
- Why is faster to do a branch than a lookup?
- Avoid security.ArrayBound warning when using container_of
- Forcing 64-bit long doubles?
- "error: redeclaration of 'myVariable' with no linkage:" - what's the linkage?
- Branchlessly map one list of integers to another
- SQLBindCol for long integer value on 64Bit platform?
- What's wrong with my code? CS50 Pset2: Readability
- Is there a way to redirect stdout/stderr to a string?
- Playing with gcc's intermediate GIMPLE format
- Viewing data in a circular buffer in real-time