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
Related
I'm trying to create an email signature and it looks fine in my web browser.
(https://i.postimg.cc/Pq2v5msd/Email-Right.png)
However, when I add it to Outlook, it creates weird padding around my image cells.
(https://i.postimg.cc/d0qTF5fW/Email-Wrong.png)
I'm not sure what step I'm missing in my code. Can I get some help please?
<html>
<head>
<title>Test Email</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Test Email.psd) -->
<table id="Table_01" width="510" height="170" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="7">
<a href=https://www.website.com><img src="https://i.postimg.cc/HnQHs6wP/Email-Test-01.jpg" width="159" height="170" alt=""></td>
<td colspan="2" rowspan="2">
<img src="https://i.postimg.cc/BZDJgnrc/Email-Test-02.jpg" width="313" height="79" alt=""></td>
<td>
<a href=https://www.linkedin.com><img src="https://i.postimg.cc/9FYV6NFD/Email-Test-03.jpg" width="38" height="43" alt=""></td>
<td height="43" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.facebook.com><img src="https://i.postimg.cc/VL8mHc1y/Email-Test-04.jpg" width="38" height="43" alt=""></td>
<td height="36" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href="tel:7777777777"><img src="https://i.postimg.cc/rwycMCKQ/Email-Test-05.jpg" width="110" height="29" alt=""></td>
<td rowspan="2">
<a href="mailto:email#email.com"><img src="https://i.postimg.cc/RZPmF6t9/Email-Test-06.jpg" width="203" height="29" alt=""></td>
<td height="7" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.youtube.com><img src="https://i.postimg.cc/QMH3W8g7/Email-Test-07.jpg" width="38" height="42" alt=""></td>
<td height="22" nowrap></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<a href=https://goo.gl/maps><img src="https://i.postimg.cc/Pq9kWgKR/Email-Test-08.jpg" width="313" height="39" alt=""></td>
<td height="20" nowrap></td>
</tr>
<tr>
<td rowspan="2">
<a href=https://www.website.com><img src="https://i.postimg.cc/B6FfMmVQ/Email-Test-09.jpg" width="38" height="42" alt=""></td>
<td height="19" nowrap></td>
</tr>
<tr>
<td colspan="2">
<img src="https://i.postimg.cc/D0KkD19Q/Email-Test-10.jpg" width="313" height="23" alt=""></td>
<td height="23" nowrap></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<div style="background-color:#FFFFFF">
<style>
hr {
height: 1px;
background-color: #9d9d9d;
border: none;
}
div {
padding-top: 5px;
padding-right: 8px;
padding-bottom: 1px;
padding-left: 8px;
}
</style>
<body>
<hr>
<span style="font-size:9pt; font-family: 'Cambria','times new roman','garamond',serif; color:#223488;">This email may contain confidential and/or proprietary information. If you are not the intended addressee or have received this email in error, please inform the sender immediately and destroy this email. Unauthorized copying and/or forwarding of this email is strictly prohibited.
</p>
</div>
</body>
</html>
I want to make an html signature for my webmail. I have following html signature.
<html>
<head>
<title>last-one</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="900" height="420" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_01.png" width="960" height="119" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_02.png" width="960" height="109" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_03.png" width="960" height="16" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_04.png" width="960" height="19" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_05.png" width="960" height="30" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_06.png" width="960" height="26" alt="">
</td>
</tr>
<tr>
<td colspan="5">
<img src="EMAIL-SIGNETURE-2_07.png" width="960" height="88" alt=""></td>
</tr>
<tr>
<td>
<img src="EMAIL-SIGNETURE-2_08.png" width="179" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_09.png" width="34" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_10.png" width="35" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_11.png" width="40" height="79" alt="">
</td>
<td>
<img src="EMAIL-SIGNETURE-2_12.png" width="675" height="79" alt=""></td>
</tr>
</table>
</body>
</html>
And my expected output if following
But when i paste the html code in Web mail html signature section my output slightly change which look like this.
Can you please tell me what's wrong with expected vs original output?
try this if css:
table {border-collapse: collapse;}
or inline html style
<table id="Table_01" width="900" height="420" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
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">
I've always used rowspan for web site development but now designing and developing email comms rowspan, it appears constantly breaks. In multiple clients it displays with a 10/20px gap. How can I avoid using row span even if I need to have two images side by side in an email (such as a header)?
<html>
<head>
<title>StPatricksDAy-PostCard</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (StPatricksDAy-PostCard.psd) -->
<table id="Table_01" width="657" height="684" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_01.gif" width="19" height="643" alt=""></td>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_02.gif" width="636" height="14" alt=""></td>
<td rowspan="6">
<img src="images/StPatricksDAy-PostCard_03.gif" width="2" height="643" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_04.gif" width="636" height="96" alt=""></td>
</tr>
<tr>
<td colspan="3">
<img src="images/StPatricksDAy-PostCard_05.gif" width="636" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/StPatricksDAy-PostCard_06.jpg" width="257" height="523" alt=""></td>
<td>
<img src="images/StPatricksDAy-PostCard_07.gif" width="368" height="449" alt=""></td>
<td rowspan="3">
<img src="images/StPatricksDAy-PostCard_08.gif" width="11" height="524" alt=""></td>
</tr>
<tr>
<td>
<img src="images/StPatricksDAy-PostCard_09.gif" width="368" height="74" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/StPatricksDAy-PostCard_10.gif" width="625" height="1" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_11.gif" width="657" height="28" alt=""></td>
</tr>
<tr>
<td colspan="5">
<img src="images/StPatricksDAy-PostCard_12.gif" width="657"
height="13" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Hey I made an image in Photoshop for an email newsletter. I sliced the image and added links to the images I want clicked, but when I send it in an email there are spaces between the images. How can I remove the spaces? Here is the coding.
<html>
<head>
<title>email_template_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (email_template_1.psd) -->
<table id="Table_01" width="650" height="801" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/ttcc_01.jpg" width="650" height="65" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/ttcc_02.jpg" width="507" height="33" alt=""></td>
<td rowspan="2">
<valign=top align=left width=33><img src="images/ttcc_03.jpg" width="33" height="33" border="0" alt="Blog"></td>
<td rowspan="2">
<img src="images/ttcc_04.jpg" width="10" height="33" border="0" alt="space"></td>
<td>
<valign=top align=left width=33><img src="images/ttcc_05.jpg" width="33" height="32" border="0" alt="Facebook"></td>
<td colspan="2" rowspan="2">
<img src="images/ttcc_06.jpg" width="67" height="33" alt=""></td>
</tr>
<tr>
<td>
<img src="images/ttcc_07.jpg" width="33" height="1" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_08.jpg" width="650" height="25" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_09.jpg" width="650" height="162" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_10.jpg" width="650" height="347" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/ttcc_11.jpg" width="504" height="1" alt=""></td>
<td colspan="6">
<img src="images/ttcc_12.jpg" width="146" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/ttcc_13.jpg" width="324" height="72" alt=""></td>
<td colspan="6"><valign=top align=left width=280><img src="images/ttcc_14.jpg" algin="left" width="280" height="72" border="0" alt="Click Here for more Information!"></td>
<td>
<img src="images/ttcc_15.jpg" align="left" width="46" height="72" border="0" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/ttcc_16.jpg" width="650" height="95" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="324" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="180" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="3" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="10" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="33" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="21" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="46" height="1" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
and the site
file:///Users/Dad/Dropbox/Apps/site44/ttc.site44.com/ttcc.html
Since your Photoshop is creating tables, and poor ones at that, you have a different issue. I would recommend that you apply the following style to your table:
#Table_01 {
border-collapse: collapse:
}
That should fix the problem.
But if you weren't using tables, you could still have the same issue. This is because the spaces between the images are whitespace. They occur because your server doesn't optimize the HTML output. The reason this is a problem is because images and spaces can both be interpreted as having the CSS property display: inline. (I know some browsers don't do that to images, but when they do, this kind of thing happens.)
The solution I've used is to strip out all whitespace from between tags when it matters. Here's a sample function for doing that.
function stripSpaceBetweenTags(container) {
var rex = />\s+</gm;
var htmlString = $(container).html();
htmlString = htmlString.replace(rex,"><");
$(container).html(htmlString)
}
The container argument is a string that can be used as a valid jQuery selector. What happens is that it strips all cases of whitespace (spaces, tabs, linefeeds, etc.) between tags if there is only whitespace between those tags. This is important: if you have other characters, you don't want them stripped out.
Think of it as an ad hoc optimizer. You don't have to do this to the whole page, and it's probably better if you don't. But if you have a container that holds images which have to be tight, tight, tight, this is a good workaround.