1

I was assigned to create an HTML email that uses a sliced image in the header. I haven't ever worked on HTML emails and I've spent 4 hours on the same thing trying to fix the spacing.

Here's the code: http://jsfiddle.net/8EHED/

While there's space between the tr in the above site, it's fine on regular browsers like IE, Firefox, and Chrome.

The problem I'm going crazy about is making this look right in HTML email messages. Here's what it looks like when I import the code into a new Thunderbird message:

http://imgur.com/WUjCl

See how the spacing is not like it should be? I don't want to spend more countless hours trying to fix this problem! What am I missing or doing wrong?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
micah
  • 1,937
  • 6
  • 27
  • 40

3 Answers3

1

Add style="display:block" to your image

Barry Corrigan
  • 55
  • 1
  • 8
0

Your table cell sizes are not consistent, since this is a table, it will distort the sizes of your cells to the inappropriate sizes because of trying to create a consistent table, and thus create a different effect then what you have designed.

Reference here for further solution:

html table cell width for different rows

or revise the code:

    <table id="Table_01" width="650" height="290" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign=top align=left width=302>
                <a href="http://www.example.com">
                    <img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td>
            <td valign=top align=left colspan="3" width=241>
                <img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td>
            <td valign=top align=left width=43>
                <a href="http://twitter.com/">
                    <img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td>
            <td valign=top align=left width=64>
                <a href="http://www.facebook.com/">
                    <img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td>
        </tr>
    </table>

    <table id="Table_02" width="650" height="290" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign=top align=left width=302>
                <a href="http://www.example.com/">
                    <img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td>
            <td valign=top align=left width=97>
                <a href="http://www.example.com/collection/photos/">
                    <img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td>
            <td valign=top align=left width=78>
                <a href="http://www.example.com/events/">
                    <img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td>
            <td valign=top align=left colspan="3" width=173>
                <a href="http://www.example.com/bottle-service/">
                    <img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td>
        </tr>
    </table>
Community
  • 1
  • 1
Rich
  • 4,134
  • 3
  • 26
  • 45
  • Thank you for verifying this. I had no idea inconsistent cell sizes would affect it like this. I guess either my graphic needs to be redesigned or the slices need to be updated to be consistent. – micah Mar 30 '12 at 01:34
  • your approach with 2 tables does fix the initial problem but it creates a small gap between the two tables. How do I get rid of that small gap? Also, for anyone else reading this, the heights of both tables need to reflect the heights of the rows in order for it to work properly. – micah Mar 30 '12 at 19:56
  • Your tables had a static height of 290, if you remove the height field the table will assume the height of the rows. – Rich Mar 30 '12 at 21:11
0

Try this to remove gap

    <table cellspacing=0 cellpadding=0 border=0><tr><td><table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign=top align=left width=302 height=51>
                <a href="http://www.example.com">
                    <img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td>
            <td valign=top align=left colspan="3" width=241>
                <img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td>
            <td valign=top align=left width=43>
                <a href="http://twitter.com/">
                    <img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td>
            <td valign=top align=left width=64>
                <a href="http://www.facebook.com/">
                    <img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td>
        </tr>
    </table>
    </td></tr>
    <tr><td>
    <table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
            <td valign=top align=left width=302 height=238>
                <a href="http://www.example.com/">
                    <img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td>
            <td valign=top align=left width=97>
                <a href="http://www.example.com/collection/photos/">
                    <img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td>
            <td valign=top align=left width=78>
                <a href="http://www.example.com/events/">
                    <img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td>
            <td valign=top align=left colspan="3" width=173>
                <a href="http://www.example.com/bottle-service/">
                    <img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td>
        </tr>
    </table>
    </td></tr></table>
Rich
  • 4,134
  • 3
  • 26
  • 45
  • Right, I previously tried that but it didn't work unfortunately. When I send it to Gmail or Hotmail or any other online email, there's still space between the two tables. – micah Mar 31 '12 at 00:11
  • View the source of the email and look for return characters, somewhere in your code is a text formatting option which browsers ignore but email apps recognize and activate. – Rich Mar 31 '12 at 00:28
  • The only difference that I can see is that there's a element that wasn't there before. I tried targetting it using css but that didn't do anything so I don't think it's this new tbody element. Other than that, and aside from the updated src (which changes just to include the images in the email), I see it being consistent. – micah Mar 31 '12 at 00:43