I am creating a responsive email template for that I need 6 Books in a row.
The width of main table is 600px, books table width is 15% and red highlighted table (for space between tables) width is 2%. All tables are left aligned.
Email is working fine in browser but not rendering in properly in Outlook here is screenshot below.
There is 1px space around the red table, please suggest a fix so it renders in a row & works fine in outlook 2016 and also in other version.
Outlook 2016 Example
Note: I tried using single table with 6 <td> but it wasn't working in Andorid 4.4, so that is why I am using this table structure.
/* MOBILE STYLES */
#media screen and (max-width: 520px) {
/* FULL-WIDTH TABLES */
table[class="responsive-table"] {
width: 100%!important;
}
}
<table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table" align="center" bgcolor="yellow">
<tr>
<td>
<!-- TWO COLUMNS -->
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<!-- RIGHT COLUMN -->
</td>
</tr>
</table>
</td>
</tr>
</table>
You can try the following code for table, I suggest you, not to use multiple tables inside a table, instead use TD.
It may resolve your issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#media screen and (max-width: 520px) {
/* FULL-WIDTH TABLES */
table[class="responsive-table"] {
width: 100%!important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table" align="center" bgcolor="yellow">
<tr>
<td>
<!-- TWO COLUMNS -->
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Snapshot 1
Snapshot 2
Snapshot 3
Related
My email is comprised of a set of images - some full-width rows containing a full-width image, while other full-width rows contain two 50%-width images.
The single-asset rows are centering, but the 2-asset rows are not.
Any suggestions as to how to address this?
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" align="center" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<!-- SINGLE-WIDE Image, Flush : BEGIN -->
<tr>
<td class="full-width-image" align="center" style="mso-table-lspace:0 !important;mso-table-rspace:0 !important;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/0f9cfabb-011b-4af6-9962-0d097a3a884a.jpg" width="800" alt="" border="0" style="width: 100%;max-width: 800px;height: auto;display: block;vertical-align: text-top;" class="img-fullwidth">
</td>
</tr>
<tr>
<td class="full-width-image" align="center" style="mso-table-lspace:0 !important;mso-table-rspace:0 !important;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/c3fa45e0-1954-491a-b567-a0f39b19ea15.jpg" width="800" alt="" border="0" style="width: 100%;max-width: 800px;height: auto;display: block;vertical-align: text-top;" class="img-fullwidth">
</td>
</tr>
<!-- SINGLE-WIDE Image: END -->
<!-- DOUBLE-WIDE Image, Flush : BEGIN -->
<tr style="display:block;">
<td class="full-width-image" align="center" style="mso-table-lspace:0 !important;mso-table-rspace:0 !important;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td class="stack-column-center" align="center">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding:0px;text-align:center;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/80c28595-a6cc-43e1-9e5c-f581a77064f7.jpg" width="400" alt="" border="0" class="fluid" style="display: block;">
</td>
</tr>
</table>
</td>
<td class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding:0px;text-align:center;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/9e708022-b8f2-4528-89b0-95b51dd73caa.jpg" width="400" alt="" border="0" class="fluid" style="display: block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I'm editing a bought responsive email template. Below you can see the structure used.
The email is responsive on the web version and on desktop browser email clients. But when testing it on mobile email apps like Gmail, the structure breaks, and on Yahoo it displays the desktop version.
After cleaning up the code, and testing diferent versions... I think the problem is in the section where there is a background full width and then a normal width table with 2 images.
I tried putting the background on the top <table> and then on the <td> but it still don't work on mobile email apps like Gmail or Yahoo.
I don't know if I'm missing up something, or I'm doing something wrong. It only breaks on mobile email apps.
Thanks in advance.
Here is the code of the top section.
<table class="main-header" data-module="Header" data-bgcolor="Header" data-bg="Header" style="position: relative; opacity: 1; z-index: 0; background-image: url(https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg); background-size: cover; background-position: 50% 40%;" background="https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="zay600" border="0" align="center" cellpadding="0" cellspacing="0">
<table cellspacing="0" cellpadding="0" align="center" border="0" width="90%" class="zay600">
<!-- img -->
<tbody><tr>
<td align="center">
<table align="center" class="zay600" width="600" border="0" cellspacing="0" cellpadding="0">
<!-- logo -->
<tbody><tr>
<td>
<table align="left" class="zay3-3" width="120" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="40">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center" valign="middle" style="line-height:0px;">
<img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="249" height="70" alt="img">
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--Space-->
<table width="1" height="30" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody><tr>
<td height="30" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<p style="padding-left: 24px;">
</p>
</td>
</tr>
</tbody></table>
<table align="right" class="zay3-3" width="280" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="50">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center">
<table class="zay-inner" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;"><img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="280" height="36" alt="img">
</td></tr>
</tbody></table>
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--End Space-->
</td>
</tr>
<!-- menu -->
<!-- end menu -->
</tbody></table>
</td>
</tr>
<!-- end logo -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
<!-- subtitle -->
<tr>
<td>
<!-- content -->
<table class="zay600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center">
<table border="0" width="184" align="center" cellpadding="0" cellspacing="0" class="container580">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
</tbody></table>
<!-- end content -->
</td>
</tr>
<!-- end subtitle -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I have an issue with HTML email where gmail is puts a gap after my tables. It has been driving me crazy and tried nesting my tables in all kind of different way. Here is my code:
<html>
<head>
</head>
<body bgcolor="#000000" yahoo="fix">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0 auto">
<tbody>
<tr>
<td width="600" style="background-color:#fafafa" bgcolor="#fafafa">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto">
<tbody>
<tr>
<td width="600">
<table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" style="background-color:#000000;margin:0 auto">
<tr><td>
<table align="top" border="0" cellpadding="0" cellspacing="0" width="600" height="auto">
<tr>
<td valign="bottom" width="600">
<table border="0" cellpadding="0" cellspacing="0" width="600" align="top">
<a href="#">
<tr>
<td width="600" align="center">
<img height="80" src="http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif" width="600" style="display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img alt="" height="820" src="http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif" width="600" style="display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img height="225" src="http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif" width="600" style="display:block;" />
</td>
</tr>
</a>
</table>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body></html>
And this is how it looks like in gmail. I am trying to get rid of the black bar at the end of my html email. Seems to be very difficult...
Your HTML tags such as the table, tbody and tr did not close properly. I tried to send to myself via mailchimp with the updated one and no black bars I see from gmail's interface.
Updated one:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body bgcolor="#000000" yahoo="fix">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
align="center" style="margin:0 auto">
<tbody>
<tr>
<td width="600" style="background-color:#fafafa" bgcolor=
"#FAFAFA">
<table width="600" border="0" align="center"
cellpadding="0" cellspacing="0" style="margin:0 auto">
<tbody>
<tr>
<td width="600">
<table width="600" cellpadding="0" cellspacing=
"0" border="0" bgcolor="#000000" style=
"background-color:#000000;margin:0 auto">
<tr>
<td>
<table align="top" border="0"
cellpadding="0" cellspacing="0" width=
"600" height="auto">
<tr>
<td valign="bottom" width="600">
<table border="0" cellpadding="0"
cellspacing="0" width="600" align=
"top">
<tr>
<td width="600" align="center">
<img height="80" src=
"http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif"
width="600" style=
"display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img alt="" height="820" src=
"http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif"
width="600" style=
"display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img height="225" src=
"http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif"
width="600" style=
"display:block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Table cell widths are staggered in iPhone Gmail.
Is there a way to force Gmail for iPhone to render table cells at their designated widths? Oddly, the multi-slice rows expand to the set 'width:650'. The single slice rows are narrower although they are also set to 'width:650'.
As far as I can tell, my emails look perfect in all desktop email clients - even Outlook! It also looks fine in Mail for iPhone.
I've tried using 'border-collapse:collapse', 'width:100%' on the tables and td's, and finally 'table-layout:fixed'.
This is the HTML:
`
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</title>
</head>
<body>
<img border="0" style="display:block;" src="spacer.gif" width="1" height="1" />
<table bgcolor="#fff" border="0" align="center" cellpadding="0" cellspacing="0" style="table-layout:fixed;width:650px;">
<tbody>
<tr>
<!--/*************** BEGIN LEAD ***************/ -->
<td align="left" valign="top" bgcolor="#fff" width="650"><span id="part1">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
<!-- /*************** END LEAD ***************/ -->
</tr>
<!-- /*************** BEGIN HEADER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="650"><span style="font-family: Arial, Helvetica, sans-serif; font-size:10px; color:#666; line-height:13px;margin-top:2px;"><a style="color:#666; text-decoration:underline;line-height:13px;" href="">XXXXXXXXXXXXXX</a> iXXXXXXXXXXXXXXXXXXX<a style="color:#666; text-decoration:underline;font-size:10px;line-height:13px;" href=""> XXXXXXXXXXXX</a>XXXXXXXXXXXXXXXXX<br />
<span style="font-weight:bold;">XXXXXXXXXXXXXXXXX</span> XXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><img src="spacer.gif" width="650" height="46" border="0" style="display: block;" /></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="47" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="280"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_01.gif" width="280" height="47" alt="Territory Ahead"> </td>
<td width="370"><img border="0" style="display:block;margin:0;padding:0;" src="spacer3_02.gif" width="370" height="47" alt=""></td>
</tr>
</table></td>
</tr>
<tr>
<td><table id="Table_01" width="650" height="31" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="97"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_03.gif" width="97" height="31" alt="Men's"> </td>
<td width="90"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_04.gif" width="90" height="31" alt="Women's"> </td>
<td width="93"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_05.gif" width="93" height="31" alt="Isabella Bird"> </td>
<td width="132"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_06.gif" width="132" height="31" alt="Men's Clearance"> </td>
<td width="83"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_07.gif" width="83" height="31" alt="Women's Clearance"> </td>
<td width="155"> <img border="0" style="display:block;margin:0;padding:0;" src="spacer3_08.gif" width="155" height="31" alt="eGift Cards"> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-top: solid 1px #b69358;" width="650">
<tr>
<td width="650" style="height:8px;" ></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<!-- /*************** END HEADER INC ***************/ -->
<!-- /*************** BEGIN PROMO ***************/ -->
<!-- /*************** END PROMO ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><!-- /*************** BEGIN MAIN ***************/ -->
<table id="Table_01" width="650" height="1595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="650" height="352" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.jpg" width="650" height="405" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.jpg" width="650" height="408" alt=""></td>
</tr>
<tr>
<td width="650"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_04.jpg" width="650" height="430" alt=""></td>
</tr>
</table>
<!-- /*************** END MAIN ***************/ --></td>
</tr>
<!-- /*************** BEGIN FOOTER INC ***************/ -->
<tr>
<td align="center" valign="top" bgcolor="#fff" width="650"><table width="650" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="650"><table id="Table_01" width="650" height="32" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="125"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_01.gif" width="125" height="32" alt=""></td>
<td width="88"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_02.gif" width="88" height="32" alt=""></td>
<td width="158"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_03.gif" width="158" height="32" alt=""></td>
<td width="105"><img border="0" style="display:block;" src="spacer_04.gif" width="105" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_05.gif" width="31" height="32" alt=""></td>
<td width="31"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_06.gif" width="31" height="32" alt=""></td>
<td width="112"><img border="0" style="display:block;margin:0;padding:0;" src="spacer_07.gif" width="112" height="32" alt=""></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td align="center" style="padding-top:20px;" width="650"><span style="font-family:Arial, Helvetica, sans-serif;font-size:10px;color:#666; line-height:13px;"><a style="font-size:10px;color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXXX</a> | <a style="font-size:10px; color:#666; text-decoration:none;" href="">XXXXXXXXXXXXXXX</a><br />
<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<tr>
<td width="650"><span style="font-family: Geneva, Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000;"><img src="spacer.gif" width="650" height="49" border="0" style="display: block;margin:0;padding:0;"></span></td>
</tr>
</tbody>
</table></td>
</tr>
<!-- /*************** END FOOTER INC ***************/ -->
<!-- /*************** BEGIN DISC ***************/ -->
<tr>
<td align="left" valign="top" bgcolor="#fff" width="650"><span style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000;">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span></td>
</tr>
<!-- /*************** END DISC ***************/ -->
</tbody>
</table>
</body>
</html>
`
Finally found the solution! For an image to render at full width in the Gmail mobile app, the img tag must contain the style property set to style="display:block;min-width:650px;. This forces the content to full width as the Gmail mobile app is programmed to 'auto-adjust' the size of elements within the email. Thanks for your help on this Jon!
In the sliced rows, you don't have width="" set in your <td> tags. I know it is in the image tags, but it might make a difference.
Also try using style="margin: 0; border: 0; padding: 0; display: block;" on your images, it may help.
Try those 2 things - if they don't help, update and re-post the code so we can eliminate those potential issues. A screenshot/image of the error might also help.
I have an HTML Email campaign that I have tested with EmailOnAcid.com. The email displays fine in almost all clients except Lotus Notes v6.5, v7, v8 :(
In Lotus Notes 6.5 & 7, at the end of the email, Lotus seems to repeat the email from the start again, so it looks like the same email has been put in twice, but it hasn't.
Is there a mimimum height for HTML emails in Lotus? (height of my email is around 474px).
I have specified height on all image elements and on tags.
In Lotus Notes 8, there is a minor problem; the lower part of the footer image repeats itself?
Does anyone have ideas as to what is causing these problems??
Thanks in advance.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Email</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="650" align="center">
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="650"><img src="http://www.website.com/images/hdr.jpg" width="650" height="36" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="137" height="53"><img src="http://www.website.com/images/hdr_left.gif" width="137" height="53" border="0" alt="" style="display:block;margin:0;"></td>
<td width="513" height="53"><img src="http://www.website.com/images/hdr_right.jpg" width="513" height="53" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="650"><img src="http://www.website.com/images/spacer_top.jpg" width="650" height="28" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650">
<tr>
<td width="397" valign="top"><img src="http://www.website.com/images/gold_main.jpg" width="397" height="271" border="0" alt="" style="display:block;margin:0;"></td>
<td width="240" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="240">
<tr>
<td><img src="http://www.website.com/images/title_text.gif" width="240" height="105" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
<tr>
<td><img src="http://www.website.com/images/spacer_white.gif" width="240" height="12" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
<tr>
<td><font style="font-family:verdana; font-size:10px;" color="#808180"><b>TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE</b></font></td>
</tr>
<tr>
<td><img src="http://www.website.com/images/spacer_white.gif" width="240" height="12" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
<tr>
<td><font style="font-family:verdana; font-size:10px;" color="#808180"><b>TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE TEXT GOES HERE</b></font></td>
</tr>
</table>
</td>
<td width="13"><img src="http://www.website.com/images/spacer_white.gif" width="13" height="2" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="650" height="12"> </td>
</tr>
<tr>
<td width="650">
<table cellpadding="0" cellspacing="0" border="0" width="650" height="85">
<tr>
<td width="397" height="85"><img src="http://www.website.com/images/ftr_left_cmras.jpg" width="397" height="85" border="0" alt="" style="display:block;margin:0;"></td>
<td width="253" height="85"><img src="http://www.website.com/images/ftr_right_lnk.gif" width="253" height="85" border="0" alt="" style="display:block;margin:0;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
It appears this might be an issue with the EmailsOnAcid testing system.