One of my email marketing clients has an email made up entirely of graphics as shown in the design below:

I make it in Photoshop and slice it up for Dreamweaver.

It looks fine in Dreamweaver, works fine in all browsers and almost all mail clients. But on Outlook and perhaps a few others it looks like this:

Notice the gaps. It's doing my head in. Tried putting it in tables, made sure all the padding/spacing etc is set to zero but it just won't work.

Normally the email doesn't have the middle images (cyan and blue) and it works fine.

Help

Have you got a container table wrapped around these elements?

 

Also, I usually use this reset for html email (http://htmlemailboilerplate.com), it works pretty well.

Without any code anything we say is more like a guess. If you post you code, or better yet, host it somewhere we can help you

Thanks for the replies so far!

 

It's important to note I know very little HTML/CSS and usually deal entirely in the design side of Dreamweaver.

 

Here is the code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>bo newsletter 6 slots</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

#Table_01 {

-webkit-transition: all;

-moz-transition: all;

-ms-transition: all;

-o-transition: all;

transition: all;

}

#Table_01:active {

border-spacing: 0;

}

</style>

</head>

<body bgcolor="#FFFFFF">

<!-- Save for Web Slices (bo newsletter 6 slots.psd) -->

<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">

<tr>

<td colspan="4" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_01.gif" width="600" height="78" alt=""/></td>

</tr>

<tr>

<td colspan="4" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_02.gif" width="600" height="343" alt=""/></td>

</tr>

<tr>

<td colspan="2" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_03.gif" width="300" height="205" alt=""/></td>

<td colspan="2" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_04.gif" width="300" height="205" alt=""/></td>

</tr>

<tr>

<td align="center" valign="middle"><img src="images/bo-newsletter-6-slots_05.gif" width="201" height="279" alt=""/></td>

<td colspan="2" align="center" valign="middle"><img src="images/bo-newsletter-6-slots_06.gif" width="200" height="279" alt=""/></td>

<td align="center" valign="middle"><img src="images/bo-newsletter-6-slots_07.gif" width="199" height="279" alt=""/></td>

</tr>

<tr>

<td>

<img src="images/spacer.gif" width="201" height="1" alt="" /></td>

<td>

<img src="images/spacer.gif" width="99" height="1" alt="" /></td>

<td>

<img src="images/spacer.gif" width="101" height="1" alt="" /></td>

<td>

<img src="images/spacer.gif" width="199" height="1" alt="" /></td>

</tr>

</table>

<!-- End Save for Web Slices -->

</body>

</html>

This tutorial sets out some general principles for HTML emails.

 

http://css-tricks.com/using-css-in-html-emails-the-real-story/

 

You have some styles in a head section style tag, but this is not recommended. Put all styles inline in the html markup.

 

Align="center" is deprecated. Use modern CSS (inline).

Edited August 30, 201313 yr by Wickham

Newer versions of outlook like 2007 and 2010 use microsoft word to render HTML and word is **** like much else from microsoft.

 

Apparently outlook displays like its printed and only shows what fits on a piece of paper (A4 i guess) so adds axtra whitespace above images if they would not fit on print.

 

try this

 

http://www.emailonacid.com/free-email-test

Edited August 30, 201313 yr by seedism

Thanks again for all the replies. I've had 2 hours sleep as it really needed to be out for today and I managed it.

 

The solution was really boring in the end.

 

insert top red image then <br>

insert green image then <br>

insert cyan and blue images then <br>

insert last 3 images.

 

Thus avoiding any CSS and missing complicated (for outlook anyway) HTML.

 

The breaks don't show a gaps on Dreamweaver, when you preview in a browser it does but on all mail clients I tested it was exactly as I wanted.

I guess it means if someone previews in a browser there will be gaps in the rows but it's the best I could do (and I don't have a preview in browser button on the email anyway).

Edited August 30, 201313 yr by Scottish

Bloody <br>...lol

Glad you figured this out, quite tricky.

 

I wonder when html mail gets an update and we can use the same markup as (modern) webpages.

 

After removing tables out of my routine, here they are again.

why do we need <br />

 

It can be like this:

 

<tr><td>Image</td></tr>

<tr><td>Image</td></tr>