In Outlook Desktop apps (2010 and 2013) there's an extra gap on images at top and bottom:
Maybe the problem is easier to recognize if the content is marked:
It looks like some margin and padding stuff, but that did not work. I tried different hacks/solutions too (e.g. set line-height on table cell, remove whitespaces in table cell, remove surrounding div, set vspace and hspace on image, set display: block for image,...), but without an effect. The HTML looks like:
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin-top: 0px; margin-bottom: 0px;">
<tbody>
<tr>
<td width="311" valign="top" class="nopadding imagecell" style="padding: 0px 0px 0px 0px; font-family: "Open Sans","Helvetica Neue",HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 12px; color: #000000;">
<div class="imagewrap" style="overflow: hidden; margin-top: 0px; margin-bottom: 0px;">
<img align="left" src="/path/to/image.jpg" width="311" height="234" alt="" style="margin: 0;">
</div>
</td>
<td width="10" style="font-family: "Open Sans","Helvetica Neue",HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 12px; color: #000000;">
</td>
<td valign="top" class="background padding" style="padding: 10px 10px 10px 10px; background-color: #ececed; font-family: "Open Sans","Helvetica Neue",HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 12px; color: #000000;">
<h1 style="font-family: "Open Sans","Helvetica Neue",HelveticaNeue,Calibri,Helvetica,Arial,sans-serif; font-size: 19px; font-weight: normal; color: #51ae32; margin: 0px; margin-top: 0px; margin-bottom: 0px; padding: 0px; padding-top: 0px; padding-bottom: 0px;">PhD-Program erstmals ausgezeichnet</h1>
<p style="margin-bottom: 0px;">Andipsun daereicit fugit aut quunt volupta tibus. Abore doluptu reptatiumet ad mag- nam fugit dolupturepe nissunt. El illitateni nonecatem rae odi ut dest que asperro vi- tatia ectorem dit laut optas et nonecatem rae. El illitateni nonecatem rae odi ut dest que asperro vitatia ectorem dit laut optas et nonecatem rae. Weiterlesen</p>
</td>
</tr>
</tbody>
</table>
The rendering should be like in other clients or browsers:
Have you included any CSS resets in the <head> of the email for <table>s and <td>s? Here is some code from the reset I use that focuses on resetting the padding and borders in <table>s (does not have to be inlined):
<head>
<style>
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
</style>
</head>
Here is the full CSS reset I use for emails.
EDIT
Concerning images, add a display: block; inline to each image to negate any extra space beneath the image.
<img style="margin: 0; display: block;" align="left" src="/path/to/image.jpg" width="311" height="234" alt="">
I had this same problem and discovered a solution.
Remove the padding from the text's parent <td>, nest another table within this <td> and add the padding back to the child <td>.
So, to simplify your example:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 0">
<div>
<img align="left" src="/path/to/image.jpg" width="311" height="234" alt="" style="margin: 0;">
</div>
</td>
<td width="10">
</td>
<td style="padding: 10px 10px 10px 10px; background-color: #ececed;">
<h1>PhD-Program erstmals ausgezeichnet</h1>
</td>
</tr>
</tbody>
</table>
Would become:
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 0">
<div>
<img align="left" src="/path/to/image.jpg" width="311" height="234" alt="" style="margin: 0;">
</div>
</td>
<td width="10">
</td>
<td style="background-color: #ececed;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="padding: 10px 10px 10px 10px;">
<h1>PhD-Program erstmals ausgezeichnet</h1>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Related
I have a problem with an html email template in Gmail. In all other rendered browsers/mail clients it's rendered good so far, but I discovered a problem on Gmail Android App (tested on Samsung Galaxy S9+).
As you can see in the image, the big title beside the image is cut due to overflow - and I have no solution on how to prevent this. As said before, this happens on no other (mobile) mail client so far.
Found on Stack and other resources, that Gmail App can increase font-size - tried out following tipps I've seen so far, all without any positive effect:
!important directly on <td> and/or <a> with .listing-title
font-size in pt instead of px (with and without !important)
spacer.gif as top row (creates huge empty space on left side)
white-space: nowrap; can't be used because usually these titles are bigger than one line and this looks weird when cut off with overflow:hidden
special class with u + .gmail
Even if I change height of image and text-container - this then effects ALL mail clients of course...
Note: I'm not allowed to do big design changes, so it needs to be img on left side and these texts on right side.
Does anyone has further suggestions on how this cut off could be prevented?
Thank you in advance!
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
span.yshortcuts {
color: #000;
background-color: none;
border: none;
}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {
color: #000;
background-color: none;
border: none;
}
html,
table {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", arial;
}
.main-tbody * {
margin: 0;
padding: 0;
}
.padding {
width: 50px;
}
.copyright {
width: 500px;
}
.location-row {
display: block !important;
}
.button-padding {
display: none !important;
}
#media screen and (max-width:620px) {
.location-row {
display: none !important;
}
.main-table {
width: 320px !important;
}
.inner-table {
width: 320px !important;
}
.image-listing {
width: 80px !important;
height: 60px !important;
max-width: 80px !important;
max-height: 60px !important;
}
.image-container {
width: 80px !important;
height: 60px !important;
}
.listing-title {
font-size: 14px !important;
line-height: 18px !important;
height: 35px !important;
}
.listing-price {
font-size: 12px !important;
height: 14px !important;
}
.button-padding {
display: block !important;
}
.copyright {
width: 320px !important;
}
}
a[x-apple-data-detectors],
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn,
u+#body a,
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
<body id="body" style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif; margin:0; min-width:320px;">
<table class="main-table" border="0" cellpadding="0" cellspacing="0" align="center" style="text-align: center; background: #f5f5f5; margin-inline-start: auto; margin-inline-end: auto;" width="600">
<tbody class="main-tbody">
<!-- Header -->
<tr align="center" style="margin: 0 auto; text-align: center;">
<td colspan="3">
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" width="500" style="margin: 0 auto; text-align: center;">
<tbody align="center">
<tr>
<td colspan="3" height="40" style="height: 40px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr style="height: 40px; width: 100%;" align="center">
<td colspan="3" class="desktop-logo" width="500">
<img height="48" width="128" style="display: inline-block; vertical-align: middle" alt="Logo" src="https://via.placeholder.com/128x48.png?text=logo">
</td>
</tr>
<tr>
<td colspan="3" height="30" style="height: 30px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Header -->
<tr>
<td class="padding" width="50"></td>
<td>
<!-- Listing -->
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" style="background-color: #ffffff;" width="500">
<tbody>
<tr class="list-container" style="width: 100%; max-height:140px;">
<td width="10"></td>
<td class="image-container" colspan="1" width="160" height="140" style="max-height:140px;">
<a href="">
<img class="image-listing" src="https://via.placeholder.com/160x120.jpeg?text=image" alt="" style="display: block; width: 100%; height: 100%; max-height: 120px;max-width: 100%; object-fit: cover" width="160" height="120">
</a>
</td>
<td width="10"></td>
<td class="text-container" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="100%" style="width: 100%;">
<tbody>
<tr>
<td class="padding-top-inner-table" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td>
<a href="" style="width: 500px">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="500" style="width: 100%; text-align: left; color: #212338;">
<tbody>
<tr class="location-row">
<td style="width:100%; font-size: 12px; font-weight: 400;display: block; height:16px;" height="16">
<a href="" style="overflow: hidden; width:100%;height: 16px; margin: 0;text-decoration: none;color: #232f3f; display: block">
A small title
</a>
</td>
</tr>
<tr>
<td class="location-row" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td class="listing-title" style="font-size: 16px; height:42px; font-weight: 400;display: block" height="42">
<a class="listing-title" href="" style="overflow: hidden; height: 42px; margin: 0;color: #232f3f;display: block; text-decoration: none; font-weight:bold; font-size: 16px;">
The very main big title which makes problems
</a>
</td>
</tr>
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
<tr height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</tr>
<tr height="19" style="height: 19px;">
<td class="listing-price" height="18" style="height:18px; margin: 0;font-weight: normal; font-size:14px; text-align: left; text-decoration: none;">
Tag 1 | Tag 2 | € price
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td width="15" style="width: 15px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td colspan="3" height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="height: 10px; background: #f5f5f5;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
<!-- Listing -->
</td>
<td class="padding"></td>
</tr>
</tbody>
</table>
I can't seem to reproduce the problem on your screenshot in Gmail on Android. My guess is there's something else in your code conflicting with Gmail's rendering. One thing I see is that there are missing <td>s here and there in your code. For example here:
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
This should be:
<tr class="location-row" height="27" style="height: 27px;">
<td><p style="margin: 0;"></p></td>
</tr>
There are also two <body> elements in your code.
As a general rule for Gmail troubleshooting, I would:
Make sure your <style> tags are inside the <head> of your email. Gmail doesn't support <style> in the <body>.
Make sure your email can render correctly with and without <style> tags. Gmail mobile webmail and Gmail Apps with Non Gmail Accounts don't support <style> tags.
Make sure your HTML overall weight is not bigger than 102 Kb. Gmail clips email at 102 Kb and limits <style> to 16 Kb.
Use a neutral service that doesn't alter your HTML to send your tests (like Putsmail or Parcel).
Here’s an old post I wrote about troubleshooting Gmail’s responsive design support .
If this still doesn't help, feel free to share the entire code that you sent to trigger that bug in the first place.
I have an issue with excess padding appearing around either the table or image on mobile with a HTML email signature and I'm unable to find the solution.
I must of tried every single solution I have researched including:
Adding display:block to the image
Adding a line-height: 1px to the td
Adding font-size: 0; to the td
Making sure every section had padding: 0; and margin: 0;
Adding cellpadding="0" and cellspacing="0" to all tables, tr and td elements
Adding width and height to the table and td (which didn't have any effect)
Adding float: left and align="left"
Adding table-layout:fixed;
Adding border: 0; border-spacing: 0; and border-collapse; on elements
The issue seems to appear on Samsung and iPhone devices that I have tested.
Any new suggestions would be appreciated.
The image that specifically has extra spacing is here:
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important;"></td>
</tr>
</table>
How here is the entire code as I have two tables side by side which may be the cause of the issue:
<!DOCTYPE html>
<html>
<head>
<style>
a {
color: #00001b;
text-decoration: underline;
}
table {
padding: 0;
margin: 0;
display: block;
}
</style>
</head>
<body>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
<tr style="padding: 0; margin: 0;">
<td cellspacing="0" cellpadding="0" style="border-collapse: collapse; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0;" border="0" height="10">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="180">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;">
<tr>
<td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
</body>
</html>
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="345" cellspacing="0" cellpadding="0" border="0">
<tr>
<td valign="top">
<table align="left" cellpadding="0" cellspacing="0" border="0" width="180">
<tr>
<td valign="bottom" cellpadding="0" cellspacing="0"><img src="logo.png" width="180" height="100" alt="" style="display: block"></td>
</tr>
</table>
</td>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="165">
<tr>
<td style="text-align: left;padding:0 0 0 25px;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
You may want to add a </td><td> between your two tables. I've also moved the 25px padding to the left of the copy, rather than the image. (I've assumed the img dimensions here). This looked ok on my EoA previews, if it doesn't help could you post a screenshot of your issue?
Code it like an email! Try the hybrid method! This method allows you to cater for outlook email clients and the use of divs means you dont have to worry about the extra gaps.
<table style="font-family: Helvetica, sans-serif; max-width: 367px;" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td>
<table style="border-bottom: 3px solid #000; padding-bottom: 8px;" width="367" cellspacing="0">
<tr style="padding: 0; margin: 0;">
<td style="text-align: center; vertical-align: top; font-size: 0px; padding: 0px; width: 367px;">
<!--[if (gte mso 9)|(IE)]>
<table width="367" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top" width="180">
<![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; table-layout:fixed; mso-table-lspace:0pt;mso-table-rspace:0pt; padding:0; margin: 0; float:left; line-height: 1px; font-size: 0;" width="100%">
<tr style="padding: 0; margin: 0;">
<td valign="bottom" style="padding:0 25px 0 0; margin:0; font-size: 0 !important;" cellpadding="0" cellspacing="0"><img src="logo.png" width="" alt="" style="display: block !important; padding: 0; margin: 0;"></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td align="left" valign="top" width="180">
<![endif]-->
<div style="width: 180px; display: inline-block; vertical-align: top;">
<table align="left" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0; mso-table-lspace:0pt;mso-table-rspace:0pt; margin: 0; padding: 0 0 7px 0; line-height:1px; font-size:0; float:left;" width="100%">
<tr>
<td cellpadding="0" cellspacing="0" width="165" style="text-align: left;">
<strong style="font-size: 16px; font-family: Garamond;">First Name Last Name</strong><br />
<span style="font-size: 11px; line-height: 100%;"><em>Job Title / GIA GG, BA</em></span><br />
</td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<p style="font-size: 11px; line-height: 160%; margin: 10px 0;">
<strong>T:</strong> 00000000 |
<strong>W:</strong> www.website.com.au<br /> Street Address | City | State Postcode</p>
<p style="margin:6px 0;"><img src="facebook.png" alt="Facebook" width="28" height="28"> <img src="instagram.png" alt="Instagram" width="28" height="28"></p>
</td>
</tr>
</table>
Let me know if this method works for you.
I'm having trouble getting Outloook 2013 to render this code correctly. I'm trying to get the two columns next to each other in a 600px table in the 2nd row.
For some reason, the first column in the second row is spanning 600px and the second column is correctly to the right but is just tacked on in addition to the 600px so it spans larger than the rest of the columns.
Here is the jsfiddle of the code (sorry for the long code). https://jsfiddle.net/abdiyohan/hdpjjh5x/2/
<body bgcolor="#CCCCCC">
<table align="center" width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;">
<tr>
<td width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;" align="center">
<table style="width:600px;" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff" align="center">
<tr>
<td colspan="2" style="border-top: 7px solid #a0a5a6; border-bottom: 2px solid #a0a5a6; color: #000000;width:100%;" bgcolor="#005195" height="95" width="100%">
<img align="top" style="font-family:Arial,Helvetica,sans-serif;font-size: 18px;border-style: none;color: #ffffff;" alt="" src="" height="95" width="600" border="0" />
</td>
</tr>
<tr>
<td width="75%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width:75%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
<div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"><a name="English">Lorem Ipsum</a>
<p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
<table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
<tr>
<td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
<div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
</div>
</td>
</tr>
</table>
</div>
</td>
<td colspan="1" style="border-bottom: 2px solid #a0a5a6;background-color:#efefef;padding:20px 20px 0px 20px;font-family: Arial,Helvetica,sans-serif;color:#005195; width:25%; font-size: 14pt; line-height: 28px;" align="right" bgcolor="#ffffff" valign="top" width="25%">
<div style="width:100%;height:100%;" width="100%">
<h1 style="font-size: 14pt;font-family: Arial,Helvetica,sans-serif;color:#005195;font-weight:normal;padding:0px;margin:0px;">Global Links</h1>
<p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px;margin-top:10px;"><a style="color:#4682B4; text-decoration: none;" href="#English" target="_self">English</a>
</p>
<p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px; margin-top: 20px;"><a style="color:#4682B4; text-decoration: none;" href="#Spanish (Latin America)" target="_self">Español (Latinoamérica)</a>
</p>
</div>
</td>
</tr>
<tr>
<td colspan="2" width="100%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width: 100%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
<div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"> <a name="Spanish (Latin America)"></a>¡Comparta su opinión!
<p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
<table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
<tr>
<td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
<div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
I know the code looks pretty messy, but I've tried so many solutions and fixes from across the internet and have come up with nothing.
This code works in OWA, which is strange and depressing, but breaks in Outlook 2013 and Outlook 2011 for Mac. Any help would be much appreciated.
The fact is that Outlook uses Word for rendering HTML markup. You can find the supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following series of articles in MSDN:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
This is an error which only occurs in Outlook 2010. This email template seems to work on 90% of devices and browsers.
The graphic below is an example of how it looks in Outlook 2010. The crude blue draw over is intended to show how it should look. You can also view the fiddle for the entire code which displays that section how it is supposed to be displayed.
http://postimg.org/image/zacxr5acr/
Here's the full fiddle link http://jsfiddle.net/Nexus1234/bxp14vcw/
Note - the below sample code is only the relevant section and sending this on its own in an email doesn't cause the issue, it's somewhere within the complete html which is in the jsfiddle
<!-- Two Column (Images Stacked over Text) -->
<table align="center" bgcolor="#EEEEED" border="0" cellpadding="0" cellspacing=
"0" class="deviceWidth" width="580">
<tbody>
<tr>
<td class="center" style="padding:10px 0 0 5px">
<table align="left" border="0" cellpadding="0" cellspacing="0" class=
"deviceWidth" width="49%">
<tbody>
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<img alt="" class="deviceWidth" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/forum.jpg"
style=
"border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
</td>
</tr>
<tr>
<td style=
"font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="width:100%;border-bottom: 1px solid #333">
<tbody>
<tr>
<td style="padding:0 10px 10px 5px" valign="top">
<img alt="" id="circle" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
style=
"border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>
<td style="padding:0 10px 10px 0" valign="middle">
<h1 style=
"text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
The Roman Forum<br />
</h1>
</td>
</tr>
</tbody>
</table>
<p><span style=
"font-family:arial,helvetica neue,helvetica,sans-serif;">Here,
in a small space hemmed in by the great rocks of the Capitoline
and Palatine hills, the greatest names of Roman history fought
for power and prestige. Amidst an extraordinary concentration
of famed and marvellous buildings jostling for space, you will
walk where Antony spoke over Caesar’s body, Cicero
delivered stinging orations and the legions processed in
triumph.</span></p>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class=
"deviceWidth" width="49%">
<tbody>
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<img alt="" class="deviceWidth" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/villa-deste-tivoli.jpg"
style=
"border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
</td>
</tr>
<tr>
<td style=
"font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="border-bottom: 1px solid #333">
<tbody>
<tr>
<td style="padding:0 10px 10px 5px" valign="top">
<img alt="" id="circle" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
style=
"border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>
<td style="padding:0 10px 10px 0" valign="middle">
<h1 style=
"text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
The Villa Adriana & The Villa D'Este</h1>
</td>
</tr>
</tbody>
</table>
<p><span style=
"font-family:arial,helvetica neue,helvetica,sans-serif;">Experience
the opulence of two ages in a trip out to the inspiring
hillside retreat of Tivoli. In the morning, we visit the
massive, brilliantly preserved and sprawling villa of the
Emperor Hadrian, where luxury on an unparalleled scale centres
on a fantasy rendition of the River Nile. The afternoon is
spent amidst the fountains and gardens of the enchanting
Renaissance Villa d’Este.</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End Two Column (Images Stacked over Text) -->
One suggestion would be to always keep in mind the 20px rule. Outlook loves to add spacing around tables, making aligned tables a hassle.
My usual equation is,
(Wrapper table - 20px) / 2.
Your example:
(580 - 20px) = 560 / 2.
Percentages are tricky, I would set your tables as a fixed width. Your deviceWidth class will handle your widths on mobile anyway.
I would suggest applying this too all of your aligned tables.
If that doesn't work, let me know.
I am working on HTML email and trying to center a green TD in a white TR so that there's a 20px white margin on the left and right of the green box.
I tried setting TD width for the green portion and setting margin 0 auto but the green just expands to the width of the TR.
Tried putting in 2 more TDs to push the green TD into the center and that didn't work either.
Including the code snippet, am having trouble with the TR that has #a6d971.
<table cellspacing="0" cellpadding="0" border="0" width="600" height="" bgcolor="" style="margin: 0 auto;">
<tbody>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_top.png" alt="" style="display: block;" />
</td>
</tr>
<tr bgcolor="#fff" height="75">
<td valign="top" style="text-align:center;">
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#545d69; font-size: 24px; text-align:center; font-family: Arial, Helvetica;">
Regular sales happen every day
</p>
<p style="margin:0; padding-bottom: 3px; padding-top: 3px; color:#4bc1d6; font-size: 16px; text-align:center; font-family: Arial, Helvetica;">
9am - 11pm
</p>
</td>
</tr>
<tr bgcolor="#fff" height="75" padding="10">
<td bgcolor="#000" width="20"></td>
<td bgcolor="#a6d971" width="300" style="margin: 10;">
</td>
<td bgcolor="#000" width="20"></td>
</tr>
<tr bgcolor="#fff">
<td valign="top">
<table cellspacing="0" cellpadding="10" border="0" align="center" width="100%" bgcolor="#fff" style="">
<tbody>
<tr>
<td height="80" style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; color: #555; background:url('assets/graphic_9am.png') no-repeat; background-position: 10% center; padding:10px; margin:0;">
<h3>Nine # Nine</h3>
<p>Fuel up! Dresses, tunics and other items including:</p>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="margin: 0 auto;">
<img width="600" height="23" padding="0" src="assets/graphic_scalloped_bottom.png" alt="" style="display: block;" />
</td>
</tr>
</tbody>
</table>
Switch to DIV's and CSS, most emails client supports styles pretty well, you can use a DIV inside your TD element, it'll be easy to center or do other things you might want.
For Example
<tr style="background-color: white;">
<td style="background-color: green;">
<div style="background-color: purple; margin-right: 20px; margin-left: 20px;">Content Here</div>
</td>
</tr>
Also note if you use DIV's you can also avoid tables.
Hack on top of a hack.
<table width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">
This is stuff.
</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/zy6GU/
Incidentally, the same thing should work with a DIV:
<div style="border-left: 20px solid white; border-right: 20px solid white; background: green; color: white; text-align: center;">This is a DIV.</div>
http://jsfiddle.net/zy6GU/1/
If you HAVE to use tables, might as well abuse them a little:
<table><tr align="center">
<td width="50%">one</td>
<td style="background-color:green">two</td>
<td width="50%">three</td>
</tr></table>
http://jsfiddle.net/mblase75/yntfu/
I'm not a CSS expert but this works for me (with no extra tags) :
<table>
<tr style="background-color: white; border: 1px solid black;">
<td style="background-color: green; display: block; margin: 0 20px;">
<!-- Content -->
</td>
</tr>
</table>
What are you talking about 'for emails'? You mean an email address, like Email Me? If so you'd want some css that centers the link in the TD, or in combination with colspan on the TD.