SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with browser based email client

    I created a html email which works well in all the email clients except for browser based, such as gmail and hotmail.

    The problem is that only in these clients one of my table cells that extends below the others, therefore causing a white space to break up my vertical line.

    Does anyone have any ideas how to fix this? Is there something that allows the image to expand in the <td> cell if it changes size? Thank you.

    Here is the code

    Code:
    <table width="600" bgcolor="#ffffff" cellspacing="0" cellpadding="0" align="center" border="0">
    <tr><td width="78" valign="bottom" align="left"> 
    <img src="http://aligncreative.com/img/top_line.gif" alt="" width="78" height="125" border="0"></td>
    <td width="309" valign="middle" align="left" bgcolor="#ffd600" style= "padding-left:45px; font-family:Arial, Helvetica, sans-serif; font-size:34px; line-height:130%; font-weight:bold;" > <a href="#" style="text-decoration:none; color:#000;">
    BOOST your knowledge!
    </a></td><td width="161" valign="bottom" align="center"> <a href="#" style="text-decoration:none">
    <img src="http://aligncreative.com/img/know.gif" alt="knowing illustration" width="161" height="125" border="0">
    </a></td>
    <td width="52" valign="bottom" align="center"> 
    <img src="http://aligncreative.com/img/spacer.gif" alt="" width="52" height="125" border="0">
    </td></tr></table>
    
    
    <table width="600" bgcolor="#ffffff" cellspacing="0" cellpadding="0" align="center" border="0">
    <tr>
    
    <td width="78" valign="top" align="left"> 
    <img src="http://aligncreative.com/img/bottom_line.gif" alt="" width="78" height="53" border="0"></td>
    
    <td width="19" valign="top" align="left"> 
    <img src="http://aligncreative.com/img/arrow.gif" alt="arrow" width="19" height="53" border="0"></td>
    
    <td width="112" valign="top" align="left"> 
    <img src="http://aligncreative.com/img/spacer.gif" alt="" width="112" height="53" border="0"></td>
    
    <td width="183" valign="bottom" align="center"> <a href="#" style="text-decoration:none;">
    <img src="http://aligncreative.com/img/button.gif" alt="click here" width="183" height="43" border="0">
    </a></td>
    
    <td width="208" valign="top" align="left"> 
    <img src="http://aligncreative.com/img/spacer.gif" alt="" width="208" height="53" border="0"></td>
    </tr></table>
    Attached Images Attached Images
    Last edited by TechnoBear; Apr 11, 2012 at 09:27. Reason: Code tags added

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I figure out my problem, in case someone is interested. I added this code and it worked.

    <style media="all" type="text/css">
    table td {
    border-collapse: collapse;
    }

    td img {vertical-align: bottom;}
    </style>

  3. #3
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I'm curious if it was firefox/Gecko where you saw the gmail etc problems? The gap under images in table cells used to be one of those quirks-mode hallmarks for Gecko. Also, I wonder if the border-collapse line can also be added inline for those email clients who can't deal with separated css so well? Or maybe those ones didn't have a problem in the first place.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem was in all the browsers. It also appeared in Yahoo. To resolve those issues I added a display:block to the img tag.

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Sounds like Mysterious Gap Under Images was at play.


Tags for this Thread

Bookmarks

Posting Permissions

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