Question

I’m using tables because I need to send an html email.
any way my trouble is this: I have two images that are stacked one on top of the other. they are both links, meaning inside a tags. The problem is that there a white padding between the two images that I can’t get rid of in IE8.
this is the code:

<table cellspacing="0" cellpadding="0">    
    <tr>
        <td>
            <a href="http://wwwXXXXXX.com/screening.php" border="0" style="padding:0;margin:0;line-height: 0px">
            <img src="http://www.XXXXXXX.com/emails/images/host.jpg" border="0"   />
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="mailto:[e-mail]" border="0"  style="padding:0;margin:0;line-height: 0px">
            <img src="http://www.XXXXXX.com/emails/images/bottom_all.jpg" border="0" />
            </a>
        </td>
    </tr>
</table>

the space is showing only where theres a tags (tried just images – no problem). originally the padding appears in firefox and IE8, not in chrome. after adding ‘line-height’ works in firefox, but IE8 still no good….

any ideas?

EDIT: actually, I found out that the problem appears not only in tables, but whenever you have img wrapped in anchors. like this:

<a href="http://wwwXXXXXX.com/screening.php" border="0" style="padding:0;margin:0;line-    height: 0px">
<img src="http://www.XXXXXXX.com/emails/images/host.jpg" border="0"   />
</a>
<a href="http://wwwXXXXXX.com/screening.php" border="0" style="padding:0;margin:0;line-height: 0px">
<img src="http://www.XXXXXXX.com/emails/images/host.jpg" border="0"   />
</a>

Answer 1

Try adding

vertical-align: top;

to your img elements.

This prevents the img from trying to align with the text baseline, which will always leave space underneath for character descenders.