SitePoint Sponsor

User Tag List

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

    Why is there a space under image?

    I'm racking my brain trying to figure this out. I am creating an html email so this project has to be created in tables.

    Why wouldn't my image sit directly on the bottom of my table cell? Attached is a snapshot of my problem.

    And here is that section of code.
    HTML Code:
    </head>
    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" bgcolor='#f5f5f5' >
    
    <table width="600" bgcolor="#ffca05" cellspacing="0" cellpadding="0" align="center" border="0">
    <tr>
    <td width="107" valign="top" align="left" style="padding-left:15px; padding-right:15px; padding-top: 10px;"> <a href="#" style="text-decoration:none">
    <img src="http://mery.com/aw/aaimg/logoeff4.gif" alt="logo" width="119" height="48" border="0">
    </a></td>
    <td valign="middle" align="center"> <a href="#" style="text-decoration:none; background-color: #000; padding:5px; color:#FFF; font-family:Helvetica, Arial, sans-serif; font-size 14px; font-weight:bold;">EXPIRATION NOTICE
    </a></td>
    <td valign="bottom" align="right" rowspan="3" cellspacing="0" cellpadding="0"> <a href="#" style="text-decoration:none;">
    <img src="http://mery.com/aw/aaimg/eff4.gif" alt=" Data Inc" width="260" height="178" border="0">
    </a></td>
    </tr>
    <tr>
    <td valign="top" align="center" colspan="2" cellspacing="0" cellpadding="0" style="padding-left:10px; padding-top:10px; border:none;"> <a href="#" style="text-decoration:none;"><img src="http://meryl.com/aw/aaimg/lockeff4.gif" alt="Lock it or Lose it" width="314" height="46" border="0">
    </a></td></tr>
    <tr>
    <td valign="top" align="center" colspan="2" style="padding-left:10px;"> <a href="#" style="text-decoration:none; color:#000; font-family:'Times New Roman', Times, serif; font-size 15px;">Lock in your savings now and<br>
     continue your access to <em>DataInc</em>.
    </a></td>
    </tr>
    </table>
    Thank you for your help. It's much appreciated.
    Meryl
    Attached Images Attached Images
    Last edited by Mittineague; Aug 29, 2011 at 15:29. Reason: reformatting bbcode tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Set the image to vertical-align: bottom; E.g.

    Code:
    td img {vertical-align: bottom;}
    Images are inline elements (meaning they sit next to other elements) and by default, they align themselves with the baseline of any text that might sit next to them, thus leaving space below for letter descenders. You can tell images not to leave this space at the bottom with the rule above.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked! Thank you! I also have the space issue on the right side. I tried horizontal-align: right; and I see that's not correct.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I'd have to see the page in question to be able to help. But yes, there's not horizontal-align, but that shouldn't be needed anyway.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I resolved the issue by having less table cells in my table.

    Thanks again.

  6. #6
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The main issue here is not the vertical alignment of the table cells, its the fact that you appear to be using tables in order to design your website. Tables are used for tabular data. I'd strongly recommend using div's for your layout. I know you might not want to at first, but its really not that hard to learn. It took me a day or 2 to grasp the concept of table-free layouts.


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
  •