I'm currently building an e-newsletter in html using tables and it's looking great in Chrome and firefox, but there are gaps between the rows in Explorer.

 

Here's a link to it.

 

Code so far:

 

<div style="background-color:#dbdbdb;">
<table style="font-family:Century Gothic, arial;font-size:12px" border="0" width="800" align="center" cellpadding="0" cellspacing="0" >
<tr>
 <td colspan="8">
  <img src="topbg.jpg"/>
 </td>
</tr>
<tr>
 <td colspan="8">
  <img src="mid1bg.jpg"/>
 </td>
</tr>
</table>
</div>

 

Any suggestions on how to get rid of the gap would be good.

 

Thanks

Kerstey

Try avoiding any spaces before and after the images.

 

<td colspan="8"><img src="mid1bg.jpg"/></td>

 

instead of

 

<td colspan="8">
<img src="mid1bg.jpg"/>
</td>

 

IE is quite popular with puting spaces in these cases.

 

Also a small reset style would be good.

 

<style>
*{
 margin:0;
 padding:0;
 }
</style>

 

If this fixes it, you should consider moving it as inline style since some email clients strip the <style> or the <head> tags altogether.

 

You can read some useful email design tips at the CampaignMonitor website: http://www.campaignmonitor.com/resources/will-it-work/guidelines/

Edited December 18, 201213 yr by Kalo

In my opinion, you shouldn't *really* be worrying about how this email template looks in browsers. You need to make sure it looks alright at each stage in email clients.

 

Here is a list from Campaign Monitor of the most popular email clients (as of September 2012).

 

According to that, you need to be worrying about iOS Mail, Outlook and Hotmail (I'd need to check, but I think think Hotmail interprets the code, rather than the browser, so what you see in your Hotmail inbox might look different to what you see if you just go to the file on Firefox.)

 

Lewis.

Lewis, as much as you are right, the problem with padding between the images/sections is very likely to persist in some of the email clients as well *personal experience*

Avoid using table

Avoid using table

 

NO - you must use tables for html emails, (with inline styles, no CSS stylesheet and no head section style tags).

Try avoiding any spaces before and after the images.

 

<td colspan="8"><img src="mid1bg.jpg"/></td>

 

instead of

 

<td colspan="8">
<img src="mid1bg.jpg"/>
</td>

 

IE is quite popular with puting spaces in these cases.

 

Also a small reset style would be good.

 

<style>
*{
 margin:0;
 padding:0;
 }
</style>

 

If this fixes it, you should consider moving it as inline style since some email clients strip the <style> or the <head> tags altogether.

 

You can read some useful email design tips at the CampaignMonitor website: http://www.campaignm...ork/guidelines/

 

Hi

Thanks for your suggestions. Unfortunately they didn't work though.

 

I have now moved on to test sending the newsletter from Mailchimp and I'm getting the same problem with the spacing in yahoo mail and also in Outlook, the text is stretching and not keeping to the width of the cell that I specified.

 

Outlook:

 

 

Yahoo:

 

 

 

Help! I need to get this sent out tomorrow!!

Try with inserting valign="top" in the TDs with the images to fix the spacing between images.

 

For the other problem it looks like you might have to reconstruct the tables/trs or cellspaing looks like a table construction issue.

Edited December 19, 201213 yr by Kalo