I am facing a very annoying issue regarding HTML mails. My mail template is working absolutely fine with all browsers and it is showing perfectly fine in gmail, office mail (web). But with outlook client I am getting 4 pixel extra padding.
I have checked the compute section where I can see the image size which I have defined and actual size in mail are different.
Here I am attaching the problematic part screenshot for your reference.
Could you please help me on it.
HTML Code
<table width="859" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="180"><img src="/sites/default/files/img/report_mail_header.jpg" alt="" /></td>
</tr>
<tr>
<td height="136"><img src="/sites/default/files/img/report_mail_title.jpg" alt="" /></td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" cellspacing="0" cellpadding="0" border="0" bgcolor="#f9f9f9">
<tr>
<td colspan="3" height="58"><img src="/sites/default/files/img/box1.jpg" alt="" /></td>
</tr>
<tr>
<td width="111" height="354"><img src="/sites/default/files/img/box4.jpg" alt="" /></td>
<td valign="top">
<table width="90%" cellspacing="0" cellpadding="5" border="0" align="center">
<tr>
<td align="center" style="font-size:18px;line-height:135%"><br><br>Details of the accounts that are part of our community of ****<br><br>Account status: <font color="#1f6d79">active or inactive institutions</font>
<br>Details of the <font color="#83babc">institutions that are really reporting</font>
<br>The details of the <font color="#1f6d79">accounts that entered to the platform the last month</font>
<br>As you know, "*** **** ****" is an initiative to create value to our customers - Leading our team to gain differentiation and loyalty
<br><strong><font color="#1f6d79">Best Regards,<br>**** ****</font></strong></font>
</td>
</tr>
</table>
</td>
<td width="114" align="right"><img src="/sites/default/files/img/box2.jpg" alt="" /></td>
</tr>
<tr>
<td colspan="3" height="132"><img src="/sites/default/files/img/box3.jpg" alt="" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="120"><img src="/sites/default/files/img/report_mail_footer.jpg" alt="" /></td>
</tr>
</table>
Related
I'm trying to get the image to align to the right and the rows with text on the left in my table using colspan. This method usually works when the image is on the left but now I want it on the right it wont work. Please keep in mind this is for outlook email so you cannot use floats, align="right" etc.
heres my code:
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" width="580" style="border: 1px solid;">
<tr>
<td style="font-size: 10px;">sdfsdfsdfsdfdsdfhhhhhhhhlklkjlkj</td>
<td></td>
</tr>
<tr>
<td>sdfsdf</td>
</tr>
<tr>
<td rowspan="3" ><img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400"></td>
</tr>
</table>
</td>
</tr>
</table>
https://jsfiddle.net/yk3fanoq/1/
You need to put the text and image in two columns (td)
<table cellpadding="0" cellspacing="0" width="600" style="width: 100%; max-width: 600px;">
<tr>
<td align="center">
<tr>
<td align="left">
sdfsdfsdfsdfdsdfhhhhhhhhlklk
sdfsdf
</td>
<td rowspan="3" align="right">
<img src="https://gallery.mailchimp.com/b083c967cd22e35ab4ce75e7a/images/e3c991a6-22c4-4ee2-a08d-7d23e30f8c29.png" alt="" width="400">
</td>
</tr>
</td>
</tr>
</table>
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
I am trying to create a "cool" email signature for my company using only text and html with NO images whatsoever. I am trying to recreate our company's logo using only tables since it is basically a four cell table with different bg colors. What seemed easy at first has become quite a nuisance. It obviously looks good in browsers but once I paste it into Outlook 2013 the cells don't retain their height and width values. Any suggestions on how to make this work across most current email clients??
http://codepen.io/anon/pen/wqaLm
Firstly, a good technique is to style your cells inline like:
<td style="width:10px; height:10px;">
Secondly: have a look at this article: "A complete breakdown of the CSS support for every popular mobile, web and desktop email client"
Here is a basic example. Not sure exactly what the logo looks like, so here are a few versions. If you want to have the gap between the cells smaller than 20px, you need to use the 3rd technique. This is because Outlook has a min-height on cells of around 19px which will create a larger gap between the rows.
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="50" bgcolor="#333333">
</td>
<td width="50" height="50" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="50" height="50" bgcolor="#444444">
</td>
<td width="50" height="50" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="40" height="40" bgcolor="#333333">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#555555">
</td>
</tr>
<tr>
<td width="40" height="20">
</td>
<td width="20" height="20">
</td>
<td width="40" height="20">
</td>
</tr>
<tr>
<td width="40" height="40" bgcolor="#444444">
</td>
<td width="20" height="40">
</td>
<td width="40" height="40" bgcolor="#666666">
</td>
</tr>
</table>
<br><br>
<table width="60" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="30" height="30" align="left" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#333333">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="top">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#555555">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="30" height="30" align="left" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#444444">
</td>
</tr>
</table>
</td>
<td width="30" height="30" align="right" valign="bottom">
<table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#666666">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="33%" border="0" border-spacing: 0px; cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="01.png" width="619" height="143" " /></td>
</tr>
<tr>
<td height="13" valign="top"><img 02.png" width="75" height="13" /></td>
<td width="32%" valign="top"><img src="03.png" width="200" height="13" /></td>
<td width="56%" colspan="2" valign="top"><04.png" width="344" height="13" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><img 05.png" width="619" height="150" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="85%"><img src="06.png" width="474" height="28" /></td>
<td width="11%"><img src="07.png" width="71" height="28" /></td>
<td width="4%"><img src="08.png" width="74" height="28" /></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="09.png" width="619" height="144" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="76%" height="32"><img src="10.png" width="474" height="32"/></td>
<td width="12%"><img src="11.png" width="71" height="32"/></td>
<td width="12%"><img src="12.png" width="74" height="32"/></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="4" valign="top"><img src="13.png" width="619" height="140" /></td>
</tr>
<tr>
<td colspan="4" valign="top"><table width="99%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="76%"><img src="14.png" width="474" height="36"/></td>
<td width="12%"><img src="15.png" width="71" height="36" /></td>
<td width="12%"><img src="16.png" width="74" height="36"/></td>
</tr>
</table></td>
</tr>
<tr>
<td height="109" colspan="4" rowspan="2" valign="top"><img 19.png" width="619" /></td>
</tr>
</table>
I have this code in my email template. When I compile it on my local page, it works fine, but when I send it though email, gaps are appearing in between the lines and tables. I tried this also
<style>
table { border-spacing: 0px; }
</style>
But not worked. Anybody know about this issue?
Or how I should print it in php? so that it sends as an image in email. Because after receiving an email, when I forward it, then its shows me correct because it become an image. So I am thinking to make it as an image before shooting email in the script. But how can I print this html in php?
<table ... border-spacing: 0px; ...>
This isn't valid markup. border-spacing would be put within a style property:
<table ... style="border-spacing: 0px;" ...>
To remove the spacing, you'd simply add:
table {
border-collapse: collapse;
}
try this
<table cellspacing="0" cellpadding="0">
</table>
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.