/    Sign up×
Community /Pin to ProfileBookmark

HTML Email Question – Space between Images

Hi,

I’m coding a simple HTML email in Dreamweaver. When I view the test email in Hotmail, there is white space between each slice (image defined within the <td> tags. I’m wondering what is causing this. I would really appreciate any advice.

Here is my code:

[code=html]
<html lang=”en” xml:lang=”en” xmlns=”http://www.w3.org/1999/xhtml” xmlns:cctd=”http://www.constantcontact.com/cctd”>
<head>
<title>Hairless New Year</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>
<table width=”620″ border=”0″ align=”center” cellpadding=”0″ cellspacing=”0″ bgcolor=”#FFFFFF” style=”margin-top:10px; margin-bottom:10px;”>
<tr>
<td>
<table width=”599″ height=”757″ border=”0″ cellpadding=”0″ cellspacing=”0″ style=”border: 4px solid #8da9c4″ align=”center”>
<tr>
<td>
<img src=”http://www.ronnikolotkin.com/email/new_year_10/images/header.jpg” alt=”” width=”599″ height=”155″ border=”0″ ></td>
</tr>
<tr>
<td>
<img src=”http://www.ronnikolotkin.com/email/new_year_10/images/body.jpg” alt=”” width=”599″ height=”167″ border=”0″ ></td>
</tr>
<tr>
<td><a href=”http://www.ronnikolotkin.com/hair-removal-appointments.php”><img src=”http://www.ronnikolotkin.com/email/new_year_10/images/package_deals_link.jpg” alt=”” width=”599″ height=”18″ border=”0″></a></td>
</tr>
<tr>
<td>
<img src=”http://www.ronnikolotkin.com/email/new_year_10/images/body2.jpg” alt=”” width=”599″ height=”120″ border=”0″ ></td>
</tr>
<tr>
<td>
<img src=”http://www.ronnikolotkin.com/email/new_year_10/images/body3.jpg” alt=”” width=”599″ height=”236″ border=”0″ ></td>
</tr>
<tr>
<td><a href=”http://www.ronnikolotkin.com/”><img src=”http://www.ronnikolotkin.com/email/new_year_10/images/link.jpg” alt=”” width=”599″ height=”28″ border=”0″ ></a></td>
</tr>
<tr>
<td>
<img src=”http://www.ronnikolotkin.com/email/new_year_10/images/address.jpg” alt=”” width=”599″ height=”33″ border=”0″ ></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
[/code]

to post a comment
HTML

12 Comments(s)

Copy linkTweet thisAlerts:
@c_grayauthorJan 12.2010 — Thanks!

I applied <style=vertical-align: bottom;> to each image and it works great now.
Copy linkTweet thisAlerts:
@c_grayauthorJan 12.2010 — Actually, I was wrong. The email now displays fine in yahoo, gmail, and Mac Mail in both Windows and OS X, but in Hotmail in OS X there are white spaces b/w some of the images. There are not, however, white spaces between the images when viewed on Windows in hotmail. Agh!
Copy linkTweet thisAlerts:
@ReDDsJan 12.2010 — Look's fine to me!

I'm checking it using HTML Playground:

http://htmlplayground.com/
Copy linkTweet thisAlerts:
@KDLAJan 12.2010 — For the table, apply

style="border-collapse: collapse"

for the images, add

style="display: block;"
Copy linkTweet thisAlerts:
@c_grayauthorJan 12.2010 — Thanks!

It now renders well in everything EXCEPT Yahoo viewed in windows. There is a very thin white line across the middle of the email, between two images. Not sure what is causing that.

here is my code:

[code=html]
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:cctd="http://www.constantcontact.com/cctd">
<head>
<title>Hairless New Year</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="620" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="margin-top:10px; margin-bottom:10px; border-collapse:collapse">
<tr>
<td>
<table width="599" height="757" border="0" cellpadding="0" cellspacing="0" style="border: 4px solid #8da9c4; border-collapse: collapse" align="center" >
<tr>
<td>
<img style="vertical-align:bottom; display: block;" src="http://www.ronnikolotkin.com/email/new_year_10/images/header.jpg" alt="" width="599" height="155" border="0" align="top" ></td>
</tr>
<tr>
<td>
<img style="vertical-align:bottom; display: block;" src="http://www.ronnikolotkin.com/email/new_year_10/images/body.jpg" alt="" width="599" height="167" border="0" ></td>
</tr>
<tr>
<td><a href="http://www.ronnikolotkin.com/hair-removal-appointments.php"><img style="vertical-align:bottom; display: block;" src="http://www.ronnikolotkin.com/email/new_year_10/images/package_deals_link.jpg" alt="" width="599" height="18" border="0"></a></td>
</tr>
<tr>
<td>
<img style="vertical-align:bottom; display: block;" src="http://www.ronnikolotkin.com/email/new_year_10/images/body2.jpg" alt="" width="599" height="120" border="0" align="top" ></td>
</tr>
<tr>
<td>
<img style="vertical-align:bottom; display: block;" src="http://www.ronnikolotkin.com/email/new_year_10/images/body3.jpg" alt="" width="599" height="236" border="0" align="top" ></td>
</tr>
<tr>
<td><a href="http://www.ronnikolotkin.com/"><img style="vertical-align:bottom; display: block;" src="http://www.ronnikolotkin.com/email/new_year_10/images/link.jpg" alt="" width="599" height="28" border="0" ></a></td>
</tr>
<tr>
<td>
<img style="vertical-align:bottom; display: block;" src="http://www.ronnikolotkin.com/email/new_year_10/images/address.jpg" alt="" width="599" height="33" border="0" align="top" ></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

[/code]
Copy linkTweet thisAlerts:
@c_grayauthorJan 12.2010 — Oh, and what exactly is HTML Playground? I don't see an explanation on its site... is it a way to test code for all browsers?
Copy linkTweet thisAlerts:
@ReDDsJan 12.2010 — Oh, and what exactly is HTML Playground? I don't see an explanation on its site... is it a way to test code for all browsers?[/QUOTE]

It's just a code tester, put code in, and it shows you the preview of it, I use it as a code editor, I don't use any software, I do it all only in HTML Playground.

Also check out:

HTML SandBox
Copy linkTweet thisAlerts:
@c_grayauthorJan 12.2010 — Ah, very cool. While the code looks good there, Hotmail and Yahoo seem to be doing something a little weird to it.

One other question I have is about background images on HTML emails..

I made the text an image for this email because I read that Gmail can drop background images. For example, if I assigned an image as the background of a <td> so that I could type over it, certain Mail clients might drop the background. however, i tried this and it rendered fine in Gmail, Hotmail, Yahoo, and Mail. I'm still hesitant to put an image as a background because of what I've read. Do you know about this?
Copy linkTweet thisAlerts:
@KDLAJan 12.2010 — In my testing (we used to send out HTML emails quite often), MSN & Outlook blocked the background images.
Copy linkTweet thisAlerts:
@kmeyersNov 07.2012 — In my testing (we used to send out HTML emails quite often), MSN & Outlook blocked the background images.[/QUOTE]

Bless you for posting this!!! Solved my problem immediately with the spaces happening after images. It fixed it in aol, yahoo, gmail, outlook and hotmail.
Copy linkTweet thisAlerts:
@kmeyersNov 07.2012 — Sorry, I meant that this advice is what solved my issue:

For the table, apply

style="border-collapse: collapse"

for the images, add

style="display: block;"
×

Success!

Help @c_gray spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...