CODEWITHSUNDEEP
htmlcssemailhtml-emailhtml-table
user2088260
user2088260

Reputation:

Html email Template <td> Spaces around images

I am coding html email template , I did slice psd to html because of graphical work in template , now problem is that it looks perfect in my browsers but when I send it to my email id there are some problems that you can see in attached image enter image description here

now this is <tr> with 3 <td> but problem is that there is gap between left blue image and logo right one is perfectly fine , code for this <tr> is:

<tr>
    <td colspan="2">
        <img src="left.jpg" alt="top_left" width="220" height="102" border="0">
    </td>
    <td colspan="2">
        <a href="http://www.google.com">
        <img src="logo.jpg" width="191" height="102" border="0" alt="Logo"></a>
    </td>
    <td colspan="3">
        <img src="right.jpg" alt="top_right" width="200" height="102" border="0">
    </td>
</tr>

Please let me know how I can fix it.

Upvotes: 1

Views: 4080

Answers (3)

R Lacorne
R Lacorne

Reputation: 604

Also, make sure to always use this style on your images : display:block;

Some mail clients will do whatever they want with your code (Looking at you, gmail), and unless you specify that your images are rendered as block elements, it will add white spaces around those.

There are a couple of important fixes for gmail. Black links should always be colored as #000001 (gmail removes the black color on links, as well as on regular text for redundant content in conversations (It will turn this text purple when reposted unless you specify that the text color is #000001) ).

Also, make sure you use inline styling for your TDs height and width, sometimes the regular html value won't do.

Upvotes: 3

Jake Jordan
Jake Jordan

Reputation: 311

It may be an easier solution to just to use a single image if keeping the line together is important.

Unless you know what e-mail user agent each recipient is going to be using to view the e-mail, it is difficult to target them in the manner that you proposed. Each e-mail client may use a different renderer, causing them to display the whitespace incorrectly. There are times, when using older e-mail clients, that you will need to remove ALL spaces and linebreaks to get table-based formatting to display correctly; this means having all of the HTML on a single line.

Also, keep in mind that if your recipients are viewing the content in HTML5, the border attribute of the img element is obsolete; it is instead correct to add style="border: 0;" to the img element. You may want to try using style="margin: 0; padding: 0; border: 0;" on the table cells and rows.

Make sure that you have your table set to collapse as well, using
<table style="border-collapse: collapse;">

Upvotes: 0

Nux
Nux

Reputation: 10042

Remove whitespace after a tag. Also make sure table have cellspacing, cellpadding and border set to 0. You might need to remove all whitespace in cells.

E-mail browsers are a mess. Much more then IE6 was ;-).

Upvotes: 0

Related Questions