dcsimg
www.webdeveloper.com
Results 1 to 13 of 13

Thread: HTML Email Question - Space between Images

  1. #1
    Join Date
    Jul 2009
    Posts
    14

    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:

    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>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654

  3. #3
    Join Date
    Jul 2009
    Posts
    14
    Thanks!

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

  4. #4
    Join Date
    Jul 2009
    Posts
    14
    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!

  5. #5
    Join Date
    Jan 2010
    Posts
    4
    Look's fine to me!
    I'm checking it using HTML Playground:
    http://htmlplayground.com/

  6. #6
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    For the table, apply
    style="border-collapse: collapse"
    for the images, add
    style="display: block;"

  7. #7
    Join Date
    Jul 2009
    Posts
    14
    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>

  8. #8
    Join Date
    Jul 2009
    Posts
    14
    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?

  9. #9
    Join Date
    Jan 2010
    Posts
    4
    Quote Originally Posted by c.gray View Post
    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

  10. #10
    Join Date
    Jul 2009
    Posts
    14
    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?

  11. #11
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    In my testing (we used to send out HTML emails quite often), MSN & Outlook blocked the background images.

  12. #12
    Join Date
    Nov 2012
    Posts
    2
    Quote Originally Posted by KDLA View Post
    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.

  13. #13
    Join Date
    Nov 2012
    Posts
    2
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles