Can't get rid of extra white spaces between images in email - html

I've had this problem with white gaps in-between my email images before and after searching through many forum questions I did eventually find a solution, which as it turns out is not one anymore as to my dismay, the problem has returned.
I added display: block; to all of my images and border-collapse: collapse; border-spacing: 0; and padding: 0; to my table which other forums have suggested.
I sent this same email two weeks ago with the above additions and it worked great with no spaces. After trying to test it again today, the white gaps between my images are back when I look at my email in Outlook and Gmail, but not when viewing it on an iPad or on my website. Also on jsfiddle it looks fine.
I am by no means an expert at this, but in an attempt to save my sanity I would greatly appreciate any insight into why this keeps happening!
<p style="text-align: left;">Never miss an email by adding info#creativeoutreach.com to your address book! If this email is not displaying correctly, please <a title="Click here for images" href="http://creativeoutreach.com/newsletters/show/Deeper-Wk-1" target="_blank">click here</a>.</p>
<style><!--
table { border-collapse: collapse; border-spacing: 0; }
td,th {padding: 0}
--></style>
<table id="Table_01" border="0">
<tbody>
<tr>
<td colspan="10"><img style="display: block;" title="" alt="" src="https://photos.osmek.com/126649.o.png" height="783" width="800" /></td>
</tr>
<tr>
<td rowspan="2"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126394.o" height="111" width="87" /></td>
<td rowspan="2"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126395.o" height="111" width="82" /></td>
<td rowspan="2"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126396.o" height="111" width="81" /></td>
<td rowspan="2"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126397.o" height="111" width="81" /></td>
<td rowspan="2"><img style="display: block;" alt="" src="http://photos.osmek.com/get/126398.o" height="111" width="198" /></td>
<td><a onmouseover="window.status='Facebook'; return true;" onmouseout="window.status=''; return true;" href="https://www.facebook.com/CreativeOutreachMinistries" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126399.o" height="63" width="59" /></a></td>
<td><a onmouseover="window.status='Twitter'; return true;" onmouseout="window.status=''; return true;" href="http://twitter.com/#!/CO_Ministries" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126400.o" height="63" width="50" /></a></td>
<td><a onmouseover="window.status='LinkedIn'; return true;" onmouseout="window.status=''; return true;" href="http://www.linkedin.com/company/creative-outreach-ministries" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126401.o" height="63" width="50" /></a></td>
<td><a onmouseover="window.status='YouTube'; return true;" onmouseout="window.status=''; return true;" href="http://www.youtube.com/user/COMinistriesTX" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126402.o" height="63" width="50" /></a></td>
<td><a onmouseover="window.status='Pinterest'; return true;" onmouseout="window.status=''; return true;" href="http://pinterest.com/coministries/" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126403.o" height="63" width="62" /></a></td>
</tr>
<tr>
<td colspan="5"><a onmouseover="window.status='Homepage'; return true;" onmouseout="window.status=''; return true;" href="http://creativeoutreach.com/" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126404.o" height="48" width="271" /></a></td>
</tr>
</tbody>
</table>
<p>Insight to Life is a Creative Outreach ministry. Each faith-based class will teach about solutions to daily living and will provide an avenue to connect with others and become a part of the Creative Outreach family!</p>
<p><a title="Insight to Life" href="http://creativeoutreach.com/ministries/show/Insight-To-Life" target="_blank"><img alt="" src="http://photos.osmek.com/get/74999.thumb.png" height="46" width="180" /></a></p>
<p style="text-align: left;">Confidentiality Note: The information contained in this message, and any attachments, may contain confidential and/or privileged material. It is intended solely for the person or entity to which it is addressed. Any review, retransmission, dissemination, or taking of any action in reliance upon this information by persons or entities other than the intended recipient is prohibited. If you received this in error, please contact the sender and delete the material from all computers.</p>
thank you!

