Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

SwiftLives

macrumors 65816
Original poster
Dec 7, 2001
1,356
341
Charleston, SC
I'm currently programming an email marketing piece. It uses rudimentary HTML and tables. The header and footer images are split into parts - three rows, since Constant Contact likes to keep them under 70k.

I've previewed it in Safari, Firefox, and Chrome (all on the Mac) - it looks seamless.

The problem I'm running into is that my boss uses Outlook on Windows. For some reason, the table is rendering with spaces between each image. I'm also assuming most people who receive this will be using Outlook.

I've checked - cellspacing and cellpadding are all set to 0. I've clearly specified table height and data cell height. Even image height.

First off, has anyone run into this issue before?
Secondly, does anyone know of someplace I can check/verify the code?

I appreciate your help. This is stumping me.

I should probably add that I am not much of a programmer...
 
For not being a programmer, it sounds like you have a good grasp on things.

Try putting the images back-to-back horizontally, not using a table. For the end of lines, use the <br/> tag something like this:

Code:
<img src="image1.png"/><img src="image2.png"/><br/>
<img src="image3.png"/><img src="image4.png"/>
 
Image border = 0? Posting the markup would make it easier. Also thought about using inline css instead for this? Tables should only be used for tabular data.

I should probably add that I am not much of a programmer...

HTML is markup not programming.
 
Try adding a
Code:
style="display:block;"
style to each of the images.

Some email clients treat images the same way as text, so they allow extra space below the bottom line for descending characters.

This fix definitely fixes issues in Hotmail in Firefox - not sure about Outlook though.

It is good practice to use the display block trick on every image in your email anyway to prevent other issues,

----------

Image border = 0? Posting the markup would make it easier. Also thought about using inline css instead for this? Tables should only be used for tabular data.

Unfortunately due to the way that some email clients render HTML emails, tables are the only option to get half decent layouts, even if it is like coding from the dark ages!
 
Secondly, does anyone know of someplace I can check/verify the code?

I have used a service called Email on Acid before in the past, and it works well. They have a free version of if, that gives you Outlook 03 I believe, as well as a few others. Or you can pay to get testing in more.
 
Make sure to add <table border="0" cellpadding="0" cellspacing="0"> to your table markup
Don't leave any cell empty, add a <br/> in your empty cell

Those are Explorer/Outlook good practice

Hope this could help
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.