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.
Related
I am creating an email template and the header section of the email is a code block I took from another site.
The said header code block contains a logo and few text next to it. Here is an image of it.
In the editor of the Email Service Provider I use, the code block is fully visible but when I click on preview, the text dissapears and only the logo is visible like this
Does anyone know why is that.
Here is the code
`
<td class="esd-stripe" align="center">
<table class="es-header-body" align="center" cellpadding="0" cellspacing="0" width="550" style="background-color: #f6f3f0;" bgcolor="#f6f3f0">
<tbody>
<tr>
<td class="esd-structure es-p20" align="left">
<!--[if mso]><table width="560" cellpadding="0"
cellspacing="0"><tr><td width="98" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left">
<tbody>
<tr>
<td width="98" class="es-m-p0r es-m-p20b esd-container-frame" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-image es-m-txt-c" style="font-size: 0px;"><a target="_blank" href="https://viewstripo.email"><img src="https://ychxix.stripocdn.email/content/guids/CABINET_d3bb686276c9132ac5465c69a2399624/images/carla_logo.png" alt style="display: block;" width="65"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="20"></td><td width="442" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" align="right">
<tbody>
<tr>
<td width="442" align="left" class="esd-container-frame">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="esd-mobile-hidden">
<td align="center" class="esd-block-spacer" height="16"></td>
</tr>
<tr>
<td class="esd-block-menu" esd-tmp-menu-color="#2d0824">
<table cellpadding="0" cellspacing="0" width="100%" class="es-menu">
<tbody>
<tr class="links">
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/" style="color: #169179;"><b>Home<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/contact" style="color: #169179;"><b>About<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/about" style="color: #169179;"><b>Contact<b></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
`
I tried to change the font color and backround color to see if that was overlapping the text, but it didnt work.
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
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 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>
I have an html file that looks like
<HTML>
<BODY>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="400" align="right" valign="top" class="text_rail_left"></td>
<td width="100%" align="left" valign="top" class="text_back_color"><table border="0" cellPadding="0" cellSpacing="0" width="100%"><tr>
</tr><tr>
<td width="100%" align="left" align="top"><table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="center" valign="top" class="inside_heading_text">Train Names with Details</td>
</tr> <tr>
<td><b><BR><BR> SORRY !!! No Matching buses Found</b></td></tr>
<tr><td>
</td></tr></table>
<td align="left" valign="top" class="pad_self"><table width="100%" border="0" cellspacing="2" cellpadding="2">
<tr><td align="right" valign="top"> </td>
</tr></table></td>
</tr></table></td>
<td align="left" valign="top" class="text_rail_right"> </td>
</tr>
<tr>
<td width="10" align="left" valign="top"><img src="http://www.indianrail.gov.in/main_text_left_bottom2.gif" alt="" width="8"/></td>
<td width="100%" align="left" valign="top" class="text_rail_bottom"><img src="http://www.indianrail.gov.in/blank.gif" alt="" width="1" height="8" /></td>
<td width="10" align="right" valign="top"> <img src="http://www.indianrail.gov.in/main_text_right_bottom2.gif" alt="" width="8" /></td>
</tr></table><body>
<FONT size=1>No. of Queries : 0839425885
, Server : YAMUNA
, Dated : 15-05-2014 Time:07:15:26 Hrs</font></td></tr></table></td></tr> </table></td></tr></table></td></tr></table></td></tr><tr><td align="left"valign="top"><table width="970" border="0" cellspacing="0" cellpadding="0"><tr> <td width="9" align="left" valign="top"><img src="http://www.indianrail.gov.in/images/footer_upper_lft.gif" alt="" width="9" height="49" /></td><td width="100%%" align="left" valign="top" class="footer_upper"><table width="100%%" border="0" cellspacing="1" cellpadding="0"><tr><td align="center" valign="top" class="main_footer_upper">Home | Ministry of Railways | Trains between Stations | Booking Locations | CRIS | CONCERT | Advertise with CRIS | Railway Map | FAQ | Sitemap | Feedback</td></tr><tr><td align="center"valign="top" class="copy_footer" style="padding-top:3px;"><span class="main_footer_copy">Copyright</span> © 2010, Centre For Railway Information Systems, Designed and Hosted by CRIS | <span class="main_footer_copy">Disclaimer</span><br />Best viewed at 1024 x 768 resolution with Internet Explorer 5.0 or Mozila Firefox 3.5 and higher</td></tr> </table></td><td width="9" align="right" valign="top"><img src="http://www.indianrail.gov.in/images/footer_upper_rgt.gif" alt="" width="9" height="49" /></td></tr></table></td></tr></table></td></tr></table><script type="text/javascript">anylinkmenu.init("menuanchorclass")</script>
</BODY>
</HTML>
I want to write an xpath query to read the string
SORRY !!! No Matching buses Found
There's no unique class that identifies the class with the string. I tried the xpath query
#"//td[#class='inside_heading_text']/tr"
but it doesnt seem to work.
Can someone point me in the right direction? I'm using the ONO library in Objective-C to parse the html.
Well, this would get you the container of the "SORRY" text
//*[contains(text(),'SORRY')]
I recommend firefinder extension for firebug (on firefox) for an easy way to try xpaths.
That's some ugly HTML you got there.
There are unclosed elements, repeated td/#align attributes, etc. You're going to have to clean it up first if you want to use XPath.
If you can manually or automatically clean it up at least to this point:
<?xml version="1.0" encoding="utf-8"?>
<HTML>
<BODY>
<TABLE width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="400" align="right" valign="top" class="text_rail_left">
</td>
<td width="100%" align="left" valign="top" class="text_back_color">
<table border="0" cellPadding="0" cellSpacing="0" width="100%">
<tr>
</tr>
<tr>
<td width="100%" align="left">
<table width="100%" border="0" cellspacing="2" cellpadding="0">
<tr>
<td align="center" valign="top" class="inside_heading_text">Train Names with Details</td>
</tr>
<tr>
<td>
<b>
<BR/>
<BR/> SORRY !!! No Matching buses Found</b>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td align="left" valign="top" class="text_rail_right"></td>
</tr>
</TABLE>
</BODY>
</HTML>
Then this XPath will select the "SORRY..." text given the inside_heading_text point of reference that you mention:
//td[#class='inside_heading_text']/../following-sibling::tr[1]/td[1]/b