HTML Email Question - Space between Images

**c.gray** · 01-12-2010 12:06 PM

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:

HTML Code:

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

**Fang** · 01-12-2010 12:15 PM

Images, Tables, and Mysterious Gaps

**c.gray** · 01-12-2010 01:10 PM

Thanks!

I applied <style=vertical-align: bottom;> to each image and it works great now.

**c.gray** · 01-12-2010 01:31 PM

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!

**ReDDs** · 01-12-2010 01:47 PM

Look's fine to me!
I'm checking it using HTML Playground:
http://htmlplayground.com/

**KDLA** · 01-12-2010 01:49 PM

For the table, apply
style="border-collapse: collapse"
for the images, add
style="display: block;"

**c.gray** · 01-12-2010 02:07 PM

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:

HTML Code:

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

**c.gray** · 01-12-2010 02:08 PM

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?

**ReDDs** · 01-12-2010 02:12 PM

Originally Posted by c.gray

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?

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

**c.gray** · 01-12-2010 02:18 PM

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?

**KDLA** · 01-12-2010 02:58 PM

In my testing (we used to send out HTML emails quite often), MSN & Outlook blocked the background images.

**kmeyers** · 11-07-2012 12:21 PM

Originally Posted by KDLA

In my testing (we used to send out HTML emails quite often), MSN & Outlook blocked the background images.

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.

**kmeyers** · 11-07-2012 12:22 PM

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;"

Thread: HTML Email Question - Space between Images

Thread Tools

Display

HTML Email Question - Space between Images

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions