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>
have problem like in title. Have email template, everything are ok, but background image doesn't work on outlook. Unfortunately most people in my country use it. Below my code:
<!--#subject Email - Header #-->
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
{{var non_inline_styles}}
<!-- Start Image Background -->
<table class="image-background" cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="22262b" background="http://met.ivycommerce.eu/glamoura_main_image.jpg">
<tr>
<td class="image-background" align="center" style="background: url('http://met.ivycommerce.eu/pattern.png') 0 0 repeat">
<table class="container-table" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="separator-50" height="50"> </td>
</tr>
<!-- Start Three Column -->
<tr>
<td>
<table class="container-table" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="center" align="center">
<a href="{{store url=""}}">
<img style="display: block; margin: 0 auto;"
{{if logo_width}}
width="{{var logo_width}}"
{{else}}
width="165"
{{/if}}
{{if logo_height}}
height="{{var logo_height}}"
{{else}}
height=""
{{/if}}
src="{{var logo_url}}"
alt="{{var logo_alt}}"
border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<!-- Start Three Column -->
<tr>
<td class="separator-30" height="30"> </td>
</tr>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="60">
<tr>
<td class="separator-line" bgcolor="#ffffff" height="1"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="separator-30" height="30"> </td>
</tr>
<tr>
<td class="colored-heading" align="center" height="28">
<div style="line-height: 28px;">Nasza Misja</div>
</td>
</tr>
<tr>
<td class="heading" align="center" height="28">
<div style="line-height: 28px;">To uśmiechnięci Klienci</div>
</td>
</tr>
<tr>
<td class="separator-10" height="10"> </td>
</tr>
<tr>
<td class="sub-heading" align="center" height="24">
<div style="line-height: 24px;">Dziękujemy, że dołączyłeś do wielkiego grona Bionaturalnych.</div>
</td>
</tr>
<tr>
<td class="separator-50" height="50"> </td>
</tr>
<tr>
<td align="center">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="button" align="center" valign="middle" height="38" width="140">
Wejdź Do Sklepu
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="separator-50" height="50"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Image Background -->
<!-- Begin wrapper table -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
<tr>
<td valign="top" class="container-td" align="center">
<table cellpadding="0" cellspacing="0" border="0" align="center" class="container-table">
<tr>
<td valign="top" class="top-content">
<!-- Begin Content -->
I was try with some code, but not success :( when background are ok, rest align left, but have to be center. Can somebody help me?
Outlook generally requires old school type programming and has a lot of things that are not permitted in email that are allowed in website programming. This means that the style works best when included in the header and background images cannot be used. If you want to use a background image, say behind a title for example, you would need to create the title and background as a single image to insert as you would any other image. The downside to this is that Outlook will not download images unless the user specifies to do so. Since a majority of your users use Outlook, best practices says to program for them and then test it across all other browsers. Here is a list of issues identified by Mailchimp, an email service provider, that specifically pertain to Outlook and what fixes, if available, can be performed. http://kb.mailchimp.com/campaigns/previews-and-tests/my-campaign-looks-bad-in-outlook.
In reviewing your code provided, here are some other things that I think you might want to consider:
Use fixed measurements instead of percentages;
Instead of using code for spacing, use a 1px x 1px transparent or background colored image that you can adjust the height and the width of to make the space work the way you want;
Put all styles at the top in css format, for example:
<style type="text/css">
body{
margin:0;
padding:0;
font-family:"Trebuchet MS", arial, sans-serif;
}
</style></head>
I have been programming email newsletters for almost ten years now and the most simple, basic code works the best when the majority of your users have Outlook. Finally, I recommend that you always run your code through an html validator, such as https://validator.w3.org/ to check your code. Even the smallest error can result in unanticipated results with Outlook or other browsers.
Zydol,
To make this work, you will need to use VML to create an object and assign the background image to that. You can read more about this technique here: https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds
I do believe Bulletproof Backgrounds is the answer you're looking for!
https://backgrounds.cm/
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!
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.