just created one email template for gmail
here is my html code.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dance</title>
</head>
<body>
<table style="background-color: #ffffff; border-collapse:collapse;border-spacing: 0;margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
it is displaying only 1 image while other images are not displaying..
need help what am i doing wrong ?
If you see the code carefully you posted here; The last image should be inside the table but it has a closing tag only </table>. <table> open tag is missing in Layout.
You need to put the images on a server
<a href="http://www.xxx.net.au/" title="title"><img src="http://www.yourserver.com/images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/>
Luiggi
If you check your code, the table structure is incorrect. For the first row of image, you have added end tag of table. For 2nd and 3rd row of image, extra tag of </table> is there, which gives the error of not displaying those images. The HTML code will be as below.
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dance</title>
</head>
<body>
<table style="background-color: #ffffff; border-collapse:collapse;border-spacing: 0;margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/>
</td>
</tr>
<tr>
<td>
<img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/>
</td>
</tr>
<tr>
<td>
<img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Have you tried giving complete URL (ie, http://<your_site_url>/images/top_logo_03.png) to image instead of images/top_logo_03.png??
Please check this code.
<table style="background-color: #ffffff; border-collapse:collapse;border-spacing: 0;margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
</table>
Your code is wrong: try it:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dance</title>
</head>
<body>
<table style="background-color: #ffffff; border-collapse:collapse;border-spacing: 0;margin:0 auto;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
<tr>
<td><img src="images/top_logo_03.png" alt="title" width="657" height="252" border="0" style="display:block"/></td>
</tr>
</table>
</body>
</html>
you had misplaced some tags
Looking into your code first of all you can see your table structure is incorrect. Try correcting it.
Secondly you have used relative paths for your images. Try using absolute path for your images.
For Ex-
instead of <img src="images/xyz.gif: />, use <img src="http:""www.example.com/images/xyz.gif">
Related
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
I'm editing a table where I use only 760 width images.
Now I need to put 2x 380 width images side by side, but it ain't working out. Can anyone help? Much appreciated!
I've highlighted the section commenting "I'm having trouble here". Please check.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>TITLE</title>
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<body bgcolor="#FFFFFF" style="margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);">
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4;" width="100%">
<tbody>
<tr>
<td align="center"><!-- Header -->
<table border="0" cellpadding="0" cellspacing="0" width="760">
<tbody>
<tr>
<td align="center">
<p style="color: #f4f4f4;font-size:1px;">Hello
</p>
<p align="center" style="color:#777777;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px">Online version
</p>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="760">
<tbody>
<tr>
<td width="760"><a border="0" ><img alt="Banner" border="0" height="224" src="http://www.************" style="display:block;border:0 none" title="Banner" width="760" /> </a></td>
</tr>
</tbody>
</table>
<!-- End Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" itemscope="" itemtype="http://schema.org/Offer" style="background-color:#FFFFFF;" width="760">
<tbody><!-- Main -->
<tr>
<td align="center" colspan="2">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left"><a border="0" href="htt***************" target="_blank"><img alt="Intro" border="0" src="http://www**********.jpg?1502297240" style="display:block" title="Intro" /> </a></td>
</tr>
<tr>
<td align="left"><a border="0" href="http***************" target="_blank"><img alt="******" border="0" src="http://www*********/3.jpg?1502297240" style="display:block" title="*****" /> </a></td>
</tr>
<tr>
<td align="left"><a border="0" href="http************" target="_blank"><img alt="******" border="0" src="http://www************4.jpg?1502297240" style="display:block" title="****************" /> </a></td>
</tr>
<!--I'M HAVING TROUBLE HERE-->
<tr>
<td align="left"><a border="0" href="*******************" target="_blank"><img alt="LEFT PICTURE" border="0" src="http://www********5.jpg?1502297240" style="display:block" title="LEFT PICTURE" /> </a></td>
</tr>
<tr>
<td align="right"><a border="0" href="https://www***************" target="_blank"><img alt="RIGHT PICTURE" border="0" src="http://www**********6.jpg?1502297240" style="display:block" title="RIGHT PICTURE" /> </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End -->
</tbody>
</table>
<!-- Unsubscribe to anti cancer foundation -->
<table border="0" cellpadding="10" cellspacing="4" height="70" style="margin-bottom:20px;margin-top:20px;" width="504">
<tbody>
<tr>
<td style="background-color:#FFFFFF;border:1px solid #d1d1d1">
<center style="font-family: Arial,Helvetica,sans-serif;font-size:13px;">
<p style="margin:0;color:#444">
<br>
**************</span><br>
<br>
<a href="*******************</a>
</p>
</center>
</td>
</tr>
</tbody>
</table>
<!-- Donations --></td>
</tr>
</tbody>
</table>
<table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4" width="100%">
<tbody>
<tr>
<td align="center">
<p align="center" style="color:#444444;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><br>**********</br>
<br>************</br><br>**************</br><br>***********</br><br>***********</br><br>***************</br><br>***************</br>
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Also, if you see something that is totally unnecessary, please remove as well.
I'm pretty sure this whole code could be shortened.
use tr, td as below for side by side image
<tr>
<td><img style="float:left;width:380px" ><img style="float:right;width:380px"></td>
</tr>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>TITLE</title>
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<body bgcolor="#FFFFFF" style="margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);">
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4;" width="100%">
<tbody>
<tr>
<td align="center"><!-- Header -->
<table border="0" cellpadding="0" cellspacing="0" width="760">
<tbody>
<tr>
<td align="center">
<p style="color: #f4f4f4;font-size:1px;">Hello
</p>
<p align="center" style="color:#777777;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px">Online version
</p>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="760">
<tbody>
<tr>
<td width="760"><a border="0" ><img alt="Banner" border="0" height="224" src="http://www.************" style="display:block;border:0 none" title="Banner" width="760" /> </a></td>
</tr>
</tbody>
</table>
<!-- End Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" itemscope="" itemtype="http://schema.org/Offer" style="background-color:#FFFFFF;" width="760">
<tbody><!-- Main -->
<tr>
<td align="center" colspan="2">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left"><a border="0" href="htt***************" target="_blank"><img alt="Intro" border="0" src="http://www**********.jpg?1502297240" style="display:block" title="Intro" /> </a></td>
</tr>
<tr>
<td align="left"><a border="0" href="http***************" target="_blank"><img alt="******" border="0" src="http://www*********/3.jpg?1502297240" style="display:block" title="*****" /> </a></td>
</tr>
<tr>
<td align="left"><a border="0" href="http************" target="_blank"><img alt="******" border="0" src="http://www************4.jpg?1502297240" style="display:block" title="****************" /> </a></td>
</tr>
<!--I'M HAVING TROUBLE HERE-->
<tr>
<td align="center"><a border="0" href="*******************" target="_blank"><img alt="LEFT PICTURE" style="float:left;width:380px" border="0" src="http://www********5.jpg?1502297240" style="display:block" title="LEFT PICTURE" /> </a><a border="0" href="https://www***************" target="_blank"><img alt="RIGHT PICTURE" style="float:right;width:380px" border="0" src="http://www**********6.jpg?1502297240" style="display:block" title="RIGHT PICTURE" /> </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End -->
</tbody>
</table>
<!-- Unsubscribe to anti cancer foundation -->
<table border="0" cellpadding="10" cellspacing="4" height="70" style="margin-bottom:20px;margin-top:20px;" width="504">
<tbody>
<tr>
<td style="background-color:#FFFFFF;border:1px solid #d1d1d1">
<center style="font-family: Arial,Helvetica,sans-serif;font-size:13px;">
<p style="margin:0;color:#444">
<br>
**************</span><br>
<br>
<a href="*******************</a>
</p>
</center>
</td>
</tr>
</tbody>
</table>
<!-- Donations --></td>
</tr>
</tbody>
</table>
<table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4" width="100%">
<tbody>
<tr>
<td align="center">
<p align="center" style="color:#444444;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><br>**********</br>
<br>************</br><br>**************</br><br>***********</br><br>***********</br><br>***************</br><br>***************</br>
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
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 am facing a problem with Arabic data. It is not displaying properly in IE whereas it is displaying properly in Chrome.
I am using two files 'frameset.html'& 'legend.html' . 'legend.html' has Arabic content.Earlier I used div's in place of frames in 'frameset.html' and the Arabic data was working fine but after I changed, it is having problem.
Frameset.html:
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("#topArb").load("Top_arb.jsp");
$("#actionBar").load("ActionBar.jsp");
$("#viewInbox").load("ViewInbox.jsp");
$("#legend").load("Legend.html");
$("#nav").load("Nav.jsp");
});
</script>
</head>
<body>
<div id="main-container">
<div id="topArb">
</div>
<div id="left-container">
<div id="actionBar">
</div>
<div id="viewInbox">
</div>
<div id="legend">
</div>
</div>
<div id="right-container">
<div id="nav">
</div>
</div>
</body>
</HTML>
legend.html:-
<HTML >
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<BODY topmargin=0>
<table align="center" style="" width="100%" height="20">
<tr>
<td>
<table>
<tr>
<td><IMG SRC="imgs/newH.gif" WIDTH="16" HEIGHT="16"
BORDER="0" ALT=""></td>
<td class="SET">وثيقة عاجلة</td>
</tr>
<tr>
<td><IMG SRC="imgs/new.gif" WIDTH="16" HEIGHT="16" BORDER="0"
ALT=""></td>
<td class="SET">وثيقة عادية</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><IMG SRC="imgs/BnewH.gif" WIDTH="16" HEIGHT="16"
BORDER="0" ALT=""></td>
<td class="SET">وثيقة مؤرشفة عاجلة</td>
</tr>
<tr>
<td><IMG SRC="imgs/Bnew.gif" WIDTH="16" HEIGHT="16"
BORDER="0" ALT=""></td>
<td class="SET">وثيقة مؤرشفة عادية</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><IMG SRC="imgs/CloseDoc.gif" WIDTH="18" HEIGHT="18"
BORDER="0" ALT=""></td>
<td class="SET">غير مقروء</td>
</tr>
<tr>
<td><IMG SRC="imgs/OpenDoc.gif" WIDTH="18" HEIGHT="18"
BORDER="0" ALT=""></td>
<td class="SET">مقروء</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><IMG SRC="imgs/L.gif" WIDTH="18" HEIGHT="18" BORDER="0"
ALT=""></td>
<td class="SET">رد</td>
</tr>
<tr>
<td><IMG SRC="imgs/ic_waitingreply.gif" WIDTH="18"
HEIGHT="18" BORDER="0" ALT=""></td>
<td class="SET">نسخة من الوثيقة</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td><IMG SRC='images/ic_suspend.gif' WIDTH="18" HEIGHT="18"
BORDER="0" ALT=""></td>
<td class="SET">الأعمال المؤجلة</td>
</tr>
<tr>
<td><IMG SRC='imgs/ic_close.gif' WIDTH="18" HEIGHT="18"
BORDER="0" ALT=""></td>
<td class="SET">الأعمال المغلقة</td>
</tr>
</table>
</td>
<td><IMG SRC="imgs/Drafts.gif" WIDTH="18" HEIGHT="18" BORDER="0"
ALT=""></td>
<td class="SET">مسودة</td>
</tr>
</table>
</BODY>
Here my legend.html(marked) is displayed in junk data instead of arabic data
If the document gets corrupted only when loaded via AJAX, try ajaxSetup():
$.ajaxSetup({
"beforeSend": function (xhr) {
xhr.overrideMimeType("text/html; charset=UTF-8");
}
});
$("#legend").load("Legend.html");
My problem is solved just by changing the file from legend.html to legend.jsp
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.