How can I align image and text in a table? Here is a screenshot of what I have done so far: https://www.dropbox.com/s/o8jxyt4w3lzddoc/table.png
I want the text to be aligned with the image!!
Here is my code:
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line"></a>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font- family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">text here</span
</td>
</tr>
Keep your Markup and Styling seperate:
HTML
<table>
<tr>
<td>
<img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line">
<span style="">text here</span>
</td>
</tr>
</table>
CSS:
td span { vertical-align:top }
JSFiddle Demo
You can add style="vertical-align:top" to td like this:
<tr>
<td valign="top" style="vertical-align:top; padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line"></a>
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font- family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">text here</span
</td>
</tr>
In general to align two elements you can set them to display: inline/inline-block and them use vertical-align proprty:
img, span {
display: inline-block;
vertical-align: middle;
}
Demo: http://jsfiddle.net/6UBQZ/
Use vertical alignment for an image as a middle. Below is edited code:
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;">
<img src="http://imgurl.png" nosend="1" border="0" width="21" height="21" alt="Line" title="Line" style="vertical-align: middle">
<span style="text-align: left; margin-top: 0px; margin-bottom: 0px; color: #000000; font- family: 'Arial', sans-serif; font-weight: normal; font-size: 9pt;">text here</span>
</td>
</tr>
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>
I'm developing an HTML email that utilizes two columns for the desktop design and one for the mobile design. Instead of dealing with all the complexity of targeting specific elements of the desktop version with media queries and trying to make them work for mobile (doing this is a nightmare with emails..), I figured I'd make a completely separate table for mobile and make the desktop version disappear (display: none), at a breakpoint of below 450px.
Now, this works; however, on desktop (above 450px), where I set the mobile table to (display none; display: none !important;) there comes a problem. When opening the email on a screen size larger than 450px (IN GMAIL, not in a browser. I'm using a service called "freshmail" to test this), initially only the desktop table appears; however, none of the images are present. Gmail asks "Display Images Below" and clicking this rewrites my style-sheets such that the mobile table appears as well even though I explicitly tell it not too.
I know this is a tricky business, and I've tried many workarounds to overcome it, but none have worked. If anyone could help me accomplish this I would very much appreciate it.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
#media (min-width: 451px) {
#mobile {
display: none;
display: none !important;
}
}
#media (max-width: 450px) {
#desktop {
display: none !important;
}
#mobile {
display: block !important;
}
}
</style>
</head>
<body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;">
<table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black">
<tr>
<td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;">
<table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<tr style="">
<th>
</th>
<th style="padding-top: 20px;">
<span style="color: #504e4b;"/>
example text
</span>
</th>
</tr>
<tr style="padding: 0; background: #ffffff; color: #504e4b;">
<td colspan="2">
<img src="assets/example.gif" style="display: block;">
<img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="padding: 0px; border: none;">
</td>
</tr>
<tr style="height: 415px; color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.gif" style="display: block;">
</td>
</tr>
<tr style="vertical-align: top; color: #504e4b;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="text-align: right; padding: 0px;">
<img src="assets/example.png" align="right" style="display: block; padding-right: 20px;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;">
example text
</span>
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
</td>
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" colspan="2" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- mobile view -->
<table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;">
<tr id="date">
<th style="padding-top: 20px;">example text</th>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td style="padding: 20px;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
<img id="trend-top" src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img id="trend-bottom" src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;">
</td>
</tr>
<tr>
<td align="center" style="background: #ffffff;">
<img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;">
example text
</span>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Try adding the mso-rules to your hide and un-hide. You can use basic break points as well, but I have found that also using the #media screen and (max-width:XXpx) is a better solution since most people don't carry around laptops that are less than 450 pixels wide.
Email design and development is pure a totally mixed bag, and I wish you luck.
All in all I would not take this approach to hiding and unhiding content. Outlook will ignore it entirely and Gmail will do (as you know) unpredictable things.
Here's link to a basic template I made Email template that might help.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
#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: collapse!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: collapse !important;
mso-table-lspace:0pt;
mso-table-rspace:0pt;
}
#media (min-width: 451px) {
table#mobile {
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
}
#media (max-width: 450px) {
table#desktop {
display: none !important;
max-height: 0px;
font-size: 0px;
overflow: hidden;
mso-hide: all;
}
table#mobile {
display: inline !important;
}
}
</style>
</head>
<body style="width: 100% !important; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.4; font-family: Helvetica; overflow-x: hidden;">
<table id="desktop" cellpadding="0" cellspacing="0" width="100%" border="1px solid black">
<tr>
<td style="display: block; clear: both !important; margin: 0 auto !important; width: 600px !important; overflow: hidden;">
<table border="0" cellspacing="0" width="100%" style="border-collapse: collapse;">
<tr style="">
<th>
</th>
<th style="padding-top: 20px;">
<span style="color: #504e4b;"/>
example text
</span>
</th>
</tr>
<tr style="padding: 0; background: #ffffff; color: #504e4b;">
<td colspan="2">
<img src="assets/example.gif" style="display: block;">
<img src="assets/example.gif" style="display: block; pointer-events: none; cursor: default;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; padding-left: 30px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 30px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-left: 30px; padding-bottom: 20px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="padding: 0px; border: none;">
</td>
</tr>
<tr style="height: 415px; color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.gif" style="display: block;">
</td>
</tr>
<tr style="vertical-align: top; color: #504e4b;">
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" style="display: block;">
</td>
<td style="text-align: right; padding: 0px;">
<img src="assets/example.png" align="right" style="display: block; padding-right: 20px;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 180px; margin-bottom: 10px; padding-right: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 40px; font-weight: 200; color: #504e4b;">
example text
</span>
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 30px; padding-top: 50px;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200;">
example text
</span>
</td>
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
</td>
<td style="width: 50%; padding: 0px; border: none;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" colspan="2" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- mobile view -->
<table id="mobile" border="1px solid #f2f2f2" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px; margin: 0 auto;">
<tr>
<td align="center" style=" clear: both !important; margin: 0 auto !important; width: 100% !important; max-width: 450px !important; overflow: hidden; overflow-y: hidden;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;">
<tr id="date">
<th style="padding-top: 20px;">example text</th>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="header" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td align="center" style="padding: 0; overflow-x: hidden; vertical-align: middle;">
<img id="planter" src="assets/example.gif" style="width: 100% !important; display: block !important;" />
</td>
</tr>
<tr>
<td style="padding: 20px;">
<span style="display: block; font-size: 13px; font-weight: 200; text-transform: uppercase; margin-top: 20px; margin-bottom: 10px; color: #f36b22;">
example text
</span>
<span style="display: block; font-size: 35px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px;">
example text
</span>
<span style="display: block; font-size: 13px; font-weight: 200; padding-bottom: 0px;">
example text
</span>
</td>
</tr>
<tr style="padding: 0; background: #ffffff;">
<td style="padding: 0px; border: none;">
<img id="trend-top" src="assets/example.png" style="display: block;">
</td>
</tr>
<tr style="color: #504e4b;">
<td style="padding: 0px; width: 50%; background-color: #fccb03; vertical-align: top;">
<img id="trend-bottom" src="assets/example.png" style="display: block;">
<span style="display: block; height: 10px;"></span>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 10px; margin-bottom: 10px; padding-left: 20px;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; color: #504e4b;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="trend-wheels" src="assets/example.gif" style="display: block; width: 100%;">
</td>
</tr>
<tr>
<td align="center" style="background: #ffffff;">
<img id="display-ideas" src="assets/example.png" style="max-width: 170px; display: block; width: 100%;">
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-top: 30px; margin-bottom: 10px; padding-left: 20px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 20px; padding-right: 20px; padding-bottom: 0px; font-weight: 200; color: #504e4b; text-align: left;">
example text
</span>
</td>
</tr>
<tr>
<td>
<img id="pot-stand" src="assets/example.png" style="display: block; margin: 0 auto; padding: 20px 0px 40px 0px; max-width: 300px; width: 90%">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td style="padding: 0px;">
<img src="assets/example.png" style="display: block;">
<img src="assets/example.png" align="right" style="display: block;">
</td>
</tr>
<tr align="right" style="padding: 0; background: #f36b22; color: #ffffff;">
<td>
<span style="display: block; font-size: 28px; font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 10px; padding-left: 35px; text-align: left;">
example text
</span>
<span style="display: block; padding-left: 30px; padding-right: 20px; padding-bottom: 50px; font-weight: 200; text-align: left;">
example text
</span>
</td>
</tr>
<tr style="color: #504e4b;">
<td align="center" style="padding: 20px 40px 20px 40px;">
<span style="display: block;">
example text
</span>
<span style="display: block; padding: 20px 0px 20px 0px;">
example text
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
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.
I have created a small html signature but its inline, to the left and my boss needs it to be edge to edge instead of being inclined to the left. I need to fix this but i'm not very good at html so i'd love some advice, or better still somebody who can help me redo it, well i know its a walk in the park for anybody good at Html :-)
Here is the code.
<html>
<head>
</head>
<body style="-webkit-text-size-adjust: 100%;">
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;" colspan="2">
<span style="text-align: left; color: #52524D; font-family: Helvetica, Arial, sans-serif; font-size: 13pt; font-weight: bold"><b>Mathenge Anthony</b> |<i><small> Intern</small></i></span>
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 2px; padding-right: 0px;" colspan="2">
<img src="http://www.qualitexsolutions.com/img/works/systech.png" nosend="1" border="0" width="200" height="120" alt='Systech Africa' title='Systech Africa' />
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;" colspan="2"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> 1st Floor Mayfair Business Centre, Parklands Road, Westlands <font size="1" color="#B9B9B9"><br></font> P.O. Box 41964 - 00100 <font size="1" color="#B9B9B9">|</font> Nairobi, Kenya.<br></span></td>
</tr>
<tr>
<td valign="bottom" style="padding-left: 0px; padding-top: 6px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 7pt; font-style: normal; font-weight: normal;"><font color="#828282"><b>Phone:</b></font> </span></td>
<td align="left" width="100%" valign="top" style="padding-left: 6px; padding-top: 6px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> (+254) 020 2115993/3742207 </span></td>
</tr>
<tr>
<td valign="bottom" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 7pt; font-style: normal; font-weight: normal;"><font color="#828282"><b>Mobile:</b></font> </span></td>
<td align="left" width="100%" valign="top" style="padding-left: 6px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> 0723-847842, 0786-384784 </span></td>
</tr>
<tr>
<td valign="bottom" style="padding-left: 0px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 7pt; font-style: normal; font-weight: normal;"><font color="#828282"><b>Fax:</b></font> </span></td>
<td align="left" width="100%" valign="top" style="padding-left: 6px; padding-top: 0px; padding-bottom: 0px; padding-right: 0px;"><span style="text-align: left; color: #000000; font-family: 'Arial', sans-serif; font-size: 9pt; font-style: normal; font-weight: normal;"> (+254) 020 224 0363 </span></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 6px; padding-bottom: 0px; padding-right: 0px;" colspan="2"><span style="text-align: left; margin-top: 0px; color: #00ADEF; font-size: 8pt; font-weight: bold; font-family: 'Calibri', sans-serif;"><a style="text-decoration: none; color: #00ADEF" href="http://www.systechafrica.com/"><font color="#00ADEF">website</font></a> <font size="1" color="#00ADEF"> <font size="1" color="#00ADEF">|</font> <a style="text-decoration: none; color: #00ADEF" href="https://www.google.com/maps/place/Systech+Limited/#-1.262282,36.808949,15z/data=!4m2!3m1!1s0x0:0xf5bbb42d28fa1a88"><font color="#00ADEF">map</font></a> <font size="1" color="#00ADEF">|</font> <a style="text-decoration: none; color: #00ADEF" href="mailto:info#systechafrica.com"><font color="#00ADEF">email</font></a></span></td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 10px; padding-bottom: 0px; padding-right: 0px;" colspan="2">
<img src="http://s24.postimg.org/y4lzmrxut/Fundmaster.png" nosend="1" border="0" width="250" height="70" alt="" />
</td>
</tr>
<tr>
<td valign="top" style="padding-left: 0px; padding-top: 7px; padding-bottom: 0px; padding-right: 0px;" width="100%" colspan="2">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" nosend="1" border="0" width="22" height="20" alt="Twitter" />
<a href="https://www.facebook.com/SystechLimited">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" nosend="1" border="0" width="22" height="20" alt="Facebook" /></a>
<img src="https://simplesharebuttons.com/images/somacro/linkedin.png" nosend="1" border="0" width="22" height="20" alt="LinkedIn" />
<img src="https://simplesharebuttons.com/images/somacro/google.png" nosend="1" border="0" width="22" height="20" alt="google+" />
</td>
</tr>
</tr>
</tbody>
</table>
</body>
<style>
a {color: #00ADEF;}
</style>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Firstly: <style> and <meta> tags should be inside <head> tag.
Secondly: Let this be your starting point ;)
<table style="border:1px solid black; width:600px">
<tr>
<td style="text-align:left">I'm on left</td>
<td style="text-align:right">I'm on right</td>
</tr>
</table>
Tip: You can place another table inside <td>
Add width to your table
<table width="100%" cellspacing="0" cellpadding="0" border="0">
Is magic.