www.webdeveloper.com
Results 1 to 7 of 7

Thread: HTML email displays vertical gaps within image

  1. #1
    Join Date
    Jun 2012
    Location
    USA
    Posts
    4

    HTML email displays vertical gaps within image

    I am working on a simple (or so I thought) e-invite for a client. I sliced the image, checked it in DreamWeaver CS5 and all looks good when testing on Safari, IE, Chrome, Firefox browsers. HOWEVER, when I test the image in Outlook for mail out, it displays vertical space gaps within the image. The browser tests didn't show this flaw. Furthermore, if I continue to email the image out to myself, though it looks flawed on the initial send out, it looks good on Outlook but the other email carriers destroy the image into different pieces. Any insight on what I am going wrong is appreciated. I'm here to learn how I can avoid this issue in the future. My code is below (note: it was cleaned up by W3C, if you need the original code, I'll provide that, though both have the same issue) Thank you.

    <!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>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
    <title>Dearmin-Fogarty-Party-Electronic-Party-Invitation2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    /*<![CDATA[*/
    img {display:block}
    /*]]>*/
    </style>

    <style type="text/css">
    /*<![CDATA[*/
    table.c2 {border-collapse: collapse}
    img.c1 {vertical-align:bottom; display: block;}
    /*]]>*/
    </style>
    </head>
    <body>
    <table class="c2" width="600" cellpadding="0" cellspacing="0" border="0" align="center">
    <tr>
    <td width="600" height="236" colspan="3"><img style="display:block" class="c1" src="http://fenominaldesign.com/fenominaldesignimages/Dearmin-Fogarty-Party-Electronic-Party-Invitation2_01.jpg" alt="" width="600" height="236" border="0" hspace="0" vspace="0" /></td>
    </tr>
    <tr>
    <td width="134" height="410" rowspan="2"><img style="display:block" class="c1" src="http://fenominaldesign.com/fenominaldesignimages/Dearmin-Fogarty-Party-Electronic-Party-Invitation2_02.jpg" alt="" width="134" height="410" border="0" hspace="0" vspace="0" /></td>
    <td width="126" height="35"><a href="mailto:bookkpr@dearminfogarty.com"><img style="display:block" class="c1" src="http://fenominaldesign.com/fenominaldesignimages/Dearmin-Fogarty-Party-Electronic-Party-Invitation2_03.jpg" alt="" width="126" height="35" border="0" hspace="0" vspace="0" /></a></td>
    <td width="340" height="563" rowspan="4"><img style="display:block" class="c1" src="http://fenominaldesign.com/fenominaldesignimages/Dearmin-Fogarty-Party-Electronic-Party-Invitation2_04.jpg" alt="" width="340" height="563" border="0" hspace="0" vspace="0" /></td>
    </tr>
    <tr>
    <td width="126" height="528" rowspan="3"><img style="display:block" class="c1" src="http://fenominaldesign.com/fenominaldesignimages/Dearmin-Fogarty-Party-Electronic-Party-Invitation2_05.jpg" alt="" width="126" height="528" border="0" hspace="0" vspace="0" /></td>
    </tr>
    <tr>
    <td width="134" height="35"><a href="https://maps.google.com/maps?hl=en&amp;safe=off&amp;q=860+terry+ave+n+seattle+wa&amp;ie=UTF-8&amp;hq=&amp;hnear=0x54901539860cf537:0x330a60fc217a3880,860+Terry+Ave+N,+Seattle,+WA+98109&amp;gl= us&amp;ei=2SzvT8TRKoGW2QXdrvSAAg&amp;ved=0CAUQ8gEwAA">
    <img style="display:block" class="c1" src="http://fenominaldesign.com/fenominaldesignimages/Dearmin-Fogarty-Party-Electronic-Party-Invitation2_06.jpg" alt="" width="134" height="35" border="0" hspace="0" vspace="0" /></a></td>
    </tr>
    <tr>
    <td width="134" height="118"><img style="display:block" class="c1" src="http://fenominaldesign.com/fenominaldesignimages/Dearmin-Fogarty-Party-Electronic-Party-Invitation2_07.jpg" alt="" width="134" height="118" border="0" hspace="0" vspace="0" /></td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    Join Date
    Mar 2011
    Posts
    1,148
    HTML is always quirky in Email clients. There's lots I would change about your code, but I think the simplest and safest approach would be to re-split the original image into full-width sections and use image maps to target the links.

  3. #3
    Join Date
    Jun 2012
    Location
    USA
    Posts
    4

    Thumbs up

    Quote Originally Posted by rtrethewey View Post
    HTML is always quirky in Email clients. There's lots I would change about your code, but I think the simplest and safest approach would be to re-split the original image into full-width sections and use image maps to target the links.
    Thank you for your response. For learning purposes and to avoid future headaches, would you mind telling me what you would do differently. I honestly thought I had sliced the image into simple sections, but I guess not.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,148
    As I say, my best advice would be to scrap your current version. I didn't test your code in Outlook, so I don't know exactly where the problem lies. I'd start by changing your CSS to:
    Code:
     img { margin:0; }
    There's no need to set your images to display:block that I can see. Email clients have limited support for CSS beyond the most basic properties, so the simpler you can make your code the better. And you may run into problems because your image files are so large. Try lowering the quality setting. You could even make the whole thing about 20&#37; smaller if you used a slightly larger font on the "Boarding Pass'. Good luck!

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,217
    Coding HTML emails is not as easy as it would seem:

    How to Code HTML Email Newsletters: http://articles.sitepoint.com/articl...il-newsletters
    How to Test Your HTML Email Newsletter Before You Hit Send: http://designfestival.com/how-to-tes...-you-hit-send/
    20 Email Design Best Practices and Resources for Beginners: http://net.tutsplus.com/tutorials/ht...for-beginners/
    How to Create Great HTML Emails with CSS: http://www.webreference.com/programming/css_html/
    Outlook 2007 Best Practices: Write great e-mail: http://office.microsoft.com/en-us/ou...x?ION_CL=10470

  6. #6
    Join Date
    Jun 2012
    Location
    USA
    Posts
    4
    Quote Originally Posted by rtrethewey View Post
    As I say, my best advice would be to scrap your current version. I didn't test your code in Outlook, so I don't know exactly where the problem lies. I'd start by changing your CSS to:
    Code:
     img { margin:0; }
    There's no need to set your images to display:block that I can see. Email clients have limited support for CSS beyond the most basic properties, so the simpler you can make your code the better. And you may run into problems because your image files are so large. Try lowering the quality setting. You could even make the whole thing about 20% smaller if you used a slightly larger font on the "Boarding Pass'. Good luck!
    Thank you for the input. I scrapped the entire code as you recommended and went as far as to re-slice the image as large width sections. It isn't what I originally wanted, but since I am inexperienced, it is a bandaid for the moment. I then tried to use <div> in place of the tables and was able to find much better success in Outlook, Gmail, Yahoo, but NOT Hotmail as it continues to display image breaks. I'll live with it for now. Below is how I redid the code. What do you think?

    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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="”text/css”">
    img {
    display:inline;
    }
    </style>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
    </head>
    <body bgcolor="#FFFFFF">
    <!-- Save for Web Slices (ShipInvitationCard.psd) -->
    <div style="width: 720px; margin: 0pt auto; overflow:hidden; font-size:0; line-height:0;">
    <div><img style="display:inline" src="http://fenominaldesign.com/fd_images/ShipInvitationCard_01.jpg" width="702" height="323" border="0"></div>
    <div><a href="mailto:bookkpr@dearminfogarty.com"><img style="display:inline" src="http://fenominaldesign.com/fd_images/ShipInvitationCard_02.jpg" width="702" height="46" border="0"></a></div>
    <div><img style="display:inline" src="http://fenominaldesign.com/fd_images/ShipInvitationCard_03.jpg" width="702" height="111" border="0"></div>
    <!-- End Save for Web Slices -->
    </body>
    </html>

  7. #7
    Join Date
    Jun 2012
    Location
    USA
    Posts
    4

    Thumbs up

    Quote Originally Posted by Major Payne View Post
    Coding HTML emails is not as easy as it would seem:

    How to Code HTML Email Newsletters: http://articles.sitepoint.com/articl...il-newsletters
    How to Test Your HTML Email Newsletter Before You Hit Send: http://designfestival.com/how-to-tes...-you-hit-send/
    20 Email Design Best Practices and Resources for Beginners: http://net.tutsplus.com/tutorials/ht...for-beginners/
    How to Create Great HTML Emails with CSS: http://www.webreference.com/programming/css_html/
    Outlook 2007 Best Practices: Write great e-mail: http://office.microsoft.com/en-us/ou...x?ION_CL=10470
    Thank you for those links. I am new to all of this. I have saved the links and will hopefully catch on better for future projects.

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