I've been having an issue with how outlook has been displaying table HTML for a while now, and I have not been able to resolve this issue for the life of me. Basically, there's a line that cuts through the containing <td> when nesting tables (see the slight gray line in the attached image to the right of the purple <td>).
This is on email's code I've been working with as an example.
<style type="text/css">
#media only screen and (max-width:480px){
.templateColumns{
width: 100% !important;
}
.body-text {
font-size: 16px !important;
}
.body-about-us {
font-size: 15px !important;
}
.center-align {
text-align: center !important;
}
.column-image {
height:auto !important;
max-width:480px !important;
width: 100% !important;
}
.column-container {
display: block !important;
width: 100% !important;
}
.sociologos-container {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
padding-top: 15px !important;
padding-bottom: 5px !important;
}
.mopad-left {
padding-left: 15px !important;
}
.mopad-right {
padding-right: 15px !important;
}
.mopad-top {
padding-top: 15px !important;
}
.mopad-bottom {
padding-bottom: 15px !important;
}
.mopad-button-bottom {
padding-bottom: 30px !important;
}
.nopad-bottom {
padding-bottom: 0 !important;
}
.nopad-top {
padding-top: 0 !important;
}
.nopad-left {
padding-left: 0 !important;
}
.nopad-right {
padding-right: 0 !important;
}
.modisplay-none {
display: none !important;
}
.mainbtn {
max-width: 450px !important;
width: 100% !important;
margin-top: 10px !important;
}
.mainbtn a{
display:block !important;
}
.mobold {
font-weight: bold !important;
}
.heading {
font-size: 32px !important;
line-height: 36px !important;
}
.heading2 {
font-size: 24px !important;
line-height: 28px !important;
}
.heading3 {
font-size: 20px !important;
line-height: 20px !important;
}
.sociologos {
width: 32px !important;
height: 32px !important;
}
.join-us {
text-align: center !important;
}
}
p {margin-bottom: 25px;
margin-top:10px;}
</style>
<body vlink="#421b3e" style="margin:0; padding: 0; background-color:#f2f2f2;"><!--this sets the visited link color, a background color and eliminates any potential auto padding on the page-->
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" id="bodytable" style="background-color:#f2f2f2; font-family: Arial, Helvetica, sans-serif;">
<tr>
<td align="center" valign="top" style="padding-top:0px;">
<table border="0" cellpadding="0" cellspacing="0" width="580" class="templateColumns mopad-bottom nopad-top mopad-left mopad-right" style=" background-color: #f2f2f2; padding-top: 0; padding-bottom: 25px; margin:0;">
<!-- start PURPLE HEADER -->
<tr>
<td width="100%" align="center" valign="top" class="templateColumns mopad-left mopad-right mopad-top mopad-bottom" id="logo" style="margin:0; background-color: #f2f2f2; padding-top: 20px; padding-bottom: 20px;">
LOREM IPSUM
</td>
</tr>
<!-- end PURPLE HEADER -->
<!-- start INTRO SECTION -->
<tr>
<td align="center" valign="top" class="templateColumns" width="100%" style="background-color: #ffffff; padding: margin:0;"><img class="column-image" src="http://go.advicentsolutions.com/rs/841-KAP-325/images/FosteringGrowth2016TitleBanner.png" alt="Nurturing Growth" width="580" style="display:block;" /></td>
</tr>
<!-- end INTRO SECTION -->
<!-- start FIRST CONTENT SECTION -->
<tr>
<td width="100%" class="mopad-left mopad-right mkteditable" id="primary-content" style="background-color: #ffffff; font-family: Arial, sans-serif; padding-top:15px; padding-bottom:30px; padding-left:40px; padding-right:40px;">
<!--<h3 class="body-text mopad-right mopad-left" style="font-family: Arial, sans-serif; font-size: 17px; color: #3c3d42; letter-spacing: -.25px; line-height: 1.5em; font-weight: bold; margin:0; padding: 0 0 5px 0; ">Did you know?</h3>-->
<p class="heading2" style="text-align:center; font-size: 28px; color: #3c3d42; line-height: 30px;">lorem ipsum</p>
<p class="margin" style="text-align:center; font-family: Arial, sans-serif; font-size: 16px; color: #727577; line-height: 22px; font-weight: 400; ">lorem ipsum</p>
<table align="center" cellpadding="0" cellspacing="0" width="60%" style="background-color:#6a3757; border-radius: 2px; font-family: Arial, sans-serif; padding:2px; margin: auto;">
<tr>
<td align="center" style="font-family: Arial, sans-serif; color: #ffffff; border-radius: 4px; background-color: #6a3757; padding-top: 10px; padding-bottom: 10px;"><strong>lorem ipsum</strong></td>
</tr>
</table>
</td>
</tr>
<!-- end MAIN CTA BUTTON -->
<!-- start SOCIAL MEDIA SECTION -->
<tr>
<td width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="social-media" style="font-family: Arial, Helvetica, sans-serif; background-color: #f2f2f2; padding-left: 5px; padding-right: 5px; padding-bottom: 10px; padding-top: 10px; margin:0; ">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="middle" class="column-container join-us" width="50%" style="font-family: Arial, sans-serif; font-size: 14px; color: #3c3d42; ">
Join the Community!
</td>
<td aLOREM IPSUM class="column-container" width="50%">
<table cellpadding="0" class="sociologos-container" cellspacing="0" style="font-family: Arial, sans-serif;">
<tr>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/google_42.png" width="32" height="32" alt="Google Plus" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;">><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/twitter_42.png" width="32" height="32" alt="Twitter" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/facebook_42.png" width="32" height="32" alt="Facebook" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" style="display: block; padding-left: 5px;" class="sociologos" src="http://www.advicentsolutions.com/images/email/linked_42.png" width="32" height="32" alt="LinkedIn" /></td>
<td align="left" class="sociologos" valign="top" style="padding-left: 5px;"><img border="0" class="sociologos" style="display: block; padding-left:5px;" src="http://www.advicentsolutions.com/images/email/youtube_42.png" width="32" height="32" alt="Youtube Channel" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- end SOCIAL MEDIA SECTION -->
<!-- start DISCLAIMER -->
<tr>
<td align="left" valign="top" width="100%" class="templateColumns mopad-bottom mopad-top mopad-left mopad-right" id="disclaimer" style="color:#727577; font-size: 12px; font-family: Arial, Helvetica, sans-serif; padding-left: 5px; padding-right:5px; padding-top:10px; margin:0;">
LOREM ISPUM
</td>
</tr>
<!-- end DISCLAIMER -->
</table>
</td>
</tr>
</table>
</body>
It displays fine as HTML, but I send mostly B2B stuff which means we're always trying to optimize for office. Sometimes the sizing of the banner image can affect it, but other than that one factor, when this happens seems completely arbitrary. It's the one Outlook workaround I haven't been able to figure out. Is there something in my code I'm missing?
Finnnaaalllly found the solution about ten min after posting this. Trick was to remove the padding inline css that was tied to the Lorem ipsum text within the table in the code.
I also fixed this in other instances where <p> tags applied to links in the tds also caused issue. Removing the <p> tags around the links within the table and any padding accompanying it fixes the issue.
Related
html siganture keeps cutting off
I have 0 html experience but can edit code if its straightforward enough.
The top of my logo/social media icons keeps cutting off on outlook. They don't cut off when I open the email in a browser or through a mobile device. Is there a way to edit the code so that it doesn't cut off? I tried adding padding to the top but it doesn't work. Please help.
Code
<table width="335" cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td style="padding-top: 0; padding-bottom: 0; padding-left: 0px; padding-right: 0;"> <table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;"> <tr> <td colspan="2" style="padding-bottom: 2px; color: #515151; font-size: 15px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b>Ryan Milliman </b> </td> </tr> <tr> <td colspan="2" style="padding-bottom: 6px; color: #515151; font-size: 14px; font-family: Arial, Helvetica, sans-serif;line-height:15px;"> <b> <small style="color:#515151;" >Director of Investor Relations</small></b> </td> </tr> <tr> <td colspan="2" style="color: #333333; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;line-height:0px;"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >O:</b> (800) 735- 9973 </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">M:</b> (760) 793- 2933 </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;" >W:</b> www.primior.com </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:4px;line-height:15px;"> <b style="color:#9d1924;">E:</b> ryan.milliman#primior.com </td> </tr> <tr> <td colspan="2" style="color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:6px;"> <b style="color:#9d1924;">A:</b> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/border.png" width="333" height="3" alt="" /> </td> </tr> <tr> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px; padding-top:7px;line-height:15px;"> <a href="http://www.primior.com"> <img src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/logo.png" width="155" height="20" alt="" /> </td> <td valign="top" style="vertical-align: top; color: #384241; font-size: 11px; font-family: Arial, Helvetica, sans-serif;padding-bottom:7px;padding-top:7px;line-height:15px;text-align:right;"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/fb.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/tw.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/lin.png"> <img width="20" height="20" style="border: none; width: 20px; max-width: 20px !important; height: 20px; max-height: 20px !important;vertical-align:middle;" src="https://res.cloudinary.com/riya1/image/upload/v1563430617/SIN311/ins.png"> </td> </tr> </table> </td> </tr> </table>
Outlook sometimes ignores the width/height of an element.
Try adding width and height to your td where the Image is located.
I'm new in coding HTML and CSS, I designed an email template in XD and code 95% of it but I can't figure out how to code the header and bring it to the back and overlay part of it with another white table.
Another question, how can I make the button smaller like the preview?
Here's the preview of the header of my design : https://imgur.com/zEcEeng
Here's what I code so far :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Financing Senior Housing Since 1992 | LTC Properties Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
/* Google font import Lato */
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
/* Outlook link fix */
#outlook a {
padding: 0;
}
/* Hotmail background & line height fixes */
.ExternalClass {
width: 100% !important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
/* Image borders & formatting */
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
/* Re-style iPhone automatic links (eg. phone numbers) */
.appleLinksGrey a {
color: #575F65 !important;
text-decoration: none !important;
}
/* Hotmail symbol fix for mobile devices */
.ExternalClass img[class^=Emoji] {
width: 10px !important;
height: 10px !important;
display: inline !important;
}
/* Button hover colour change */
.CTA:hover {
background-color: #0162B2 !important;
}
#media screen and (max-width:640px) {
.mobilefullwidth {
width: 100% !important;
height: auto !important;
}
.logo {
padding-left: 30px !important;
padding-right: 30px !important;
}
.h1 {
font-size: 24px !important;
line-height: 30px !important;
padding-right: 30px !important;
padding-left: 30px !important;
padding-top: 20px !important;
}
.h2 {
font-size: 20px !important;
line-height: 0px !important;
padding-right: 30px !important;
padding-left: 30px !important;
}
.p {
font-size: 14px !important;
line-height: 20px !important;
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 0px !important;
}
.p-b {
font-size: 14px !important;
line-height: 20px !important;
padding-left: 20px !important;
padding-right: 0px !important;
padding-top: 10px !important;
}
.CTA_wrap {
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 0px !important;
}
.CTA_wrap2 {
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 25px !important;
}
.unsubscribe {
padding-left: 30px !important;
padding-right: 30px !important;
}
.us-img {
padding-left: 30px !important;
padding-right: 30px !important;
}
.footer {
font-size: 11px !important;
line-height: 16px !important;
padding-right: 30px !important;
padding-left: 30px !important;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; background-color:#EEEEEE; font-family: 'Open Sans', sans-serif; font-size:14px; line-height:20px; color:#575F65">
<!-- // FULL EMAIL -->
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- // LEFT SPACER CELL *** MUST HAVE A BACKGROUND COLOUR -->
<td bgcolor="#EEEEEE" style="font-size:0px"></td>
<!-- LEFT SPACER CELL // -->
<!-- // MAIN CONTENT CELL -->
<td align="center" width="600" bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<!-- LOGO -->
<tr>
<td class="logo" align="center" bgcolor="#223663" style="padding-top: 30px;padding-bottom: 29px;">
<img src="https://www.dropbox.com/s/8060fh3df/123.png?raw=1" width="98" height="60" alt="TP logo">
</td>
</tr>
<!-- HERO CONTENT -->
<tr>
<td class="h1" align="left" bgcolor="#ffffff" style=" padding-left: 60px; padding-right: 60px; padding-top: 30px;padding-bottom: 0px; font-size:26px; line-height: 30px; font-weight: 700; color: #444A4E;">
Need Financing? We’ve got it.
</tr>
<tr>
<td class="p" align="left" bgcolor="#ffffff" style=" padding-left: 60px; padding-right: 60px; padding-top: 15px;padding-bottom: 15px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
Challenging times demand adaptive measures. While many capital providers are slowing or completely halting investments, LTC remains open for business. We're constantly thinking outside of the REIT box to provide creative financing solutions.<br/><br/>Of course, we continue to offer our core NNN and JV structures. </span><span style="font-style:normal;font-weight:bold;">But, did you know we also offer a variety of structured finance products?</span><span> These solutions provide a range of levers LTC can pull to help finance projects.
</tr>
<!-- CALL TO ACTION -->
<tr>
<td class="CTA_wrap" bgcolor="#FFFFFF" align="left" style="padding-top:15px; padding-bottom: 0px; padding-right: 60px; padding-left: 60px;">
<table border="0" cellspacing="0" cellpadding="0" align="left">
<!-- // BUTTON -->
<tr>
<td class="CTA" align="left" style="position: left; border-radius: 0px; padding-top: 15px; padding-right: 25px; padding-bottom: 15px; padding-left: 25px;" bgcolor="#0071CE">Contact Us!
</td>
</tr>
<!-- LINE -->
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 30px;padding-bottom: 25px;">
<img src="https://www.dropbox.com/s/q4va5ixmmu3ako5/line-e.png?raw=1" width="480" height="1">
</td>
<!-- BENEFITS OF STRUCTURED FINANCE -->
<tr>
<table>
<tbody>
<tr>
<td align="left" bgcolor="#FFFFFF" style="padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; font-size: 18px; line-height: 30px; font-weight: 700; text-align: left; color: #444A4E;">
<img align="left" src="https://www.dropbox.com/s/v3jmuxhagx0b509/title_shape_e.png?raw=1" width="18" height="31"> BENEFITS OF STRUCTURED FINANCE:
</td>
</tr>
</tbody>
<table>
<tr>
<td class="p-b" align="left" bgcolor="#FFFFFF" style=" padding-left: 20px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
<span style="font-size: 11px;">◆</span> Provide liquidity through releasing “trapped” equity in properties<br>
<span style="font-size: 11px;">◆</span> Bridge maturing loans while waiting for the market to return<br> to normal<br>
<span style="font-size: 11px;">◆</span> Fund construction for shovel-ready projects<br>
<span style="font-size: 11px;">◆</span> Fund existing projects where other investors have backed away<br>
<span style="font-size: 11px;">◆</span> Provide an exit plan for equity investors who may have their own<br>
liquidity needs<br></span>
</tr>
<!-- LINE -->
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 25px;padding-bottom: 20px;">
<img src="https://www.dropbox.com/s/q4va5ixmmu3ako5/line-e.png?raw=1" width="480" height="1">
</td>
<!-- PODUCTS INCLUDE -->
<tr>
<table>
<tbody>
<td align="left" bgcolor="#FFFFFF" style="padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; font-size: 18px; line-height: 30px; font-weight: 700; text-align: left; color: #444A4E;">
<img align="left" src="https://www.dropbox.com/s/v3jmuxhagx0b509/title_shape_e.png?raw=1" width="18" height="31"> PRODUCTS INCLUDE:
</td>
</tbody>
</tr>
<tr>
<td class="p-b" align="left" bgcolor="#FFFFFF" style=" padding-left: 20px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
<span style="font-size: 11px;">◆</span> Mezzanine <span style="font-size: 11px;">◆</span> Preferred Equity<br>
<span style="font-size: 11px;">◆</span> Bridge <span style="font-size: 11px;">◆</span> Construction Financing<br>
<span style="font-size: 11px;">◆</span> Unitranche Financing<br>
</tr>
<!-- LINE -->
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 20px;padding-bottom: 20px;">
<img src="https://www.dropbox.com/s/q4va5ixmmu3ako5/line-e.png?raw=1" width="480" height="1">
</td>
<!-- DEAL PARAMETERS -->
<tr>
<table>
<tbody>
<td align="left" bgcolor="#FFFFFF" style="padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; font-size: 18px; line-height: 30px; font-weight: 700; text-align: left; color: #444A4E;">
<img align="left" src="https://www.dropbox.com/s/v3jmuxhagx0b509/title_shape_e.png?raw=1" width="18" height="31"> DEAL PARAMETERS:
</td>
</tbody>
</tr>
<tr>
<td class="p-b" align="left" bgcolor="#FFFFFF" style=" padding-left: 20px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
</span><span style="font-style:normal;font-weight:bold;">Transaction Size:</span><span><br>$1 million - $100 million<br><br>
</span><span style="font-style:normal;font-weight:bold;">Property Types:</span><span><br>Independent Living, Assisted Living, Memory Care, Skilled Nursing<br><br>
</span><span style="font-style:normal;font-weight:bold;">Locations:</span><span><br>Contiguous USA<br><br>
</span><span style="font-style:normal;font-weight:bold;">Financing Types:</span><span><br>NNN, JV, Mezzanine, Bridge, Construction, Unitranche, Preferred Equity<br><br>
</span><span style="font-style:normal;font-weight:bold;">Operators:</span><span><br>Regional, growth-oriented<br>
</tr>
<!-- LINE -->
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 20px;padding-bottom: 20px;">
<img src="https://www.dropbox.com/s/q4va5ixmmu3ako5/line-e.png?raw=1" width="480" height="1">
</td>
<!-- ABOUT LTC -->
<tr>
<table>
<tbody>
<td align="left" bgcolor="#FFFFFF" style="padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; font-size: 18px; line-height: 30px; font-weight: 700; text-align: left; color: #444A4E;">
<img align="left" src="https://www.dropbox.com/s/v3jmuxhagx0b509/title_shape_e.png?raw=1" width="18" height="31"> ABOUT LTC:
</td>
</tbody>
</tr>
<tr>
<td class="p-b" align="center" bgcolor="#FFFFFF" style="align-items: center; padding-left: 20px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
</span><span style="font-style:normal;font-weight:bold;">180+ Investments | 27 States | 30 Operating Partners</span><span>
</tr>
<tr>
<td class=us-imga lign="center" bgcolor="#ffffff" style="padding-top: 0px;padding-bottom: 20px;">
<img src="https://wwcom/file.cfm/1/docs/map_home_033120.jpg" width="460" height="285">
</td>
<tr>
<td class="p-b" align="left" bgcolor="#FFFFFF" style=" padding-left: 0px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
Shared success is based on partnership and alignment. Our business is
about much more than real estate. It is about the operators who run
the communities and the residents who call our buildings home.<br>
<br>
We focus on building strong, long-term relationships and work to align
interests ensuring that all businesses are supported to create the best
outcomes for all.
</tr>
<!-- CALL TO ACTION -->
<tr>
<td class="CTA_wrap2" bgcolor="#FFFFFF" align="center" style="padding-top:20px; padding-bottom: 25px; padding-right: 0px; padding-left: 0px;">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<!-- // BUTTON 2 -->
<tr>
<td class="CTA" align="center" style="position: center; border-radius: 0px; padding-top: 15px; padding-right: 25px; padding-bottom: 15px; padding-left: 25px;" bgcolor="#0071CE">Contact Us Today
</td>
</tr>
</tbody>
</table>
</td>
<!-- // RIGHT SPACER CELL *** MUST HAVE A BACKGROUND COLOUR -->
<td bgcolor="#ffffff" style="font-size:0px"></td>
<!-- RIGHT SPACER CELL // -->
</tr>
</table>
<tr>
<!-- // SOCIAL MEDIA -->
<td class="footer" align="center" bgcolor="#EEEEEE" style=" padding-top: 25px; padding-bottom: 20px; font-size: 12px; line-height: 18px; font-weight: 400; text-align: center; color: #575F65;">
<img src="https://www.dropbox.com/s/0k25a3lkki3pbip/linkedin_e.png?raw=1" width="19" height="18" style="padding-right: 8px" "padding-bottom: 10px"><a href="http://twitter.com" target="_blank"><img src="https://www.dropbox.com/s/1lnq77di7mue1zs/twitter_e.png?raw=1" width="22" height="18" style="padding-right: 8px"><a href="https://www.facebook.com/" target="_blank"><img src="https://www.dropbox.com/s/as39vdrbwtpvvp7/facebook_e.png?raw=1" width="18" height="18" style="padding-right: 7px"><a style=" padding-bottom: 20px" href="https://www.instagram.com" target="_blank"><img src="https://www.dropbox.com/s/c5clso0ov6qw97g/instagram_e.png?raw=1" width="18" height="18" style="padding-right: 7px"></a><br>
<!-- // FOOTER -->
© 2020 , Inc<br>
<a class="appleLinksGrey" style="color: #575F65; " href="https://www..com">www.website.com</a> | 1-8655<br>
e, CA 91361<br>
</td>
</tr>
<!-- FULL EMAIL // -->
</body>
</html>
I don't think it is possible to overlay different table rows over each other (someone correct me if i'm wrong) so I instead moved your top header containing the logo into a seperate div outside of the table and applied a negative margin to the table itself:
<div class="logo" align="center" style="background-color:#223663; padding-top:
30px;padding-bottom: 29px; height:125px;">
<a href="https://www.123.com" target="_blank"><img
src="https://www.dropbox.com/s/8060fh3df/123.png?raw=1" width="98" height="200" alt="TP
logo"> </a>
and
<table width="100%" style="margin-top:-50px" border="0" cellspacing="0"
cellpadding="0">
To make the button as small as the text and not the entire width you can set 'display: inline' to the element containing it:
<tr style="display:inline">
I wouldn't advise making this entire page as a table but if you have no choice but to stick to it, here is the full code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Financing Senior Housing Since 1992 | LTC Properties Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="x-apple-disable-message-reformatting" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css">
/* Google font import Lato */
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
/* Outlook link fix */
#outlook a {
padding: 0;
}
/* Hotmail background & line height fixes */
.ExternalClass {
width: 100% !important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
/* Image borders & formatting */
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
/* Re-style iPhone automatic links (eg. phone numbers) */
.appleLinksGrey a {
color: #575F65 !important;
text-decoration: none !important;
}
/* Hotmail symbol fix for mobile devices */
.ExternalClass img[class^=Emoji] {
width: 10px !important;
height: 10px !important;
display: inline !important;
}
/* Button hover colour change */
.CTA:hover {
background-color: #0162B2 !important;
}
#media screen and (max-width:640px) {
.mobilefullwidth {
width: 100% !important;
height: auto !important;
}
.logo {
padding-left: 30px !important;
padding-right: 30px !important;
}
.h1 {
font-size: 24px !important;
line-height: 30px !important;
padding-right: 30px !important;
padding-left: 30px !important;
padding-top: 20px !important;
}
.h2 {
font-size: 20px !important;
line-height: 0px !important;
padding-right: 30px !important;
padding-left: 30px !important;
}
.p {
font-size: 14px !important;
line-height: 20px !important;
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 0px !important;
}
.p-b {
font-size: 14px !important;
line-height: 20px !important;
padding-left: 20px !important;
padding-right: 0px !important;
padding-top: 10px !important;
}
.CTA_wrap {
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 0px !important;
}
.CTA_wrap2 {
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 25px !important;
}
.unsubscribe {
padding-left: 30px !important;
padding-right: 30px !important;
}
.us-img {
padding-left: 30px !important;
padding-right: 30px !important;
}
.footer {
font-size: 11px !important;
line-height: 16px !important;
padding-right: 30px !important;
padding-left: 30px !important;
}
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="padding:0; margin:0; -webkit-text-size-adjust:none; -ms-text-size-adjust:100%; background-color:#EEEEEE; font-family: 'Open Sans', sans-serif; font-size:14px; line-height:20px; color:#575F65">
<div class="logo" align="center" style="background-color:#223663; padding-top: 30px;padding-bottom: 29px; height:125px;">
<img src="https://www.dropbox.com/s/8060fh3df/123.png?raw=1" width="98" height="200" alt="TP logo">
</div>
<!-- // FULL EMAIL -->
<table align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<!-- // LEFT SPACER CELL *** MUST HAVE A BACKGROUND COLOUR -->
<td bgcolor="#EEEEEE" style="font-size:0px"></td>
<!-- LEFT SPACER CELL // -->
<!-- // MAIN CONTENT CELL -->
<td align="center" width="600" bgcolor="#FFFFFF">
<table width="100%" style="margin-top:-50px" border="0" cellspacing="0" cellpadding="0">
<tbody>
<!-- LOGO -->
<tr>
</tr>
<!-- HERO CONTENT -->
<tr>
<td class="h1" align="left" bgcolor="#ffffff" style=" padding-left: 60px; padding-right: 60px; padding-top: 30px;padding-bottom: 0px; font-size:26px; line-height: 30px; font-weight: 700; color: #444A4E;">
Need Financing? We’ve got it.
</tr>
<tr>
<td class="p" align="left" bgcolor="#ffffff" style=" padding-left: 60px; padding-right: 60px; padding-top: 15px;padding-bottom: 15px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
Challenging times demand adaptive measures. While many capital providers are slowing or completely halting investments, LTC remains open for business. We're constantly thinking outside of the REIT box to provide creative financing solutions.<br/><br/>Of course, we continue to offer our core NNN and JV structures. </span><span style="font-style:normal;font-weight:bold;">But, did you know we also offer a variety of structured finance products?</span><span> These solutions provide a range of levers LTC can pull to help finance projects.
</tr>
<!-- CALL TO ACTION -->
<tr>
<td class="CTA_wrap" bgcolor="#FFFFFF" align="left" style="padding-top:15px; padding-bottom: 0px; padding-right: 60px; padding-left: 60px;">
<table border="0" cellspacing="0" cellpadding="0" align="left">
<!-- // BUTTON -->
<tr style="display:inline">
<td class="CTA" align="left" style="position: left; border-radius: 0px; padding-top: 15px; padding-right: 25px; padding-bottom: 15px; padding-left: 25px;" bgcolor="#0071CE">Contact Us!
</td>
</tr>
<!-- LINE -->
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 30px;padding-bottom: 25px;">
<img src="https://www.dropbox.com/s/q4va5ixmmu3ako5/line-e.png?raw=1" width="480" height="1">
</td>
<!-- BENEFITS OF STRUCTURED FINANCE -->
<tr>
<table>
<tbody>
<tr>
<td align="left" bgcolor="#FFFFFF" style="padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; font-size: 18px; line-height: 30px; font-weight: 700; text-align: left; color: #444A4E;">
<img align="left" src="https://www.dropbox.com/s/v3jmuxhagx0b509/title_shape_e.png?raw=1" width="18" height="31"> BENEFITS OF STRUCTURED FINANCE:
</td>
</tr>
</tbody>
<table>
<tr>
<td class="p-b" align="left" bgcolor="#FFFFFF" style=" padding-left: 20px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
<span style="font-size: 11px;">◆</span> Provide liquidity through releasing “trapped” equity in properties<br>
<span style="font-size: 11px;">◆</span> Bridge maturing loans while waiting for the market to return<br> to normal<br>
<span style="font-size: 11px;">◆</span> Fund construction for shovel-ready projects<br>
<span style="font-size: 11px;">◆</span> Fund existing projects where other investors have backed away<br>
<span style="font-size: 11px;">◆</span> Provide an exit plan for equity investors who may have their own<br>
liquidity needs<br></span>
</tr>
<!-- LINE -->
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 25px;padding-bottom: 20px;">
<img src="https://www.dropbox.com/s/q4va5ixmmu3ako5/line-e.png?raw=1" width="480" height="1">
</td>
<!-- PODUCTS INCLUDE -->
<tr>
<table>
<tbody>
<td align="left" bgcolor="#FFFFFF" style="padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; font-size: 18px; line-height: 30px; font-weight: 700; text-align: left; color: #444A4E;">
<img align="left" src="https://www.dropbox.com/s/v3jmuxhagx0b509/title_shape_e.png?raw=1" width="18" height="31"> PRODUCTS INCLUDE:
</td>
</tbody>
</tr>
<tr>
<td class="p-b" align="left" bgcolor="#FFFFFF" style=" padding-left: 20px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
<span style="font-size: 11px;">◆</span> Mezzanine <span style="font-size: 11px;">◆</span> Preferred Equity<br>
<span style="font-size: 11px;">◆</span> Bridge <span style="font-size: 11px;">◆</span> Construction Financing<br>
<span style="font-size: 11px;">◆</span> Unitranche Financing<br>
</tr>
<!-- LINE -->
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 20px;padding-bottom: 20px;">
<img src="https://www.dropbox.com/s/q4va5ixmmu3ako5/line-e.png?raw=1" width="480" height="1">
</td>
<!-- DEAL PARAMETERS -->
<tr>
<table>
<tbody>
<td align="left" bgcolor="#FFFFFF" style="padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; font-size: 18px; line-height: 30px; font-weight: 700; text-align: left; color: #444A4E;">
<img align="left" src="https://www.dropbox.com/s/v3jmuxhagx0b509/title_shape_e.png?raw=1" width="18" height="31"> DEAL PARAMETERS:
</td>
</tbody>
</tr>
<tr>
<td class="p-b" align="left" bgcolor="#FFFFFF" style=" padding-left: 20px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
</span><span style="font-style:normal;font-weight:bold;">Transaction Size:</span><span><br>$1 million - $100 million<br><br>
</span><span style="font-style:normal;font-weight:bold;">Property Types:</span><span><br>Independent Living, Assisted Living, Memory Care, Skilled Nursing<br><br>
</span><span style="font-style:normal;font-weight:bold;">Locations:</span><span><br>Contiguous USA<br><br>
</span><span style="font-style:normal;font-weight:bold;">Financing Types:</span><span><br>NNN, JV, Mezzanine, Bridge, Construction, Unitranche, Preferred Equity<br><br>
</span><span style="font-style:normal;font-weight:bold;">Operators:</span><span><br>Regional, growth-oriented<br>
</tr>
<!-- LINE -->
<tr>
<td align="center" bgcolor="#ffffff" style="padding-top: 20px;padding-bottom: 20px;">
<img src="https://www.dropbox.com/s/q4va5ixmmu3ako5/line-e.png?raw=1" width="480" height="1">
</td>
<!-- ABOUT LTC -->
<tr>
<table>
<tbody>
<td align="left" bgcolor="#FFFFFF" style="padding-top: 0px; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; font-size: 18px; line-height: 30px; font-weight: 700; text-align: left; color: #444A4E;">
<img align="left" src="https://www.dropbox.com/s/v3jmuxhagx0b509/title_shape_e.png?raw=1" width="18" height="31"> ABOUT LTC:
</td>
</tbody>
</tr>
<tr>
<td class="p-b" align="center" bgcolor="#FFFFFF" style="align-items: center; padding-left: 20px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
</span><span style="font-style:normal;font-weight:bold;">180+ Investments | 27 States | 30 Operating Partners</span><span>
</tr>
<tr>
<td class=us-imga lign="center" bgcolor="#ffffff" style="padding-top: 0px;padding-bottom: 20px;">
<img src="https://wwcom/file.cfm/1/docs/map_home_033120.jpg" width="460" height="285">
</td>
<tr>
<td class="p-b" align="left" bgcolor="#FFFFFF" style=" padding-left: 0px; padding-right: 0px; padding-top: 0px;padding-bottom: 5px; font-size:14px; line-height: 20px; font-weight: 400; color: #575F65;">
Shared success is based on partnership and alignment. Our business is
about much more than real estate. It is about the operators who run
the communities and the residents who call our buildings home.<br>
<br>
We focus on building strong, long-term relationships and work to align
interests ensuring that all businesses are supported to create the best
outcomes for all.
</tr>
<!-- CALL TO ACTION -->
<tr>
<td class="CTA_wrap2" bgcolor="#FFFFFF" align="center" style="padding-top:20px; padding-bottom: 25px; padding-right: 0px; padding-left: 0px;">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<!-- // BUTTON 2 -->
<tr>
<td class="CTA" align="center" style="position: center; border-radius: 0px; padding-top: 15px; padding-right: 25px; padding-bottom: 15px; padding-left: 25px;" bgcolor="#0071CE">Contact Us Today
</td>
</tr>
</tbody>
</table>
</td>
<!-- // RIGHT SPACER CELL *** MUST HAVE A BACKGROUND COLOUR -->
<td bgcolor="#ffffff" style="font-size:0px"></td>
<!-- RIGHT SPACER CELL // -->
</tr>
</table>
<tr>
<!-- // SOCIAL MEDIA -->
<td class="footer" align="center" bgcolor="#EEEEEE" style=" padding-top: 25px; padding-bottom: 20px; font-size: 12px; line-height: 18px; font-weight: 400; text-align: center; color: #575F65;">
<img src="https://www.dropbox.com/s/0k25a3lkki3pbip/linkedin_e.png?raw=1" width="19" height="18" style="padding-right: 8px" "padding-bottom: 10px"><a href="http://twitter.com" target="_blank"><img src="https://www.dropbox.com/s/1lnq77di7mue1zs/twitter_e.png?raw=1" width="22" height="18" style="padding-right: 8px"><a href="https://www.facebook.com/" target="_blank"><img src="https://www.dropbox.com/s/as39vdrbwtpvvp7/facebook_e.png?raw=1" width="18" height="18" style="padding-right: 7px"><a style=" padding-bottom: 20px" href="https://www.instagram.com" target="_blank"><img src="https://www.dropbox.com/s/c5clso0ov6qw97g/instagram_e.png?raw=1" width="18" height="18" style="padding-right: 7px"></a><br>
<!-- // FOOTER -->
© 2020 , Inc<br>
<a class="appleLinksGrey" style="color: #575F65; " href="https://www..com">www.website.com</a> | 1-8655<br>
e, CA 91361<br>
</td>
</tr>
<!-- FULL EMAIL // -->
</body>
</html>
On a typical HTML webpage, this would be very easy. For email, not so much.
I'm sure you're all familiar with the challenges of getting email clients to render things consistently. It basically throws divs out the window.
I'm concerned with the About, Practice Areas, etc. links..
Here's what I'd like to achieve
That's how it renders in a web browser, which is perfect.
But this is what I get in Outlook 2010.
My problem is.. I need to use text-align:center on the parent element to center everything. But in Outlook 2010, it stacks the children elements vertically instead of lining up in one row.
When I change it so I have just links inside the table (as opposed to nesting tables), I lose all padding on the links.
No padding on links..
Is there any way to do this?
<!DOCTYPE HTML>
<html>
<HEAD>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta charset="utf-8">
<title>|Jan '18|</title>
<style type="text/css">
#media(max-width: 500px) {
.frame {
width: 97% !important;
}
.fullIMG {
width: 100% !important;
}
#contentGrid {
padding: 10px 20px !important;
}
}
</style>
</head>
<BODY>
<!-- Beginning of white background table -->
<table align="center" cellspacing="0" cellpadding="0" border="0" style="width: 550px; background-color: white; border-left:1px solid black; border-right:1px solid black; opacity:.95" class="frame">
<tr>
<td>
<!-- Pre-Header -->
<tr>
<td style="text-align:center; padding: 0px 20px;">
<p style="font-family: Arial, Helvetica, sans-serif; line-height: 20px"><i>We have collected <strong>MORE THAN $1 BILLION</strong> for thousands of clients.</i></p>
</td>
</tr>
<!-- End of Pre-Header -->
<!-- Header Row -->
<tr>
<td>
<!-- Header Table -->
<table align="center" style="padding: 10px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.hupy.com/" target="_blank">
<img alt="Voted Best, Rated Vest" style="width: 90%; height: auto; " src="https://image.ibb.co/nai2NG/logo_tight.jpg"/>
</a>
</td>
</tr>
</table>
<!-- End of Header Table -->
</td>
</tr>
<!-- End of Header Row -->
<!-- Homebase Links Row -->
<tr>
<td>
<hr align="center" style="width:90%;">
<!-- Homebase Links Table -->
<table align="center">
<tr>
<td>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/aboutus.cfm"><strong>About</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px;text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/practice_areas/"><strong>Practice Areas</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/library/"><strong>Legal Info</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/case-results.cfm"><strong>Results</strong></a>
</td>
</tr>
</table>
<table align="left" style="padding: 10px;">
<tr>
<td>
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/contact.cfm"><strong>Contacts</strong></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Homebase Links Table -->
</td>
</tr>
<!-- End of Homebase Row -->
<!-- Snipppet Row -->
<tr>
<td style="padding: 0px 20px" align="center">
<h2 style="font-family: Helvetica; font-size: 25px; text-align:left;">CASE RESULT: $1.5 Million for Rider Struck by Inattentive Driver</h2>
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm" target="blank">
<img class="fullIMG" src="https://image.ibb.co/eNfVbb/1_5mill.jpg" alt="$1.5 Million" style="width: 100%; height: auto; box-shadow: 3px 3px 5px rgba(165,42,42,.7)">
</a>
<p style="font-family: Helvetica; font-size: 16px; line-height: 24px; text-align:left;">In July 2017, our client and his wife were on a casual motorcycle ride in Waukesha County when the driver of a minivan failed to see their motorcycle and turned left in front of them. A terrible crash occurred and both occupants of the motorcycle were ejected. Find out what happened when Hupy and Abraham fought the insurance company to get a $1.5 million settlement.</p>
</td>
</tr>
<tr>
<td>
Click me
</td>
</tr>
<!-- End of Snippet Row -->
<!-- Facebook Fans Row -->
<tr>
<td>
<!-- Facebook Fans Table -->
<table align="center" style="padding: 20px 20px 0px 20px;">
<tr>
<td align="center">
<a href="https://www.facebook.com/HupyandAbraham/">
<img src="https://preview.ibb.co/e6mYUw/18000fans_tight.jpg" alt="18000fans" style="width: 85%; height: auto;">
</a>
</td>
</tr>
</table>
<!-- End of Facebook Fans Table -->
</td>
</tr>
<!-- End of Facebook Fans Row -->
<!-- Social Links Row -->
<tr>
<td>
<!-- Social Links Table -->
<table align="center" cellspacing="5" cellpadding="5" border="0">
<tr align="center">
<td align="center">
<a href="https://twitter.com/HupyandAbraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #1DA1F2);" alt="Twitter link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-twitter-96.png">
</a>
<a href="https://www.youtube.com/user/hupyandabrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #ff0000);" alt="YouTube link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-youtube-96.png">
</a>
<a href="http://instagram.com/hupyandabraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #C32AA3);" alt="Instagram link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-instagram-96.png">
</a>
</td>
</tr>
<tr align="center">
<td>
<a href="https://www.pinterest.com/hupyandabraham/" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #BD081C);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-pinterest-96.png">
</a>
<a href="https://www.linkedin.com/company/hupy-&-abraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #007BB5);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-linkedin-96.png">
</a>
<a href="https://plus.google.com/+HupyandAbrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #DB4437);" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-googleplus-96.png">
</a>
</td>
</tr>
</table>
<!-- End of Social Links Table -->
</td>
</tr>
<!-- End Social Links Row -->
</td>
</tr>
</table>
<!-- End of white background table -->
</BODY>
</html>
Okay so here is a revised HTML email template.
First - you have to do a few things. Outlook is super secondary, but unfortunately people still use it. It's horrible.
So you account for that in quite a few ways - in the code and within the header. Luckily your email isn't TOO tricky, so there wasn't any real call for !mso in the body of the email.
Secondly - try to make your emails ALSO responsive. Remember that 75% of ALL email is read on a phone. Your email looked like a bit of a mashup. Not in a bad way.
The header links were lining all straight down on Outlook because you had EACH ONE in it's own table. Outlook interpreted that to be tables (obviously) and made each one 100% of the email width. If you place the links inside a table and then each one inside a <td> you will get better results.
lastly, there are some interesting shading things going on your email that may or may NOT work in all email clients. I left them but I'd be surprised if they did.
I'd say that you can probably take this code and place it into almost any ESP and it should work. You have to always be mindful of who you are coding emails for, and keep that in mind when it comes to how you design.
Good luck! There's lots more so if you have a question, go ahead and ask.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="date=no"/>
<meta name="format-detection" content="telephone=no"/>
<!--[if !mso]><!-- -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<title>Royal Caribbean - Advantage Program</title>
<style type="text/css">
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
u + #body a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
#outlook a{
padding:0;
}
.ReadMsgBody{
width:100%;
}
body{
width:100% !important;
min-width:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
-webkit-font-smoothing: antialiased;
}
v*{
behavior:url(#default#VML);
display:inline-block;
}
.ExternalClass{
width:100%;
}
td{
border-collapse: separate !important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div{
line-height:100%;
}
a img{
border:none;
}
a {
text-decoration:none !important;
}
img{
display:block;
outline:none;
text-decoration:none;
border:none;
-ms-interpolation-mode: bicubic;
}
table{
border-spacing:0;
border-collapse:separate;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
table[class=full] {
width: 100%;
clear: both;
}
div {
padding: 0;
margin: 0;
}
p{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
h1{
margin:0;
padding:0;
border:0;
font-size:100%;
line-height:1.4em;
font-family: Helvetica, Arial, sans-serif;
}
#wrappertable{
margin:0;
padding:0;
width:100% !important;
line-height:100% !important;
}
br[class=show]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
#media screen and (max-width:600px){
table{
width:100% !important;
}
table[class=content]{
width:95% !important;
}
td[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
td[class=fullwidth]{
width:100% !important;
float:left !important;
}
/*replace image with mobile version*/
td#pic1 img{
content:url("") !important;
}
/*repeat ID as necessary*/
img[class=fullwidth]{
width:100% !important;
height:auto !important;
}
img[class=threequarters]{
float: none !important;
width: 75% !important;
height: auto !important;
margin: auto !important;
}
img[class=twothirds]{
float: none !important;
width: 66.6666% !important;
height: auto !important;
margin: auto !important;
}
img[class=halfwidth]{
float: none !important;
width: 50% !important;
height: auto !important;
margin: auto !important;
}
img[class=onethird]{
width: 33.3333% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=quarterwidth]{
width: 25% !important;
height: auto !important;
margin: auto !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
img[class=hide]{
display: none !important;
max-height: 0px !important;
font-size: 0px !important;
overflow: hidden !important;
mso-hide: all !important;
width: 0 !important;
}
div[class=fullwidth]{
max-width: 95% !important;
}
p,h1,h2[class=centered]{
text-align: center !important;
}
br[class=show]{
display: inline !important;
}
br[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
span[class=hide]{
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
</style>
</head>
<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" offset="0" bgcolor="#eeeeee" style="padding: 0 !important; margin:0 !important;">
<center>
<table width="100%" style="border-collapse:collapse; table-layout:fixed;" border="0" cellspacing="0" cellpadding="0" id="wrappertable">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" width="620" bgcolor="#f9f9f9" style="box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.10);">
<tr>
<td width="618" align="center">
<!--THIS IS THE CONTENT TABLE-->
<table cellpadding="0" cellspacing="0" border="0" width="600">
<tr>
<td align="center">
<p style="font-family: Arial, Helvetica, sans-serif; line-height: 20px"><i>We have collected <strong>MORE THAN $1 BILLION</strong> for thousands of clients.</i></p>
</td>
</tr>
<!--use empty rows for spacing-->
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<img src="https://image.ibb.co/nai2NG/logo_tight.jpg" alt="Voted Best, Rated Vest" width="580" height="150" class="fullwidth"/>
</td>
</tr>
<tr>
<td align="center" height="40" style="line-height: 40px;">
<hr align="center" width="80%" size="1" noshade="noshade"/>
</td>
</tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" class="content" width="95%">
<tr>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/aboutus.cfm"><strong>About</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px;text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/practice_areas/"><strong>Practice Areas</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/library/"><strong>Legal Info</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/case-results.cfm"><strong>Results</strong></a>
</td>
<td class="fullwidth" align="center">
<a style="text-decoration: none; color: black; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 30px; text-shadow: 1px 1px 3px rgba(165,42,42,.7);" href="https://www.hupy.com/contact.cfm"><strong>Contacts</strong></a>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0" class="content" width="95%">
<tr>
<td align="center">
<h2 style="font-family: Helvetica; font-size: 25px; text-align:left; line-height: 32px;">CASE RESULT: $1.5 Million for Rider Struck by Inattentive Driver</h2>
</td>
</tr>
<tr><td height="10" style="line-height: 10px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<a href="https://www.hupy.com/case_results/-1-5-million-for-rider-struck-by-inattentive-driver.cfm" target="blank">
<img src="https://image.ibb.co/eNfVbb/1_5mill.jpg" alt="$1.5 Million" width="580" height="325" style="box-shadow: 3px 3px 5px rgba(165,42,42,.7)" class="fullwidth">
</a>
</td>
</tr>
<tr><td height="10" style="line-height: 10px; font-size: 1px;"> </td></tr>
<tr>
<td align="left">
<p style="font-family: Helvetica; font-size: 16px; line-height: 24px; text-align:left;">In July 2017, our client and his wife were on a casual motorcycle ride in Waukesha County when the driver of a minivan failed to see their motorcycle and turned left in front of them. A terrible crash occurred and both occupants of the motorcycle were ejected. Find out what happened when Hupy and Abraham fought the insurance company to get a $1.5 million settlement.</p>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<a href="https://www.facebook.com/HupyandAbraham/">
<img src="https://preview.ibb.co/e6mYUw/18000fans_tight.jpg" alt="18000fans" width="500" height="183" class="fullwidth">
</a>
</td>
</tr>
<tr><td height="20" style="line-height: 20px; font-size: 1px;"> </td></tr>
<tr>
<td align="center">
<table align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center">
<a href="https://twitter.com/HupyandAbraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #1DA1F2); padding-left: 10px; padding-right: 10px;" alt="Twitter link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-twitter-96.png">
</a>
</td>
<td align="center">
<a href="https://www.youtube.com/user/hupyandabrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #ff0000); padding-left: 10px; padding-right: 10px;" alt="YouTube link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-youtube-96.png">
</a>
</td>
<td align="center">
<a href="http://instagram.com/hupyandabraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #C32AA3); padding-left: 10px; padding-right: 10px;" alt="Instagram link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-instagram-96.png">
</a>
</td>
</tr>
<tr><td colspan="3" height="20" style="line-height: 20px;"> </td></tr>
<tr>
<td align="center">
<a href="https://www.pinterest.com/hupyandabraham/" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #BD081C); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-pinterest-96.png">
</a>
</td>
<td align="center">
<a href="https://www.linkedin.com/company/hupy-&-abraham" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #007BB5); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-linkedin-96.png">
</a>
</td>
<td align="center">
<a href="https://plus.google.com/+HupyandAbrahamSC" target="_blank" style="text-decoration: none;">
<img style="filter: drop-shadow(1px 1px 3px #DB4437); padding-left: 10px; padding-right: 10px;" alt="Pinterest link" src="https://cdn-images.mailchimp.com/icons/social-block-v2/outline-dark-googleplus-96.png">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
To make a table responsive, just add a media querie like that (direct child selector doesn't affect tables inside this table) :
Code
<table class="responsive-table">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
The media queries :
<style>
#media all and ( max-width: 600px ) {
.responsive-table, .responsive-table > tbody, .responsive-table > tbody > tr, .responsive-table > tbody > tr > td {
display: block !important;
width: 100% !important;
}
}
</style>
You can ajust for your needs
I'm working on a two-column reponsive email. Everything is appearing perfect except that I can't get the right border in one of my TDs to remove on mobile. I have the following style set:
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
Strangely, the bottom border is adding just fine.
Here is my code. Any help would be greatly appreciated. I can't figure this one out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body { margin: 0px; padding: 0px; }
#media only screen and (max-width: 660px) {
table.view { width: 480px !important; }
table.container { width: 480px !important; }
table.left { width: 260px !important; }
table.right { width: 140px !important; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off-sm.gif) no-repeat;
height: 75px;
background-repeat: no-repeat !important;
background-position: center !important;
}
td.contact table { width: 100% !important; text-align: center;}
table.info p { text-align:center;}
table.copy { width: 480px !important; }
}
#media only screen and (max-width: 510px) {
table.view { width: 100% !important; }
table.container { width: 100% !important; }
table.left { width: 100% !important; margin-bottom: 10px; }
td.copy { padding-right: 0px; border-bottom: 0; border-right: none; padding-bottom: 20px; }
table.right { width: 100% !important; }
table.video td { padding-top: 15px; }
td.design img { display: none; }
td.design { background: #FFF url(http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif) no-repeat;
height: 88px;
background-repeat: no-repeat !important;
background-position: center !important;
vertical-align: middle;
text-align: center; }
table.copy { width: 100% !important; }
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="view">
<tr>
<td align="right" valign="middle" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:100%; color: #666; background: #FFF; padding: 8px 10px 8px 10px; vertical-align:middle;"><img src="http://www2.poscorp.com/images/addthis/16x16/email.png" alt="Forward Email" width="13" height="13" style="vertical-align: sub;"> Forward to a Friend | Email not displaying correctly? View it in your browser.</td>
</tr>
</table>
<table class="container" align="center" width="600" border="0" cellspacing="0" cellpadding="20" bgcolor="#FFFFFF" style="border:1px solid #CCC;">
<tr>
<td class="header" bgcolor="#ffffff" style="border-top: #00a160 solid 10px; padding: 20px 60px 20px 20px; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 27px; line-height:140%; color: #00a160; background: #FFF; ">When communicating with your patients, <span style="font-weight:bold;">consistency counts.</span></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma,Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 20px 20px;">
<table width="340" border="0" cellspacing="0" cellpadding="0" align="left" class="left" >
<tr>
<td class="copy" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; border-right: solid #00a160 1px; padding-right:20px;"><p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">POS provides practices customized print and digital communication to ensure your brand stands out – and that it stays consistent from one communication solution to the next. From print and messaging to billing and surveying, our services help you deliver communications in the patient’s preferred way, increase practice revenue and improve patient satisfaction.</p>
<p style="margin-bottom: 15px; margin-top: 0px; padding-top: 0px; ">It's how you'll build loyalty while helping keep your patients healthy.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Print – With print services from POS, you’ll receive clarity, convenience and consistency – from your practice stationery to marketing materials.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Statement Processing & Patient Payment Services – POS provides solutions to improve your practice's profitability. We specialize in driving down the cost of collecting your patient-owed balances through our Statement Processing, Online Bill Pay and Past Due Notification solutions.</p>
<p style="margin-bottom: 15px; margin-top: 15px;">Digital Messaging – Our automated communication system, POS Messaging™, lets you send customized, two-way communication to your patients via email, phone, text or mail to help you reduce no-shows and more.</p>
<p style="margin-bottom: 0px; margin-top: 15px;">Patient Surveys – With POS Surveys™, you can find out what your patients like about your practice and what you can improve so they don’t leave.</p></td>
</tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0" align="right" class="right" >
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="video">
<tr>
<td style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; border-bottom: 1px #00a160 solid;"><p style="margin-top:0px; margin-bottom: 15px; text-align:center;"><img src="http://www3.poscorp.com/emarketing/market-growth/blog-logo.gif" alt="POS Blog - Communicate" width="150" height="69"></p>
<p style="margin-top:0px; margin-bottom: 10px;">The blog for best practices in patient communication.</p>
<p style="margin-top:0px; margin-bottom: 20px;">JOIN NOW</p></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="promo">
<tr>
<td align="center" valign="middle" class="design"><p style="text-align:center; vertical-align:middle;" ><img src="http://www3.poscorp.com/emarketing/market-growth/free-design-25-off.gif" width="200" height="88" alt="Free Design and 25% a new print item"></p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 10px 20px 20px 20px;"><p style="margin: 0px; ">For more information, contact your Regional Territory Manager, <span style="font-weight:bold;">%%user_name%%</span> at <span style="font-weight:bold;">%%user_phone%%</span> or <span style="font-weight:bold;">%%user_email%%</span>.</p></td>
</tr>
<tr>
<td class="content" bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 14px; line-height:130%; color: #333; background: #FFF; padding: 0px 20px 0px 20px; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><p style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; line-height:130%; color: #333; background: #FFF; padding: 5px 0px 5px 0px; border-top: #CCC solid 1px; border-bottom:#CCC solid 1px; text-align:center; letter-spacing: 1px;">PRINT <span style="color:#00a160;">|</span> STATEMENT PROCESSING <span style="color:#00a160;">|</span> DIGITAL MESSAGING <span style="color:#00a160;">|</span> PATIENT SURVEYS</p></td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" class="contact" style="font-family: Arial, sans-serif; font-size: 14px; line-height:115%; color: #333; background: #FFF; padding: 20px 20px 20px 20px;">
<table width="275" border="0" cellspacing="0" cellpadding="0" align="left" class="logo">
<tr>
<td class="poslogo"><img src="http://www3.poscorp.com/emarketing/master/pos_logo_hc.gif" alt="POS Professional Office Services, Inc." width="272" height="45"></td>
</tr>
</table>
<table width="265" border="0" cellspacing="0" cellpadding="0" align="right" class="info">
<tr>
<td align="right"><p style="font-family: Tahoma, Arial, sans-serif; font-size: 13px; line-height: 100%; color: #333; font-weight:bold; margin:19px 0px 5px 0px;">800.331.4976 <span style="color:#00a160;">|</span> poscorp.com <span style="color:#00a160;">|</span> <img src="http://www3.poscorp.com/emarketing/master/linkedin.jpg" alt="LinkedIn" width="16" height="16" border="0" style="vertical-align:bottom;"/> <img src="http://www3.poscorp.com/emarketing/master/youtube.jpg" width="39" height="16" alt="YouTube" border="0" style="vertical-align:bottom;"></p></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="copy">
<tr>
<td bgcolor="#ffffff" style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10px; line-height:120%; color: #666; background: #FFF; padding: 10px 10px 10px 10px; border-top:1px solid #CCC;">
<p style="margin-top: 0px; margin-bottom:10px;"><span style="font-weight:bold;">Our mailing address is:</span> <br>
%%account_address%%</p>
<p style="margin-top: 10px; margin-bottom:0px;">update subscription preferences</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Did you add it to the media query?, dont forget !important.
I have a button that in order for it to work in Outlook 2007/10 (!) I have to put the three elements - left image, middle text, right image - in their own nested tables within a larger table. However, this causes the oft-quoted issue in Outlook 2007/10 which has the gaps between the tables.
Below is the code for the button. Obviously, there's the html head body etc above it.
I've tried display attributes, widths, align, border/padding/margin = 0 on img and tables alike... I've tried every solution I could find online and nothing is fixing it!
Any ideas for what else to try gratefully received!!
Note: this is happening across the board in Outlook, not just one of them.
<tr>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
<td align="center" valign="middle">
<table align="center" cellpadding="0" cellspacing="0" height="40" width="243" border="0" style="margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; background-color: #f2f2f2;" valign="middle">
<tbody valign="middle">
<tr height="40">
<td height="40">
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="22" style="margin: 0; border: 0; padding: 0; width: 22px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="22" style="background-color: #f2f2f2;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img align="right" height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="22" /></a></td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; border-left: 1px solid #ec6608;" valign="middle">
<tbody>
<tr style="background-color: #ec6608;">
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">Text goes here</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="36" style="margin: 0; border: 0; padding: 0; width: 36px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
<tbody>
<tr>
<td height="40" width="36" style="background-color: #f2f2f2;"><img align="right" height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15px; font-size: 15px;" valign="top"> </td>
This one was surprisingly tough! I found that part of the issue was caused by the align="center" on the outer table, causing a 3px gap in Outlook 2003 and Live Mail. If you still need it to align to the center, I would wrap this code in another table with that attribute. To solve the rest of it I removed extra tables and added align to your TDs. I also added "border-collapse: collapse;" to your tables. You should see no spacing in desktop Outlook clients now.
<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
<tbody>
<tr>
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
Text goes here
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>
You need to specify table-layout in <table> tags. If this still not working, you need to change your table layout to a float / display layout.
<table style="table-layout: fixed; [.....]">
The float layout is like this:
<a href="..." style="float:left;"><img ....>
I feel your pain! been making email templates and having these battles with Outlook for years now. The answer is that you need to do everything in your power to make the simplest little section work. I would make the background-color of each cell the orange, and align the left image to the left, and the right to the right https://jsfiddle.net/0gncaogm/.
I've also added classes (to accompany your inline widths) to make the cells a max-width with overflow-x:hidden...
img{
display:inline-block;
margin-top:0;
margin-right:0;
margin-left:0;
margin-bottom:0;
}
.leftedge{
max-width:15px;
overflow-x:hidden;
}
.rightedge{
max-width:36px;
overflow-x:hidden;
}
In the HTML...
<td height="40" width="36" style="background-color: #e76823;" align="right>
<a href="#" target="_blank">
<img align="right" height="40" src="http://www.tonytansley.co.uk/so/right.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" />
</a>
</td>