Change
<table id="Table_01" border="0">
to
<table id="Table_01" border="0" cellspacing="0" cellpadding="0">
BTW Gmail strips embedded CSS (ie. <style> tags) so make sure the styles are inline as much as possible (other than media queries for responsive emails).

Related

Custom social share icons in Mailchimp campaign

I'm in the process of creating a custom mailchimp template, but I've hit a snag with some social media buttons.
*|TWITTER:TWEET|* *|FACEBOOK:LIKE|*
outputs this:
What I need is this:
Since this is a custom template, I can't drag and drop prefab icons into the design. Here are some of the alternate methods I've tried:
<img src="~fb_icon~">
<img src="~tw_icon~">
When sent, the url is stripped from the image or returns nothing between the quotes.
If any mailchimp experts can offer some insight, I'd appreciate it.
I think you should consider using content encoding merge tags, such as |HTML:YOUR_MERGETAG|
Here a useful link
http://dev201.nl/mailchimp-merge-tags-cheatsheet/
This worked for me
<!--my sharer-->
<p>
<table width="300" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="35" align="left" valign="middle"><img height="30" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-twitter-96.png" width="30" /></td>
<td width="58" align="left" valign="middle"> Tweet</td>
<td width="35" align="left" valign="middle">
<img src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-facebook-96.png" width="30" height="30" />
</td>
<td width="80" align="left" valign="middle"> Facebook</td>
<td width="35" align="left" valign="middle"><img height="30" src="https://cdn-images.mailchimp.com/icons/social-block-v2/color-linkedin-96.png" width="30" /></td>
<td width="65" align="left" valign="middle"> Linkedin</td>
</tr>
</tbody>
</table>
</p>
<!--ends my sharer-->

HTML Email Office 365 (OWA) Table Rendering Error

I am creating an email signature which is made up of a sliced image. Here is how the image should fit together:
Below is the code:
<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td colspan="4" height="82">
<img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td>
</tr>
<tr>
<td rowspan="2" height="54">
<img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td>
<td height="40">
<img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td>
<td height="40">
<img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td>
<td rowspan="2" height="54">
<img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td>
</tr>
<tr>
<td colspan="2" height="14" style="line-height: 14px;">
<img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td>
</tr>
</table>
This renders perfectly in nearly all mail clients apart from Office365 (in any browser). View screenshots for all clients/browsers https://www.emailonacid.com/app/acidtest/viewresult/tUjH3Kk7JSzaD5D0F6X2agbPFHRkUvVfkGetyDv2hMgll. The below screenshot shows Office365 in IE11.
I can not seem to fix this whitespace issue nor the outline around the linked images. I have tried both the fixes listed here http://www.emailonacid.com/blog/details/C13/two_fixes_for_image_spacing_in_outlook_web_app_owa but neither of them have worked. align="left" fixed it in Office365 in both Chrome and Firefox but it remained broken in other browsers moreover it broke the layout in many other clients. It was a similar story for the div fix. See screenshots for all clients/browsers with align left 'fix' here https://www.emailonacid.com/app/acidtest/viewresult/SyapFGGm5JKUgTdZEs6L7oqlmHLOuQqMcFQGM307uA7LH
Does anyone know how to resolve this issue without causing issues for the other clients/browsers?
Many Thanks
when using images you need to also use the align = rule to remove the spaces in owa
It is a huge pain
<img src="img/Rectangle_2.png" width="25" height="54" alt="" align="center" style="display: block;">
if it is just solid colors you should stick to background color for tables
I was able to replicate your issue. To fix it, remove all the hard returns in your code; it looks like the signature html editor adds in multiple non-breaking spaces ( ) that causes the image alignment issues. Note how all the code appears on one line below; it will wrap as necessary in the html editor.
<table width="406" height="136" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td colspan="4" height="82"> <img src="img/Rectangle_1.png" width="406" height="82" alt="" style="display: block;"></td></tr><tr> <td rowspan="2" height="54"> <img src="img/Rectangle_2.png" width="25" height="54" alt="" style="display: block;"></td><td height="40"> <img src="img/Rectangle_3.png" width="134" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td><td height="40"> <img src="img/Rectangle_4.png" width="125" height="40" alt="" style="display: block; border:0; outline: none; text-decoration: none;"></td><td rowspan="2" height="54"> <img src="img/Rectangle_5.png" width="122" height="54" alt="" style="display: block;"></td></tr><tr> <td colspan="2" height="14" style="line-height: 14px;"> <img src="img/Rectangle_6.png" width="259" height="14" alt="" style="display: block;"></td></tr></table>
One other thing - the images that are hyperlinked (inside <a> tags) need a border attribute set to zero instead of setting it via inline CSS.
<a href=""><img src="" width="" alt="" border="0" style="display:block;"/>

