Home/ Questions/Q 7723707
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T04:30:36+00:00

I was assigned to create an HTML email that uses a sliced image in

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0