I have a 3 column html email table see code below, everything aligns on the same row ok apart from one issue their a gap at the top of the last table column. The gap gets considerably worst going from outlook 2007 - 2013 the gap basically gets bigger.
My question is how do I eliminate this gap, to see what the problem more closely check it out here http://codepen.io/anon/pen/qdkel and hover over the third column.
Here is visual
http://take.ms/9qIva Outlook 2007
http://take.ms/a9FET Outlook 2013
CSS Resets
table {border-spacing:0;}
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
table td, table tr { border-collapse: collapse; }
<tr>
<td align="center" valign="top" class="fix-box">
<!-- start LAYOUT-5 container width 600px -->
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container">
<tbody><tr>
<td valign="top" width="100%">
<!-- start LAYOUT-5 container width 560px -->
<table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width">
<!-- start image and content -->
<tbody><tr>
<td valign="top" width="100">
<!-- start content left -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image5_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold; text-align:left;
padding-left: 15px; padding-right: 15px;">
Embroidery
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style="color: #5f294f; font-weight: bold;
text-decoration: none;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="color: #5f294f; font-weight: 300;
text-decoration: none;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody>
</table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content left -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content center -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content center -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content Right -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="right" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content right -->
</td>
</tr>
<!-- end image and content -->
</tbody></table>
<!-- end LAYOUT-5 container width 560px -->
</td>
</tr>
</tbody></table>
<!-- end LAYOUT-5 container width 600px -->
</td>
</tr>
You should remove the heights from both the empty tables you have between your rows. Generally is a bad tactic defining heights in a newsletter! Also in your empty cells in newsletter always add two space characters.
<!-- start space width -->
<table class="remove" width="200" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" style="font-size: 0;line-height:
0;border-collapse: collapse;"> </td>
</tr>
</tbody></table>
<!-- end space width -->
I checked only in outlook, comment me if you have other problem.
http://jsfiddle.net/8Ws8V/2/
Related
I have been scouring the internet for around 2 days now and I can't find anything about an issue. I am facing with extra space on the LEFT and RIGHT side of images in Outlook desktop.
The extra space, affects the ability of my table/columns to be displayed side by side. If I shorten the width of any cell/row/table to the exact width of that space (circled in red in image) they suddenly pop in side by side. It is this particular little space I can't figure out how to remove. It is like there is a default value set somewhere on something I am unaware of.
Sorry about some images not being uploaded anywhere, these ones weren't really important.
2 How it appears in every other email client.
3 How it is appearing in outlook only.
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-spacing: 0px;
box-sizing: border-box;
}
#media only screen and (max-device-width: 480px) {
table[class=responsive] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
table[class=left] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
table[class=right] {
width: 330px !important;
}
}
#media only screen and (max-device-width: 480px) {
img {
width: 100% !important;
}
}
p {
padding: 10px 10px 10px 10px;
}
a {
color: #333333;
}
a:visited {
color: #000000;
}
<html>
<head>
<title></title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
</head>
<body style="font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;">
<!-- CENTER TABLE -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="660" border="0" cellspacing="0" cellpadding="0" class="responsive">
<tr>
<td bgcolor="#FFFFFF"><img src="10324612_ptgray.jpg" align="left" style="vertical-align: top; display:inline-block;"></td>
</tr>
<tr>
<td bgcolor="#666666" height="50">
<p style="text-align: center; color: #FFFFFF; font-size: 24px; line-height: 24px;"><b>THE JULY ISSUE OF <em>PHYSICS TODAY</em> IS AVAILABLE</b><br></p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" cellpadding="0" align="left">
<tr border="0" cellspacing="0" cellpadding="0" align="left">
<td border="0" cellspacing="0" cellpadding="0" align="left"><img src="https://i.stack.imgur.com/BVa1S.png" width="220" border="0" cellspacing="0" cellpadding="0" align="left" style="vertical-align: top; display: block; max-width: 100%;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
<p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td style="border: 1px solid #CCCCCC;">
<a href="#">
<table class="left" width="438" border="0" cellspacing="0" align="left">
<tr>
<td valign="middle" height="287">
<p style="font-size: 50px; line-height: 50px; text-align: center; padding: 0px 0px 0px 0px;">View the November Issue Online</p>
</td>
</tr>
</table>
<table class="right" width="220" border="0" cellspacing="0" align="right">
<tr>
<td><img src="pt-cover.jpg" style="vertical-align: top; display: block;"></td>
</tr>
</table>
</a>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" align="left">
<tr>
<td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" height="220" style="vertical-align: top; display: block;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">WHITEPAPER</p>
<p style="color: #C8544B; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Restoring sight with retinal prostheses</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Large amplitude oscillatory shear: Simple to describe, hard to interpret</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Who owns a scientist's mind?</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Magnets separate mirror-image molecules</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr>
<td>
<p style="border-left: 5px solid #C8544B; font-size: 24px">Concerns about aging plutonium drive need for new weapon cores</p>
<p style="border-left: 5px solid #C8544B;">Author or Department</p>
</td>
</tr>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE">
<td>
<table class="left" width="220" border="0" cellspacing="0" align="left">
<tr>
<td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" style="vertical-align: top; display: block;"></td>
</tr>
</table>
<table class="right" width="440" border="0" cellspacing="0" align="right">
<tr>
<td>
<p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
<p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
<p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of <6×10^-6 L/sec, while other safeguards
prevent contamination from external influences. Options available.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<p><strong>Help desk information:</strong><br><br>If you need technical assistance, please do not reply to this automated email; click here.</p>
</td>
</tr>
<!-- SPACER -->
<tr>
<td height="20px"> </td>
</tr>
<tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
<td>
<p>This email has been sent to %%email%%. In case you are not able to click on the links above, please go to: http://physicstoday.advanced-pub.com</p>
<p>Physics Today is published by the American Institute of Physics, One Physics Ellipse, College Park, MD. 20740. Send publication questions to pteditors#aip.org. The information contained in this e-mail
message is intended only for the personal use of the recipient(s). For Information on American Institute of Physics' Privacy Policy please click here. We appreciate your interest in our publication and encourage you to contact us with
your comments or suggestions. Thank you!</p>
<p>To unsubscribe, please click here.</p>
</td>
</tr>
</table>
<!-- CENTER TABLE -->
</td>
</tr>
</table>
</body>
</html>
According to my test and search, it not img's reason, might be table.
You could refer to the below code:
<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
<tr>
<td height="40" width="22" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
<img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
</a>
</p>
</td>
<td height="40" width="180" align="left">
<table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
<tbody>
<tr>
<td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
Text goes here
</p>
</td>
</tr>
</tbody>
</table>
</td>
<td height="40" width="36" align="left">
<p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
<a href="#" target="_blank">
<img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
</a>
</p>
</td>
</tr>
</tbody>
</body>
For more information, please refer to this link:
Outlook table spacing in HTML email - no usual tricks working
Table style border- outlook 2010 adds an extra space
I'm trying to place a table within a cell in an email, and cannot figure out how to limit the width of the inside table in Outlook. I've tried to use "The Hybrid Coding Approach" (http://labs.actionrocket.co/the-hybrid-coding-approach) and THINK I tried Outlook conditional statements correctly (http://labs.actionrocket.co/microsoft-outlook-conditional-statements). There's a lot of places where I'm seeing the conditional commenting for mso, but whenever I test the email in Litmus, Outlook still displays this giant set of images in the middle. What am I doing wrong? Any help would be greatly appreciated.
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">April is always <span class="highlighted" style="color: #518fce;">#BetterWithStraw</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">Introductory text.
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
<!-- End of content 1--> <!-- Start of content 2-->
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">Vote <span class="highlighted" style="color: #518fce;">here</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">
<!--[if mso>
<table width="540" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="100%" /></th></tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="100%" /></th></tr>
</tbody>
</table>
<!--[if mso>
</td>
</tr>
</table>
<![endif]-->
<div style="display: none;"> </div>
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
Thank you!
The issue is that Lotus Notes, Outlook 2003, 2010 and 2016, needs to have a fixed width on any image. If you insert a 1280px wide retina image, and set it to 100% in width, then it will ignore the outside box, and just become 100% of its original width.
So what you need to do is make a width on each image like this:
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="536" /></th>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="536" /></th>
</tr>
</tbody>
</table>
And then with Media queries make it optimal for mobile
#media screen and (max-width: 480px) {
a img{
max-width:100% !important;
width:100% !important;
}
}
I am trying to generate an html email being sent to customers. It renders find in most email clients but I am experiencing issues in Outlook Express and Outlook. Basically, I am trying to reserve two lines of space for my product link (two lines to be shown even if there is only one line of text). This works fine is other clients but not in these. Additionally, in outlook express the hyperlinks are always dark blue with a text underline. How can I standardize the size of the grid boxes along with fixing the hyperlink color. The color issue only happens in outlook express. The missing images are to remove logos from the posted image, this is not an issue.
<table width="600" align="center" cellspacing="0" cellpadding="0" style="width:600px;">
<tbody>
<tr>
<td>
<table width="290" align="left" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.examplecom/deal/usifhj6vPAYwqyziASU3bQ/la_giralda_guanaja 960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="company" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$525</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">Name of the product being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
<table width="290" align="right" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.example.com/deal/k44bFhz77oXnzEEcyTBW/y9-960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="Logo" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$1355</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">This is an example
product description for an item being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The code used to generate these boxes are:
$html = '<table align="'.$side.'" border="0" cellpadding="0" cellspacing="0" class="BoxWrap" style="background-color: #403e3e" width="290">
<tbody>
<tr>
<td border="0" class="RespoImage_TwoThirdsW" width="290"><img alt="" border="0" class="RespoImage_TwoThirds" height="180" src="'.$params['image'].'" style="width: 290px; height: 180px; display: block;" width="290" alt="'.$params['title'].'" /></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 18px; text-align: left;"><img height="15" src="'.$this->siteurl.$params['provider']['logo'].'" style="height:15px;" alt="'.$params['provider']['provider_display'].'"></td>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: right;"><span>'.$params['price'].'</span></td>
</tr>
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">'.$this->create_location($params['location']['mapped_address']['address']['city'],$params['location']['mapped_address']['address']['state'],$params['location']['mapped_address']['address']['country']).'</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" class="RespoShowMedium" height="15" style="display:none;" width="100%"> </td>
</tr>
</tbody>
</table>';
I am going to give the exact row of the project description changes.
Instead of this
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
Use like this
<tr>
<td align="justify" border="0" height="60" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
<span style="color:#fff;">'.$params['title'].'</span>
</td>
</tr>
Swiftmailer often removes the . from www. from links inside my mail.
This occurs randomly, I've noticed.
The following often outputs wwwdomain.com, without the . after www
The href url itself is always correct, but not the text link inside of it.
See the <a> tag in the middle:
<!-- START MAIL FOOTER -->
<table width="100%" cellspacing="0" cellpadding="0" align="center" bgcolor="#f6f6f6" style="background: #f6f6f6;">
<tr>
<td valign="top">
<table width="600" cellspacing="0" cellpadding="0" align="center" bgcolor="#f6f6f6" style="background: #f6f6f6;">
<tr>
<td width="5" style="font-size: 1px; line-height: 1px;"> </td>
<td style="font-family: Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 100; color: #8c8c8c; padding: 15px 10px 25px 10px; text-align: center; line-height: 20px; color: #8c8c8c;">
<a href="https://www.domain.com/" style="text-decoration: none; color: #8c8c8c;">
this mail was sent from <span style="color:#009dab;">www.domain.com</span>
</a>
</td>
<td width="5" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END MAIL FOOTER -->
I am working on a HTML newsletter/email and have a question regarding different versions of Outlook (2007, 2010, 2011, 2013). The layout I want works on all other clients we have tested (using a 'deliverability test' which displays how it would look in clients).
Link to image of the differences:
http://jimharrison.co.uk/wp-content/uploads/2013/10/outlook.jpg
What I'm aiming for: To have the bottom of the phone sit on the last 'League point' text.
NOTE: image is set to stretch to 100%.
Outlook 2011: image is just under.
Outlook 2007, 2010: image is sitting far from bottom but the top of the image is aligned correctly.
Outlook 2013: image is way off and also there is unwanted spacing between 'League points' on the left.
Code:
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="scaleForMobile">
<tr>
<td width="100%">
<!-- Column 1 -->
<table width="257" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="left" class="imageScale1">
<tr>
<td width="100%" height="10" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">
<span class="heading" style="font-size: 22px; color: #3B80C1; line-height: 22px;">It's time <br>to step it up a gear</span><br><br>
Starting on 1st November and running through to 29th December we've got "<span class="heading" style="color: #3B80C1;">Shake It Up Rio</span>" with Samsung offering 34 people the chance to soak up the sun in Rio, Brazil! As well as having the chance to party to the Samba beat, we also have weekly Best Incentive Points for Stores and Sales Advisors to win!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">Sell the Samsung Galaxy Note 3 smartphone and Galaxy Gear smartwatch, as well as the handsets listed below to earn league points and work your way up the league table!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Note 3 and Galaxy Gear
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
10 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
5 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4 mini
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
3 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Ace 3
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
1 League Points
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Padding + (Outlook) -->
<table class="eraseForMobile" width="1" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<tr>
<td width="0" height="2" style="font-size: 0;line-height: 0;border-collapse: collapse;"><p style="padding-left: 10px;"> </p>
</td>
</tr>
</table>
<!-- Column 2 -->
<table width="270" border="0" cellpadding="0" cellspacing="0" align="right" class="imageScale2" bgcolor="#ffffff">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" class="mobileCenter">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/galaxy_note_3.jpg" alt="galaxy note 3 and gear" width="100%" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
</tr>
</table>
Try this:
<tr>
<td width="50%" valign="top" bgcolor="#ffffff" class="mobileCenter">
... text ...
</td>
<td width="50%" valign="bottom" bgcolor="#ffffff">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/galaxy_note_3.jpg" alt="galaxy note 3 and gear" width="100%" border="0" class="imageScale" style="display: block;">
</td>
</tr>
Difficult for me to test this but it should work . . .
I always find putting images into different cells for emails to be quite effective.
To fix this issue:
Simply removed the width property and gave it the necessary height to fit with the text.
Because it's a responsive email this fix isn't perfect/ideal (I've had to play around with the CSS on the image so that it scales properly), but it's a fix nonetheless.