How to lock a variety of images together in HTML so that they appear as one image (no CSS)

I'm doing up a newsletter for my non-profit organization and I'm trying to code a new banner in place. I can't use an image map because that won't render properly in many email clients, so I've had to chop up the image and hyperlink the various sections. I also don't believe I can use CSS since this is being distributed as an email (though I'm open to using inline style if it will work with email clients).
The problem I'm encountering is that many email clients seem to place a gap of several pixels between the top image and the 8 chopped up images on the next row when they should be rendering flush, with a 0 pixel gap. Is there any way I can group these images together so that they always render together as one image?
Here is my code:
<!-- END MessageViewer link --><!-- BEGIN banner and buttons -->
<tr>
<td style="border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; border-right: #ffffff 1px solid;" valign="top">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_1-1.png" border="0" alt="Nature Canada e-Newsletter" width="600" height="135" />
<br />
<a title="Donate to Nature Canada today!" href="http://supporter.naturecanada.ca/site/Donation2?df_id=3560&3560.donation=form1" target="_self"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-1.png" border="0" alt="Donate today!" width="77" height="33" /></a><a title="Join Nature Canada" href="http://naturecanada.ca/how_support_become.asp" target="_self"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-2.png" border="0" alt="Join Nature Canada today!" width="43" height="33" /></a><a title="NatureCanada.ca" href="http://naturecanada.ca/" target="_self"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-3.png" border="0" alt="Visit our website" width="99" height="33" /></a><a title="Share with a friend" href="http://supporter.naturecanada.ca/site/TellAFriend" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-4.png" border="0" alt="Share this newsletter with a friend" width="144" height="33" /></a><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-5.png" border="0" alt="Nature Canada e-Newsletter" width="143" height="33" /><a title="Follow us on Twitter!" href="https://twitter.com/naturecanada" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-6.png" border="0" alt="Follow us on Twitter!" width="30" height="33" /></a><a title="Like us on Facebook!" href="https://www.facebook.com/NatureCanada" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-7.png" border="0" alt="Like us on Facebook!" width="29" height="33" /></a><a title="Subscribe to our YouTube channel!" href="http://www.youtube.com/user/NatureCanada1" target="_blank"><img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-8.png" border="0" alt="Subscribe to our YouTube channel!" width="35" height="33" /></a>
</td>
</tr>
<!-- END banner and buttons --><!-- BEGIN main content area -->
Try making the new row a new row by replacing <br> with </td></tr><tr><td>. And set cellpadding="0" and cellspacing="0" inside the <table>. Besides that, you may want to use an email code validator like Mally or emailonacid (look for email optimizer).
From my experience, image maps seem to work fine. Note: See comments below regarding image maps.
If you want to break the images up though, here is the way. Note each image is in it's own table cell and has some inline css, most importantly display:block;.
<!-- END MessageViewer link -->
<!-- BEGIN banner and buttons -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_1-1.png" border="0" alt="Nature Canada e-Newsletter" width="600" height="135" style="margin: 0; border: 0; padding: 0; display: block;" />
</td>
</tr>
<tr>
<td width="77">
<a title="Donate to Nature Canada today!" href="http://supporter.naturecanada.ca/site/Donation2?df_id=3560&3560.donation=form1" target="_self">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-1.png" border="0" alt="Donate today!" width="77" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="43">
<a title="Join Nature Canada" href="http://naturecanada.ca/how_support_become.asp" target="_self">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-2.png" border="0" alt="Join Nature Canada today!" width="43" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="99">
<a title="NatureCanada.ca" href="http://naturecanada.ca/" target="_self">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-3.png" border="0" alt="Visit our website" width="99" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="144">
<a title="Share with a friend" href="http://supporter.naturecanada.ca/site/TellAFriend" target="_blank">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-4.png" border="0" alt="Share this newsletter with a friend" width="144" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="143">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-5.png" border="0" alt="Nature Canada e-Newsletter" width="143" height="33" style="margin: 0; border: 0; padding: 0; display: block;" />
</td>
<td width="30">
<a title="Follow us on Twitter!" href="https://twitter.com/naturecanada" target="_blank">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-6.png" border="0" alt="Follow us on Twitter!" width="30" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="29">
<a title="Like us on Facebook!" href="https://www.facebook.com/NatureCanada" target="_blank">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-7.png" border="0" alt="Like us on Facebook!" width="29" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
<td width="35">
<a title="Subscribe to our YouTube channel!" href="http://www.youtube.com/user/NatureCanada1" target="_blank">
<img src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-8.png" border="0" alt="Subscribe to our YouTube channel!" width="35" height="33" style="margin: 0; border: 0; padding: 0; display: block;" /></a>
</td>
</tr>
</table>
<!-- END banner and buttons -->
<!-- BEGIN main content area -->
Also, put this in your email head:
<style type="text/css">
/* Client-specific Styles */
#outlook a {padding:0;}
table td {border-collapse: collapse;}
</style>
Just note that with the 'many images' technique, when someone forwards your email out of Outlook, there is an unavoidable gap created between the rows. It is better to avoid horizontally splitted images because of this.
The <br> is probably creating the gap.
Set the width of the TD to match the width of the banner image, and remove the <br>. This will force the next line to wrap automatically.
You can use CSS, but it needs to be inline.
For more complete info, see Campaign Manager CSS Guide.
Here is the solution: http://jsfiddle.net/TgTJ6/
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="8"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_1-1.png" border="0" alt="Nature Canada e-Newsletter" width="600" height="135" /></td>
</tr>
<tr>
<td><a title="Donate to Nature Canada today!" href="http://supporter.naturecanada.ca/site/Donation2?df_id=3560&3560.donation=form1" target="_self"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-1.png" border="0" alt="Donate today!" width="77" height="33" /></a></td>
<td><a title="Join Nature Canada" href="http://naturecanada.ca/how_support_become.asp" target="_self"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-2.png" border="0" alt="Join Nature Canada today!" width="43" height="33" /></a></td>
<td><a title="NatureCanada.ca" href="http://naturecanada.ca/" target="_self"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-3.png" border="0" alt="Visit our website" width="99" height="33" /></a></td>
<td><a title="Share with a friend" href="http://supporter.naturecanada.ca/site/TellAFriend" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-4.png" border="0" alt="Share this newsletter with a friend" width="144" height="33" /></a></td>
<td><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-5.png" border="0" alt="Nature Canada e-Newsletter" width="143" height="33" /></td>
<td><a title="Follow us on Twitter!" href="https://twitter.com/naturecanada" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-6.png" border="0" alt="Follow us on Twitter!" width="30" height="33" /></a></td>
<td><a title="Like us on Facebook!" href="https://www.facebook.com/NatureCanada" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-7.png" border="0" alt="Like us on Facebook!" width="29" height="33" /></a></td>
<td><a title="Subscribe to our YouTube channel!" href="http://www.youtube.com/user/NatureCanada1" target="_blank"><img style="display:block"src="http://supporter.naturecanada.ca/images/content/pagebuilder/enews_banner_2-8.png" border="0" alt="Subscribe to our YouTube channel!" width="35" height="33" /></a></td>
</tr>
I just made some <tr> and <td>'s, a colspan="8" and display:block on all of the images. This is the way to do it. Dont use <br> between images, some email clients just removes them, when theres no text nearby

HTML Email Displaying incorrectly Outlook 2007/10, additional space between images

I am developing an email campaign however find myself running into an issue specific to Outlook 2007/10 only. I presume this is due to the fact it uses the Word rendering engine. This code works well on a significant majority of other clients tested using Litmus.
The total width of the table is 650px, each row contains 3 images making up a total width of 650px.
Image2 http://www.hallwaystudios.com/screenshots/uploads/uMaf2YsD.png
This is Outlook 2010 and notice the highlighted image is exhibiting a small gap between the it and the image to the right. This image is in it's own table cell and I have applied display: block CSS to it.
My entire codebase can be found below. This email is being sent in campaign monitor.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>We've Moooved...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
HTML,BODY {
margin: 0;
padding: 0;
}
IMG {
display: block;
padding: 0;
margin: 0;
vertical-align:bottom;
}
TABLE,TR,TD {
border-collapse: collapse;
}
P {
margin: 5px 0px;
}
</style>
</head>
<body bgcolor="#ffffff">
<table width="100%" cellpadding="0" cellspacing="0" align="center" background="images/background.jpg" bgcolor="#282828" style="padding-bottom: 20px; background-color:#282828; width: 100%">
<tr>
<td style="color: #FFFFFF; text-align: center; padding: 10px;" align="center">
<font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 12px; line-height: 20px;">
Having trouble viewing this email? <webversion style="color:#FFFFFF">Click here to view it in your browser</webversion>
</font>
</td>
</tr>
<tr><td>
<table border="0" cellpadding="0" cellspacing="0" width="650" align="center" style="margin: 0 auto; text-align: center; background-color: #000" bgcolor="#000">
<tr>
<td><img src="images/spacer.gif" width="26" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="3" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="84" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="41" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="75" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="9" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="83" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="42" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="13" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="53" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="18" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="6" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="68" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="19" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="29" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td rowspan="3" colspan="10"><span></span><img name="campaign_r1_c1" src="images/campaign_r1_c1.png" width="416" height="110" border="0" alt="" style="display: block" /></td>
<td colspan="8" bgcolor="#000000"><span></span><img src="images/spacer.gif" width="1" height="39" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="8"><span></span><img name="campaign_r2_c11" src="images/campaign_r2_c11.jpg" width="234" height="34" border="0" alt="" style="display: block" /></td>
<td><span></span><img src="images/spacer.gif" width="1" height="34" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="8"><span></span><img name="campaign_r3_c11" src="images/campaign_r3_c11.jpg" width="234" height="37" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r4_c1" src="images/campaign_r4_c1.jpg" width="650" height="157" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td rowspan="3" align="right" width="26"><span></span><img name="campaign_r5_c1" src="images/campaign_r5_c1.jpg" width="26" height="408" border="0" alt="" style="display: block" /></td>
<td rowspan="3" colspan="10" valign="top" background="images/campaign_r5_c2.jpg" bgcolor="CEF2EE" align="left" style="background:#CEF2EE url(images/campaign_r5_c2.jpg) top left no-repeat" height="408" width="443">
<!--[if gte mso 9]>
<v:rect style="width:443px;height:408px;" strokecolor="none">
<v:fill type="tile" color="#CEF2EE" src="http://www.hallwaystudios.com/images/email/campaign_r5_c2.jpg" /></v:fill>
</v:rect>
<v:shape id="theText" style="position:absolute;width:443px;height:408px;">
<![endif]-->
<font color="#000000" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2" style="font-size: 14px; line-height: 20px; text-align: left;"><multiline><p style="margin: 0px 0px 6px">Thanks to all of your support, our team has thrived and grown<br>We looked far and wide to find a space, that we can call our own</p> <p style="margin:6px 0px">We love our new office; it’s so easy to reach<br>It’s down the road in Watford (sadly not the beach)<br>Near the station, M1 and M25, we’re very well connected<br>Of course we miss the countryside, but nothing else has been affected</p><p style="margin:6px 0px">We still do great <strong><font color="#000000">design</font></strong>, be it web, literature, brand or logo,<br>And know how to <font color="#c92234"><strong>promote</strong></font> your business through social media, email and SEO.<br>We <font color="#1f75b0"><strong>develop</strong></font> the technology: e-commerce, web or bespoke software<br>And we make sure you’re involved at every stage to create results beyond compare.</p><p style="margin:6px 0px">So make sure you come and visit, for a coffee and some cake<br>We'd be delighted to show you round, and love an excuse to bake!</p><p style="margin: 6px 0px 0px">To get your free cake and coffee, call us or click on the button to the right<br>And arrange to see us and Betty the cow, (she heard we had moo-ved and appeared one night...)</p></multiline></font>
<!--[if gte mso 9]>
</v:shape>
<![endif]-->
</td>
<td colspan="7" align="left"><img name="campaign_r5_c12" src="images/campaign_r5_c12.jpg" width="181" height="163" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="3" align="left"><img name="campaign_r6_c12" src="images/campaign_r6_c12.jpg" width="64" height="51" border="0" alt=""></td>
<td align="left"><img name="campaign_r6_c15" src="images/campaign_r6_c15.jpg" width="68" height="51" border="0" alt="" style="display: block" /></td>
<td colspan="3" align="left"><img name="campaign_r6_c16" src="images/campaign_r6_c16.jpg" width="49" height="51" border="0" alt="" style="display: block" /></td>
<tr>
<td colspan="7" align="left"><img name="campaign_r7_c12" src="images/campaign_r7_c12.jpg" width="181" height="194" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><img name="campaign_r8_c1" src="images/campaign_r8_c1.jpg" width="650" height="98" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r9_c1" src="images/campaign_r9_c1.jpg" width="650" height="178" border="0" alt="" style="display: block" /></td>
</tr>
<tr width="650">
<td align="right"><img name="campaign_r10_c1" src="images/campaign_r10_c1.jpg" width="26" height="96" border="0" alt="" style="display: block" /><span></span></td>
<td colspan="4" align="right"><span></span><img name="campaign_r10_c2" src="images/campaign_r10_c2.jpg" width="203" height="96" border="0" alt="" style="display: block" /></td>
<td colspan="13" align="left"><span></span><img name="campaign_r10_c6" src="images/campaign_r10_c6.jpg" width="421" height="96" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18"><span></span><img name="campaign_r11_c1" src="images/campaign_r11_c1.jpg" width="650" height="145" border="0" alt="" style="display: block" /></td>
</tr>
<tr>
<td colspan="18" bgcolor="#000000"><img src="images/social_footer.jpg" usemap="#Map" border="0" /></td>
</tr>
<tr>
<td colspan="18" bgcolor="#000000" align="center">
<font color="#FFFFFF" face="Arial,Helvetica,Verdana,Calibri,sans-serif" size="2">
Censored</font></p>
<p><small>
Would you like to <preferences style="color:#FFFFFF">
<font color="#FFFFFF">update your details</font></preferences>? Or <unsubscribe style="color:#FFFFFF"><font color="#FFFFFF">unsubscribe from our awesome email list</font></unsubscribe> (Betty will miss you)?
</small></p>
</font>
</td>
</tr>
</table>
</td></tr>
</table>
<map name="Map" id="Map">
<area shape="rect" coords="31,2,112,67" href="http://www.facebook.com/hallwaystudios" target="_blank" alt="Facebook" />
<area shape="rect" coords="279,1,362,70" href="http://www.linkedin.com/company/hallway-studios-limited" target="_blank" alt="LinkedIn" />
<area shape="rect" coords="404,2,486,81" href="http://www.hallwaystudios.com/" target="_blank" alt="Hallway Studios" />
<area shape="rect" coords="526,-9,622,77" href="[forwardtoafriend]" />
<area shape="rect" coords="155,-2,237,67" href="http://twitter.com/hallwaystudios" target="_blank" alt="Twitter" />
</map>
</body>
</html>
Any ideas would be appreciated!
I think I've finally cracked this problem that has plagued me for a couple of days. It may not apply to you, I can't read code very well, but the problem for me was I had what I'm going to call offset columns. If your table columns line up nicely, Outlook treats them fine, as pictured below:
If you have any offset columns, it starts having problems, and you end up with those phantom spaces in places that don't make sense. This is a bad way to do it:
As best I can tell, you're better off creating more columns than you actually need, because if you economize and create tables in a logical, economical manner, you'll have problems. This has solved my problem, hope it solves yours.
I would never use col or rowspan, i have only had trouble with them.
And FYI styles in is not supported on android or in gmail, so you kinda need to make it all inline css styling

html email issues with layout

I haven't had to send any mailshots for a number of years and I remember the process to be very painful then.
I have cut up my design into three sections and placed them within a table the table has a height and width defined and so do all the individual elements, however when viewed in an email client such as Gmail there are spaces between the three table rows.
My html. I think you'll agree it couldn't be more simplified!
<table border="0" cellpadding="0" cellspacing="0" width="550" height="550">
<tr>
<td colspan="2" bgcolor="#ffffff" width="550" height="104">
<img src="images/OC_01.gif" alt="" width="550" height="104"></td>
</tr><tr>
<td bgcolor="#ffffff" width="246" height="341">
<img src="images/OC_02.gif" alt="" width="246" height="341"></td>
<td bgcolor="#ffffff" width="304" height="341">
<img src="images/OC_03.gif" alt="" width="304" height="341"></td>
</tr><tr>
<td colspan="2" bgcolor="#014280" width="550" height="105" valign="top">
<img src="images/OC_04.gif" alt="" width="550" height="105"></td>
</tr>
</table>
Is there anyone here today that has enough email html experience to point me in the right direction?
Edit to add: I have been dissecting some commercial emails that have been sent to me in the past and I have found that some of them also have this weird spacing issue in Gmail. I have also noticed that each has been designed in such a way as to accommodate any extra spacing between the rows so I'm going to assume that the answer to this question is to ensure that the design is produced in such a way that these gaps are not an issue.
You must include style="display:block" with all images to prevent the gap issue in various email clients.
Example:
<img src="http://www.website.com/images/kitty.jpg" alt="Picture of Kitty"
width="1000" height="1000"
style="border:none; margin:0px; padding:0px; **display:block;**"/>
Add following attribute to the IMG element:
style="display: block;"
I've added it for you http://jsfiddle.net/xE9Qr/
Default IMG display is inline-block which produces unwanted space after.
I've tested it using http://ctrlq.org/html-mail/ and the spaces between TR elements are gone now. Remeber to see the result you have to send HTML table layout email to your gMail account.
Adding align="top" to images seems to be a potential fix:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#ffffff">
<img src="images/OC_01.gif" alt="" width="550" height="104" align="top"/>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" width="246">
<img src="images/OC_02.gif" alt="" width="246" height="341" align="top" />
</td>
<td>
<img src="images/OC_03.gif" alt="" width="304" height="341" align="top" />
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#014280">
<img src="images/OC_04.gif" alt="" width="550" height="105" align="top" /></td>
</tr>
</table>