0

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!&nbsp;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"><a href="https://maps.google.com/maps?ie=UTF-8&amp;q=creative+outreach+ministries&amp;fb=1&amp;gl=us&amp;hq=creative+outreach+ministries&amp;hnear=0x8640b8b4488d8501:0xca0d02def365053b,Houston,+TX&amp;cid=0,0,5200096206319274721&amp;ei=KVRRUMCoIqK02gXOwYHwAg&amp;ved=0CJoBEPwSMAA" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126394.o" height="111" width="87" /></a></td>
<td rowspan="2"><a href="http://creativeoutreach.com/events/show/I2L-Series" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126395.o" height="111" width="82" /></a></td>
<td rowspan="2"><a href="http://creativeoutreach.com/contact" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126396.o" height="111" width="81" /></a></td>
<td rowspan="2"><a href="http://creativeoutreach.com/donate" target="_blank"> <img style="display: block;" alt="" src="http://photos.osmek.com/get/126397.o" height="111" width="81" /></a></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&nbsp;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!

1 Answers1

0

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).

Justin K
  • 369
  • 1
  • 10
  • Hey Justin, thanks for the response. That is how I used to write it but my web manager recently updated their editor to HTML5. Cellpadding and cellspacing are no longer supported. They disappear after I save the code. – LSteffie Jan 24 '14 at 00:49
  • Thats not good for email design especially since Outlook doesn't support HTML5. Is it integrated into your email service provider? If possible try to add it using notepad or textedit and paste it into your service provider's interface and see if thats the cause. Then we can figure out ways to work around the editor. – Justin K Jan 24 '14 at 00:57
  • 2
    @LSteffie I'd suggest you go to your web manager with some [html email resources](http://stackoverflow.com/questions/19780614/z-index-ignored-in-newsletter/19791269#19791269) to explain why modern web standards and email don't mix. You shouldn't have to implement a difficult and time consuming workaround. You wouldn't ask him to use an editor without CSS3 support. If he cares about his business and your productivity, he will realize that. – John Jan 24 '14 at 13:51
  • @JustinK I agree it's not good! Yes it is integrated into the email service provider – LSteffie Jan 24 '14 at 15:56
  • What email service might that be? – Justin K Jan 24 '14 at 21:47
  • @JustinK It's called Osmek – LSteffie Feb 07 '14 at 22:16