I have made a template for an email that I have been working on for my company. The only problem is any time its forwarded from ms office it adds spacing in between the tables in the template. Is there anyway to stop this from happening? Its not there when the email arrives fresh from outlook only when its forwarded. So is there any code I can add to stop this?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Email Template Version 3</title>
<style type="text/css">
/* Base Table Resets */
body { margin: 0; padding: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; }
table { border-spacing: 0; }
table td { border-collapse: collapse; }
</style>
</head>
<body>
<!-- Main Email Setting (Background Color) -->
<table cellpadding="0" cellspacing="0" class="background" style="background-color: #CCCCCC; background-repeat: repeat-x" width="100%">
<tr>
<td align="center" valign="top">
<!-- Super Top Header -->
<table cellpadding="0" cellspacing="0" width="650">
<tr>
<td align="left" height="30" width="325"><span style="font-size: 12px; font-weight: normal; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif; text-decoration: none;">July 31st, 2013</span></td>
<td align="right" height="30" width="325"><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Having trouble viewing this email? Click Here!</span></td>
</tr>
</table><!-- /Super Top Header -->
<!-- Header -->
<table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF" width="650">
<tr>
<!-- Left Corner -->
<td width="15"><img alt="Left Corner" border="0" height="110" src="http://partspro.com/email/img/corners/tlcorner.gif" width="15" /></td>
<td align="left" valign="middle" width="620">
<table cellpadding="0" cellspacing="0" width="620">
<tr>
<!-- Parts Pro Logo -->
<td width="184">
<img alt="Parts Pro Logo" border="0" height="76" src="http://partspro.com/email/img/logos/partspro.gif" width="184" />
</td>
<td width="3"> </td>
<!-- Newswire Logo -->
<td width="345"><img alt="Parts Pro Newswire" border="0" height="76" src="http://partspro.com/email/img/logos/newswire.gif" width="345" /></td>
<td width="3"> </td>
<td>
<!-- Social Media Top Icons -->
<table border="0" style="padding-left: 1px;" width="83">
<tr>
<!-- Facebook -->
<td>
<img alt="Facebook" border="0" height="37" src="http://partspro.com/email/img/icons/facebook.gif" width="39" />
</td>
<!-- Linked In -->
<td>
<img alt="LinkedIn" border="0" height="37" src="http://partspro.com/email/img/icons/linkedin.gif" width="39" />
</td>
</tr>
<tr>
<!-- Twitter -->
<td>
<img alt="Twitter" border="0" height="37" src="http://partspro.com/email/img/icons/twitter.gif" width="39" />
</td>
<!-- Youtube -->
<td>
<img alt="YouTube" border="0" height="37" src="http://partspro.com/email/img/icons/youtube.gif" width="39" />
</td>
</tr>
</table><!-- /Social Media Top Icons -->
</td>
</tr>
</table>
</td>
<!-- Right Corner -->
<td width="15"><img alt="Right Corner" border="0" height="110" src="http://partspro.com/email/img/corners/trcorner.gif" width="15" /></td>
</tr>
</table><!-- /Header -->
<!-- Featured Image Table -->
<table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF; padding: 0 15px;" width="620">
<tr>
<!-- Featured Image for the Email -->
<td align="center"><img alt="Featured Image" height="200" src="http://partspro.com/email/img/headers/header.png" width="620" /></td>
</tr>
</table><!-- /Featured Image Table -->
<!-- Main Body Table -->
<table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF;" width="650">
<tr>
<!-- Feature 1 -->
<td style="font-size: 12px; color: rgb(122, 122, 122); line-height: 150%; font-family: trebuchet ms; padding: 15px;" valign="top" width="420">
<table border="0" cellpadding="0" cellspacing="0" width="420">
<tr>
<!-- Feature 1 Image -->
<td>
<img alt="News Feature 1" border="0" height="260" src="http://partspro.com/email/img/features/feature1.png" width="420" /><br /><br />
</td>
</tr>
<tr>
<!-- Feature 1 Header -->
<td height="25" valign="top"><span style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; color: rgb(51, 51, 60)">Celebrate 75 Years of Edelbrock!</span></td>
</tr>
<tr>
<!-- Feature 1 Text -->
<td><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Commemorate Edelbrock's 75th Anniversary in style with these limited edition accessories. The unique air cleaner and valve covers are made of die-cast aluminum, which is then polished to a mirror-like finish and complimented with black anodized aluminum inserts that feature a laser etched design. Want a closer look? Click the link below!</span></td>
</tr>
<tr>
<!-- Feature 1 Button -->
<td align="right">
<img alt="Read More" border="0" height="32" src="http://partspro.com/email/img/buttons/readmore.gif" width="116" />
</td>
</tr>
</table><!-- Feature 2 -->
<table border="0" cellpadding="0" cellspacing="0" width="420">
<tr>
<!-- Feature 2 (Image) -->
<td><br />
<img alt="News Feature 2" border="0" height="260" src="http://partspro.com/email/img/features/feature2.png" width="420" /><br /><br />
</td>
</tr>
<tr>
<!-- Feature 2 Header -->
<td height="25" valign="top"><span style="font-family: Helvetica, Arial, sans-serif; font-size: 18px; color: rgb(51, 51, 60)">New Intake for 2012-13 Camaro!</span></td>
</tr>
<tr>
<!-- Feature 2 Text -->
<td><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Airaid's new MXP-Series Cold Air Intake system ups the ante for the 2012-13 V6 Camaro with an additional 14 horsepower and 13 lb-ft of torque, with no aftermarket tuning required! Did we also mention the intake is made in the USA and backed by Airaid's "No Hassle" warranty? Well, it is. So what are you waiting for. Get your order in today! Want some more information? Click the link below!</span></td>
</tr>
<tr>
<!-- Feature 2 Button -->
<td align="right" width=" 5px">
<img alt="Read More" border="0" height="32" src="http://partspro.com/email/img/buttons/readmore.gif" width="116" />
</td>
</tr>
</table>
</td>
<!-- Line Seperator Down the Right Side -->
<td valign="middle" width="1"><img alt="Divider" height="857" src="http://partspro.com/email/img/seperator.gif" width="1" /></td>
<!-- Right Side Bar -->
<td style="font-size: 12px; color: rgb(122, 122, 122); line-height: 150%; font-family: trebuchet ms; padding: 14px;" valign="top" width="169">
<table cellpadding="0" cellspacing="0" width="169">
<tr>
<!-- Right Side Bar Text 1 -->
<td width="169">
<!-- Join the Team -->
<span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>Join the Team!</strong><br />
If you are a local Performance Automotive Aftermarket retailer, you should take a look at all the marketing programs that we have developed to help you sell more products.<br /><br />
<!-- Visit our Site -->
Visit our site at: <br />
www.partspro.com and give us a call.<br /><br />
<!-- Contact -->
A professional account representative is ready to help!<br />
<strong>Phone:</strong> (423) 282-0211<br />
<strong>Email:</strong> jerrys#partspro.com<br /><br /><br />
<!-- What of the Week -->
<img alt="What of the Week?!" border="0" height="92" src="http://partspro.com/email/img/whatoftheweek/whatoftheweek-logo.gif" style="padding: 0;" width="170" /> Right before this, he clothslined the guy at the drive-thru at Wendy's....<br />
<img alt="What?! Of the Week Youtube Image" src="http://partspro.com/email/img/whatoftheweek/whatoftheweek.gif" style="padding: 10px 0 0 0;" /><br /><br />
<!-- What of the Week (Image & Link) -->
<img alt="Watch It!" border="0" height="32" src="http://partspro.com/email/img/buttons/watch.gif" style="padding: 0;" width="170" />
<!-- Ad Space (Image & Link) -->
<img alt="Total Truck Centers" border="0" height="170" src="http://partspro.com/email/img/banners/extraspace.gif" style="padding: 0;" width="170" /></span></td>
</tr>
</table>
</td>
</tr>
</table><!-- /Main Body Table -->
<!-- Gallary of 6 Table -->
<table cellpadding="15" cellspacing="0" style="background-color: #FFFFFF" width="650">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="610"></table>
<table border="0" cellpadding="0" cellspacing="0" width="610">
<tr>
<!-- Minifeature 1 Image -->
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
<img alt="Mini Featured 1" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures1.gif" width="200" />
</td>
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="5"> </td>
<!-- Minifeature 2 Image -->
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
<img alt="Mini Featured 2" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures2.gif" width="200" />
</td>
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="5"> </td>
<!-- Minifeature 3 Image -->
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
<img alt="Mini Featured 3" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures3.gif" width="200" />
</td>
</tr>
<!-- Minifeature 1-3 Headings -->
<tr>
<td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&N AirFilter</strong></td>
<td> </td>
<td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&N AirFilter</strong></td>
<td> </td>
<td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&N AirFilter</strong></td>
</tr>
<!-- Minifeature 1-3 Spacing -->
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<!-- Minifeature 4 Image -->
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
<img alt="Mini Featured 4" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures4.gif" width="200" />
</td>
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="5"> </td>
<!-- Minifeature 5 Image -->
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
<img alt="Mini Featured 5" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures5.gif" width="200" />
</td>
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="5"> </td>
<!-- Minifeature 6 Image -->
<td style="font-size: 12px; color: rgb(122, 122, 122)" width="200">
<img alt="Mini Featured 6" border="0" height="200" src="http://partspro.com/email/img/minifeatures/minifeatures6.gif" width="200" />
</td>
</tr>
<!-- Minifeature 4-5 Headings -->
<tr>
<td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&N AirFilter</strong></td>
<td> </td>
<td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&N AirFilter</strong></td>
<td> </td>
<td align="center" style="font-size: 14px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;"><strong>K&N AirFilter</strong></td>
</tr>
</table>
</td>
</tr>
</table><!-- /Gallary of 6 Table -->
<!-- Rebates Banner Table -->
<table cellpadding="0" cellspacing="0" style="background-color: #FFFFFF" width="650">
<tr>
<!-- Rebates Banner (Image & Link) -->
<td align="center">
<img alt="Rebates Banner" height="100" src="http://partspro.com/email/img/banners/rebatesbanner.gif" width="650" />
</td>
</tr>
</table><!-- /Rebates Banner Table -->
<!-- Footer Table -->
<table cellpadding="15" cellspacing="0" style="background-color: #FFFFFF" width="650">
<tr>
<td width="425">
<table border="0" width="420">
<tr>
<!-- AAM Logo -->
<td style="padding-right: 5px;"><img alt="AAM Logo" border="0" height="77" src="http://partspro.com/email/img/logos/aam.gif" width="122" /></td>
<!-- Copyright -->
<td><span style="font-size: 12px; color:rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">Copyright © 2013 AAM Group. All Rights Reserved.<br />
<!-- Address -->
198 Industrial Park Road. Piney Flats, TN 37686</span><br /><br />
<!-- Subscribe, Forward, Unsubscribe -->
<span style="font-size: 12px; color: rgb(000, 000, 000); font-family:Helvetica,Arial,sans-serif;">Forward l Subscribe l Unsubscribe</span></td>
</tr>
</table>
</td>
<!-- Social Media Mini Links -->
<td align="right" style="background-color: #FFFFFF" valign="bottom" width="125">
<table cellpadding="5" cellspacing="0" width="155">
<tr>
<!-- Facebook -->
<td align="right" width="170">
<img alt="Facebook" border="0" height="32" src="http://partspro.com/email/img/icons/facebook.gif" width="32" />
</td>
<!-- LinkedIn -->
<td align="right" width="170">
<img alt="LinkedIn" border="0" height="32" src="http://partspro.com/email/img/icons/linkedin.gif" width="32" />
</td>
<!-- Twitter -->
<td align="right" width="170">
<img alt="Twitter" border="0" height="32" src="http://partspro.com/email/img/icons/twitter.gif" width="32" />
</td>
<!-- Youtube -->
<td align="right" width="170">
<img alt="YouTube" border="0" height="32" src="http://partspro.com/email/img/icons/youtube.gif" width="32" />
</td>
</tr>
</table>
</td>
</tr>
</table><!-- /Footer Table -->
<!-- Shadow at the bottm -->
<table cellpadding="0" cellspacing="0" style="line-height: 0;" width="650">
<tr height="10">
<td height="10"><img border="0" height="10" src="http://partspro.com/email/img/shadow.png" width="650" /></td>
</tr>
<tr>
<td height="10"></td>
</tr>
</table><!-- /Shadow at the bottm -->
<!-- Who Sent This Email -->
<table cellpadding="0" cellspacing="0" width="650">
<tr>
<td align="center" width="310"><span style="font-size: 12px; color: rgb(122, 122, 122); font-family: Helvetica,Arial,sans-serif;">This email was sent to you from: jonathanf#partspro.com</span><br />
<br /></td>
</tr>
</table><!-- /Who Sent This Email -->
</td>
</tr>
</table>
</body>
</html>
Sorry but no can do. Email is a tough game to get right in the initial code, and outlook adds a TON of code upon initial reception, which gets passed along during forwarding. Have you tried forwarding another companies' HTML newsletter? I haven't had one go through without breaking all the tables, especially from outlook web app.
<style type="text/css">tr {font-size:1px; mso-line-height-alt:0; mso-margin-top-alt:1px;}</style>
Note: Try the above it works fine but do give line-height property to every td element.
References
https://www.campaignmonitor.com/forums/topic/7376/outlook-2013-cell-height-bug-solution/
https://www.emailonacid.com/blog/article/email-development/removing_unwanted_spacing_or_gaps_between_tables_in_outlook_2007_2010
Try removing the align attribute and use CSS text align.
The MS Word html engine of Outlook adds tons of extra html to your emails.
Inserting the following lines to the style element did the trick for me :
/* Outlook, yahoo extra line problem : */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
p {margin:0; padding:0; margin-bottom:0;}
Don't get tempted to hide Outlook html like so:
p.MsoNormal { display: none;}
because while it might work well in your Outlook version, it may screw up emails in other Outlook versions. (Speaking from my own meandering experience)
More info : http://www.emailonacid.com/blog/details/C13/paragraphs_in_html_email
NB use the style section just for this type of corrections. Don't use 'common' CSS to style your elements because GMAIL will not understand it! Use inline CSS instead for every single html element!
Related
When sending the layout to Outlook 2016 it takes the multi-column table section and shrinks the width of the left and right (possibly increasing the width of the spacer center column too).
Have tried to add a spacer image at the bottom of each column to keep the width, but don't want those to have to load/soak up the file size. depending on the number of rows I add.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml "
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name=”x-apple-disable-message-reformatting”>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { max-width: 100% !important; height:auto !important; border: 0; line-height: 100%; outline: none; text-decoration: none; }
table { border-collapse: collapse !important; }
body { margin: 0 !important; padding: 0 !important; width: 100% !important; min-width:100% !important;}
/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
*[class=table]
{
max-width: 600px !important;
width: 100% !important;
border-collapse: collapse !important;
height:auto !important; }
/* MOBILE STYLES */
#media only screen and (max-device-width: 480px)
{
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
width: 100% !important;
max-width: 100% !important;
border-collapse: collapse !important;
height:auto !important;
}
.mobile-wrapper {
width: 100% !important;
max-width: 100% !important;
height:auto !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
.img-social {
width: 15% !important;
max-width: 50% !important;
height: auto !important;
}
*[class=stack]
{
display: block !important;
}
}
/* ANDROID CENTER FIX */
div[style*="margin: 16px 0;"] { margin: 0 !important; }
#actual-table { border-collapse: collapse; }
#actual-table td {
width: 20%;
padding: 10px;
vertical-align: top;
}
#actual-table td:nth-child(even) {
background: #ccc;
}
#actual-table td:nth-child(odd) {
background: #eee;
}
</style>
</head>
<body style="text-align:center; margin: 0 !important; padding: 0; !important;" >
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="100%" background="bg.jpg" style="background-size: cover; padding: 0;background: #999999;" bgcolor="#999999" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" >
<tr>
<td align="center" valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="left" valign="top" style="padding-top:8px;padding-bottom:5px;">
<font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="1">View in browser</font> <font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="1">Link to Forward To A Friend</font> </td></tr>
</table></td></tr></table>
<table cellpadding="0" cellspacing="0" width="100%"><tr><td> <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td align="center" valign="top" style="padding:0;">
<img src="" class="banner" style="display:block;" />
</td>
</tr>
</table></td></tr></table>
</td>
</tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="center" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F4BB8A;" bgcolor="#F4BB8A">
<font face="Times New Roman, Times, serif" color="#000000" font="" size="4"><strong>Add A Headline To Announce Your Main Topic</strong></font></td></tr>
<tr>
<td class="stack" align="left" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="3">
Add a brief message. If readers need to know more than you can fit here, add a link to an outside resource that covers the rest.<br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 580px WIDE.
</font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</table></td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #999999;" bgcolor="#999999" >
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;" >
<tr>
<td align="center" valign="top" style="font-size:0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" id="actual-table">
<tr>
<td align="left" valign="top" width="280" style="background-color: #999999;" bgcolor="#999999" >
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%; height:100%;background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="280" style="max-width:280px;" class="max-width">
<tbody>
<tr>
<td align="center" valign="top" style="padding-bottom:10px;background-color:#999999;" bgcolor="#999999"> </td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#393B63;" bgcolor="#393B63">
<font face="Times New Roman, Times, serif" color="#F6F7F3" size="3"><strong>I ♥ Email</strong></font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" size="2">Include article copy. Be sure to make the articles short and concise. People tend to only read a couple of paragraphs at a time.<br />
<br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 260px WIDE.<br />
<br />
When editing sections from copied mailings, delete old messages by clicking the red X, move messages up or down in order of importance by clicking the blue up and down arrows and add new sections by clicking the add section here (green '+' icon).</font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</tbody>
</table></td></tr></table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
<td width="20" style="padding:0; font-size: 1px;"> </td>
<td align="right" valign="top" width="280" style="background-color: #999999;" bgcolor="#999999" >
<![endif]-->
<div style="display:inline-block; max-width:50%; min-width:280px; vertical-align:top; width:100%; height:100%;background-color: #999999;" bgcolor="#999999" class="mobile-wrapper">
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="280" style="max-width:280px;" class="max-width">
<tbody>
<tr>
<td align="center" valign="top" style="padding-bottom:10px;background-color:#999999;" bgcolor="#999999"> </td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#393B63;" bgcolor="#393B63">
<font face="Times New Roman, Times, serif" color="#F6F7F3" size="2"><strong>I ♥ Email</strong></font></td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#F6F7F3;" bgcolor="#F6F7F3"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" size="2">Include article copy. Be sure to make the articles short and concise. </font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</tbody>
</table></td></tr></table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#999999" style="background: #999999;padding: 0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="left" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#F4BB8A;" bgcolor="#F4BB8A">
<font face="Times New Roman, Times, serif" color="#000000" font="" size="3"><strong>Design emails people love</strong></font></td></tr>
<tr>
<td class="stack" align="!3BODYFONTALIGN!" valign="top" style="padding-top:10px;padding-right:10px;padding-left:10px;padding-bottom:10px;background-color:#FFFFFF;" bgcolor="#FFFFFF"><font face="Arial, Verdana, Helvetica, sans-serif" color="#000000" font="" size="2">Include article copy. Be sure to make the articles short and concise. People tend to only read a couple of paragraphs at a time.<br /><br />
THE MAXIMUM SIZE FOR IMAGES IN THIS SECTION IS 580px WIDE.
</font>
</td>
</tr>
<tr>
<td align="left" valign="top" style="padding:10px;background-color:#999999;" bgcolor="#999999">
</td>
</tr>
</table>
</td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" bgcolor="#0F0D35" style="background: #0F0D35;padding: 0;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table cellpadding="0" cellspacing="0" width="100%"><tr><td><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tr>
<td class="stack" align="center" valign="top" style="padding:10px;background-color:#0F0D35;" bgcolor="#0F0D35">
<font face="Arial, Verdana, Helvetica, sans-serif" color="#FFFFFF" font="" size="2"></font></td>
</tr>
</table></td></tr></table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<tr>
<td align="center" height="100%" valign="top" width="100%" style="background-color: #0F0D35;" bgcolor="#0F0D35" class="mobile-wrapper">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top" width="600">
<![endif]-->
<table width="600" border="0" cellspacing="5" cellpadding="5"> <tr> <td colspan="3"> <hr align="left" width="100%" noshade> <p> <font size="-2" face="Verdana, Arial, Helvetica, sans-serif" color= "#FFFFFF"><strong>Generated by</strong></font> <img src= "https://images.marketvolt.com/mv_gif_transparent.gif" width="60" height="55" hspace="4" vspace="0" border="0" align="middle"><font size="-2" face= "Verdana, Arial, Helvetica, sans-serif" color= "#FFFFFF"><strong>Learn more</strong></font> </p> </td> </tr></table><img width="1" height="1" src="https://images.marketvolt.com/space.gif">
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
After a couple days of trying to figure this out via my own research, I've officially given up and have come to you experts for help.
I have a client who is requesting the following image be used for their email signature with phone number, email and website clickable, so I've resorted to slicing it up and going that route because image mapping isn't working when being sent from his Mac, although it works on his Mac when I send it via Gmail.
They are using Outlook on a Mac for their business. I'm testing this on Outlook via PC and on other clients via EmailOnAcid before delivering the end-product and having the following problems:
Outlook sent to Outlook
Outlook to Gmail
Outlook to Outlook w/ Line-Height: 0
Outlook to Gmail w/ Line-Height: 0
So essentially, everything initially looks great when sent from Outlook to Outlook, but those annoying horizontal gaps occur in Outlook to Gmail.
When I do the line-height trick, Outlook to Outlook now collapses upon itself while Gmail is now looking good.
I've tried all the tricks here - https://www.emailonacid.com/blog/article/email-development/12_fixes_for_the_image_spacing_in_html_emails - and elsewhere to no avail.
FYI The code might not be very consistent anymore because I've tried a bunch of different things, but it should give you an idea. Also, the resulting image is a bit over twice the size as what I need due to making things high-resolution in the end.
Any help would be super-appreciated... Thanks!
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Untitled Document</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Try style="border-collapse: collapse !important;" on every TD element and table. That will be your first step.
<!DOCTYPE html>
<html>
<head>
<meta>
<title>Untitled Document</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td height="49px" style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td>
<td height="49px" style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse !important;">
<tr>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td>
<td style="border-collapse: collapse !important;"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have had some luck with this template in Outlook before. Frankly, I am not sure why. What I do to make it work is to open this in Word, copy and paste into Outlook. Dunno, Give it a try?
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Email Signature</title>
<style type="text/css">
body {
background-color: #ffffff;
margin: 0;
padding: 0;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
line-height: 5px;
top: auto;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img {
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
color: #42413C;
text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
.container {
background-color: #FFF;
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements within this div have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
*/
.content {
padding: 0px 0;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.container .content div center a {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<blockquote>
<table border="0" cellpadding="0" cellspacing="0" width="980">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_01.jpg" style="display: block;"></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_02.jpg" style="display: block;"></td>
<td height="49px"><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_03.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_04.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_05.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_06.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_07.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_08.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_09.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_10.jpg" style="display: block;"></td>
<td><img alt="Example Image" border="0" src="https://makalla.com/wp-content/uploads/2017/10/Rebuilt-Signature-v4_11.jpg" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
</blockquote>
</div>
</div>
</body>
</html>
Facing problems with Thymeleaf Template Engine.
I need to add some dynamic content to the html page.
I've a map like this
Map<String, String> info = new HashedMap<String, String>();
info.put("user_name", "username");
info.put("host_user_name", "host_user_name");
info.put("title", "Element_title");
info.put("url", "https://www.google.com");
info.put("conv_url","/#/home/" + "23243242" + "/services?fid=543545"&fview=conversation")
and I am adding the info in the map to the context
MimeMessage message = sender.createMimeMessage();
MimeMessageHelper helper = new MimeMessageHelper(message, true);
Context context = new Context();
System.out.println("---------0------------");
info.forEach((key, value) -> {
context.setVariable(key, value);
});
String template = templateEngine.process("my-html", context);
my-html is like this
<table width="115" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td align="right" valign="top" class="mob_center" style="padding:15px">
<a target="_blank" style="color: #596167; font-family: Arial, Helvetica, sans-serif; font-size: 13px;">
<font face="Arial, Helvetica, sans-seri; font-size: 13px;" size="3" color="#596167">
<img src="${url}/static/images/logo.png" width="150" height="auto" alt="Logo" border="0" style="display: block;" /></font></a>
</td>
</tr>
</table>
<table style="width:100%">
<tr>
<td style="font-size: 12px; padding-top:5px; color: #000; line-height: 16px; text-align: left;" th:inline="text">
<span style="font-weight:600; display:block; " th:title="
${host_user_name}">[[${host_user_name}]] </span>[[${title}]]
</td>
</tr>
<tr>
<td width="40" valign="top"> </td>
<td>
<table style="width:100%">
<tr>
<td style="font-size: 13px; color: #fff; line-height: 16px; text-align: left;" th:inline="text">
<a title="" style="color:#000; text-decoration:none; font-weight:500; font-size:12px;">[[${followers}]] followers</a> | <a title="" style="color:#000; text-decoration:none; font-weight:500; font-size:12px;" th:inline="text">[[${replies}]] replies</a>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<img src="${url}/static/images/Join.png" title="" alt="Join the Conversation" />
</td>
</tr>
</table>
inline text is modifying for me, but how to change href and src attribute values.
<td colspan="2" style="text-align:center">
<img src="${url}/static/images/Join.png" title="" alt="Join the Conversation" />
</td>
This should be replaced by
<td colspan="2" style="text-align:center">
<img src="https://www.googl.com/static/images/Join.png" title="" alt="Join the Conversation" />
</td>
Can anyone help me on this?
Please, read this documentation.
Particularly, look at this example in this documentation :
<a th:href="#{/order/details(id=${order.id},action=(${user.admin} ? 'show_all' : 'show_public'))}">
You have to use th:href
This is Working for me
<tr>
<td colspan="2" style="text-align:center">
<a th:href="#{${url}+${conv_url}}"><img th:src="#{${diva_url+'/static/images/Join.png'}}" title="" alt="Join the Converstaion" /></a> &
</tr>
I have an HTML email that has a creates a mobile version by using {display:none!important;} and has a media query that reveals it using {display:block!important;}.
When forwarded in Outlook, the email breaks and displays both images leaving a huge gap on the right side next to the mobile image.
Has anyone found a coding solution that would maintain the appearance when forwarded?
HTML
<table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td class="vanish">
<table width="570" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td>
<a href="#" style="color: #999; text-decoration: none;">
<img src="Desktop.jpg" width="205" height="171" alt="" class="deviceWidth" style="display: block; background-color: #343434;" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End One Column -->
<!-- Houdini Start -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth">
<tr>
<td style="display: none; visibility: none; width: 0px; height: 0px;" class="houdini">
<a href="#" style="color: #999; text-decoration: none;">
<img style="display: none; visibility: hidden; width: 0px; height: 0px; border: 0px;" src="Mobile.jpg" alt="" class="houdini" /></a>
</td>
</tr>
</table>
<!-- Houdini End -->
I'm coding a HTML email newsletter and I'm getting very weird spacing issues for my tables in Outlook 2007 and 2010
My code which works fine in all other clients is here:
<table width="575" align="center" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#0054a4" style="padding-left:20px; padding-right:20px; padding-top:20px; padding-bottom:20px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px">
<a href="http://www.lgfhfghfhfhfghf" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 34px; font-style:normal; color:#ffffff; text-decoration:none;">
<center>
<span style="font-weight:bold;">register</span> for <span style="font-style:lighter;color:#fce000;">mkk</span><span style="color:#fce000; font-weight:bold;"> 56565464646 </span><span style="font-weight:normal; text-decoration:underline;">click here</span></strong>
</center>
</a>
</td>
</tr>
<tr>
<td bgcolor="#fce000" style="padding-left:20px; padding-right:20px; padding-top:10px; padding-bottom:15px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px"><a href="http://www.fgdfgdg" target="_blank" style="font-family:Myriad Pro, Verdana, Georgia; font-size:30px; line-height: 30px; font-style:normal; color:#ffffff; text-decoration:none;">
<center>
<span style="font-style:lighter;color:#0054a4;">lll</span><span style="color:#0054a4; font-weight:bold;"> ffgfgf </span><span style="font-weight:normal; color:#000000; text-decoration:none;">is proudly sponsored by</span></strong>
</center>
</a></td>
</tr>
<tr>
<td bgcolor="#0054a4" style="padding-left:0px; padding-right:0px; padding-top:0px; padding-bottom:0px; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px">
<img name="fgdgfg" src="http://fgfdgdgdg" width="575" height="76" style="font-size:20px; color:#fce000;" alt="fgfdgdfgdfg" border="0"/>
</td>
</tr>
</table>
<table bgcolor="#0055a5" align="center" width="575" border="0" cellspacing="0" cellpadding="10">
<tr>
<td align="left" bgcolor="#0055a5" valign="top">
<img src="http://www.fdgfdgdfgdfgdf.png" height="50" width="50" alt="gggggg" align="top" border="no" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" />
</td>
<td align="right" bgcolor="#0055a5" valign="top" style="margin-top:0px;margin-bottom:0px;margin-right:0px;margin-left:0px;padding-top:10px;padding-bottom:10px;padding-right:10px;padding-left:30px;font-family:Arial,Helvetica,sans-serif;font-size:12px;line-height:20px;color:#fce000;" >
<span style="font-weight:bold;color:##fce000;" >gfrtryrtytryrtyrty</span><br />
rtrtrtrtertretertetertertertertertertertetert <font style="text-decoration:none;">tertetertetetet</font> www.fgfgdfgfgd/expo<br />
<strong> To unsubscribe from this newsletter </strong><a href="http://$UNSUB$" style="color:#fce000; font-weight: bold; text-decoration: underline" >click here</a>
</td>
</tr>
</table>
Screenshot of the weirdness:
Screenshot of working email:
Take a look at this page:
http://www.campaignmonitor.com/css/
They have a pdf that contains what works in mailclients, css, html and more.
Here's a helpful list of quirks in Outlook 2007, 2010 and 2013 in how it displays HTML emails: http://www.emailonacid.com/blog/details/C13/tips_and_tricks_outlook_07-13#outlook07-13_tip16
The page includes this tip, which fits with the way you've coded the table:
Avoid using “margin” or “padding” CSS properties in your TABLE tag.
Cellpadding and Cellspacing attributes are generally safe but margin
or padding will often be added to every TD within the table.
Hope that helps get to the bottom of it.