Why this table is stretching? - html

I have observed this table deviates from its specified width..As I add a table to one of its cell, the table stretches..I tried to debug it but to no avail..The highlighted part is the table that stretches it..How can I fix this?
<!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>Untitled Document</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="720" border="1" align="center">
<!-- first part -->
<tr>
<td valign="top">
<!-- Start top spacer -->
<table width="720" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-top_2.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End top spacer -->
</td>
</tr>
<tr>
<td valign="top" bgcolor="#99FFFF">
<!-- Start body -->
<table width="720" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" >
<!-- start main body -->
<table cellspacing="0" cellpadding="0" width="662">
<tr>
<td>Main content
</td>
</tr>
</table>
</td>
<!-- End main body -->
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End body -->
</td>
</tr>
<tr>
<td valign="top">
<!-- Start bottom spacer -->
<table width="720" border="0" align="center">
<tr>
<td valign="top">
<img src="Spacer-bottom_left.jpg" width="46" height="21" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-bottom_top.jpg" width="21" height="21" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-bottom_right.jpg" width="52" height="21" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End bottom spacer -->
</td>
</tr>
<!-- /first part -->
</table>
</body>
</html>
http://jsfiddle.net/vq8hg/2/


Try code below.
<!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>Untitled Document</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="720" border="1" align="center">
<!-- first part -->
<tr>
<td valign="top">
<!-- Start top spacer -->
<table style="width:100%" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-top_2.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End top spacer -->
</td>
</tr>
<tr>
<td valign="top" bgcolor="#99FFFF">
<!-- Start body -->
<table style="width:100%" border="1" align="center">
<tr>
<td valign="top">
<img src="Spacer-top_1.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
<td valign="top" >
<!-- start main body -->
<table cellspacing="0" cellpadding="0" width="662">
<tr>
<td>Main content
</td>
</tr>
</table>
</td>
<!-- End main body -->
<td valign="top">
<img src="Spacer-top_3.jpg" width="29" height="40" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End body -->
</td>
</tr>
<tr>
<td valign="top">
<!-- Start bottom spacer -->
<table style="width:100%" border="0" align="center">
<tr>
<td valign="top">
<img src="Spacer-bottom_left.jpg" width="46" height="21" alt="Nopic" title="" />
</td>
<td valign="top" width="662">
<img src="Spacer-bottom_top.jpg" width="21" height="21" alt="Nopic" title="" />
</td>
<td valign="top">
<img src="Spacer-bottom_right.jpg" width="52" height="21" alt="Nopic" title="" />
</td>
</tr>
</table>
<!-- End bottom spacer -->
</td>
</tr>
<!-- /first part -->
</table>
</body>
</html>


Can you remove the width="662" from the table with "Main Content?" That appeared to fix it for me on jsfiddle...

Related

Getting Error in output of web-mail while pasting html signature (Difference of output expected vs original )

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;">

Email signature blocks are displaying weirdly, broken up and with padding

I made a html email signature, opened it up in browser where it looks fine, and pasted it into my gmail signature section, and each individual block has now got padding in between, and some of the blocks are side by side instead of next to each other.
Strangely by some fluke I managed to get it to look fine on outlook.This is what it's supposed to look like this https://postimg.org/image/uytldx3zd/
Here is the code i'm using- what am I doing wrong?
Any fix would be much appreciated,
Thanks
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size: 0.0em; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<!-- Paste Code Under This Line
_________________________________________________________________________________ -->
<title>emailsignature_500flat</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">
<!-- Save for Web Slices (emailsignature_500flat.psd) -->
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href= callto:4411893280328><img src="https://s20.postimg.org/tk69dnist/emailsignature_500flat_01.jpg" width="254" height="50" alt=""><a href= callto:441189328032></td>
<td rowspan="3">
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/o8rcsyrl9/emailsignature_500flat_02.jpg" width="296" height="113" alt=""><a href=http://thereadinesscom.com></td>
</tr>
<tr>
<td>
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/s54ooxx59/emailsignature_500flat_03.jpg" width="254" height="32" alt=""></td>
</tr>
<tr>
<td>
<a href=https://www.linkedin.com/company/129626/><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href=mailto:info#thereadinesscomp.com><img src="https://s20.postimg.org/c6vyytq2l/emailsignature_500flat_05.png" width="550" height="146" alt=""><a href=mailto:info#thereadinesscomp.com></td>
</tr>
<tr>
<td colspan="2">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
<!-- Keep Pasted Code Above This Line!
_________________________________________________________________________________ -->
</html>

I found the following errors in your code.
missing closing anchor tags,
missing colspan
CSS should be inline always
Here is the HTML you need:
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<a href=https://www.linkedin.com/company/1296265><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt="" style="display: block; float: left; padding: 0; " /></a>
</td>
</tr>
</table>
</td>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt="" style="display: block; float: left; padding: 0;">
</td>
</tr>
</table>
Let me know if this works for you.

Images side to side on html

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>

Email Template HTML Images not appearing in gmail

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">

arabic data is not displaying in ie8

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