I am working with an old Japanese Website Project. I download the old files from the server and it's working fine in offline mode with browser.
But when I open it with editor the text is broken. Then I try to fix this problem by changing the encoding to most of them. like below.
utf-8
utf-8 with bom
Shift JIS
etc
Then I try it with several modern editors and by changing meta charset. Also I tried to find a solution on google but I got nothing positive.
Only HTML Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="keywords" content="�ｿｽp�ｿｽ�ｿｽ,�ｿｽe�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ,�ｿｽ�ｿｽ�ｿｽ�ｿｽ\,�ｿｽp�ｿｽ�ｿｽe�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ,,�ｿｽp�ｿｽ鼬暦ｿｽﾌ外�ｿｽ�ｿｽ�ｿｽl�ｿｽl�ｿｽﾞ派�ｿｽ�ｿｽ">
<meta name="description" content="�ｿｽp�ｿｽ�ｿｽﾌ翻�ｿｽ�ｿｽE�ｿｽﾊ厄ｿｽﾍビ�ｿｽ[�ｿｽR�ｿｽX�ｿｽI�ｿｽp�ｿｽ�ｿｽl�ｿｽC�ｿｽe�ｿｽB�ｿｽu�ｿｽﾉゑｿｽ�ｿｽm�ｿｽ�ｿｽ�ｿｽﾈテ�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽB�ｿｽr�ｿｽW�ｿｽl�ｿｽX�ｿｽA�ｿｽ�ｿｽ�ｿｽI�ｿｽE�ｿｽZ�ｿｽp�ｿｽI�ｿｽﾈ難ｿｽe�ｿｽﾌテ�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾜで包ｿｽ�ｿｽL�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾅのテ�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽs�ｿｽ�ｿｽ�ｿｽﾄゑｿｽ�ｿｽ�ｿｽﾜゑｿｽ�ｿｽB">
<meta name="robots" content="index,follow">
<title>�ｿｽp�ｿｽ�ｿｽ �ｿｽe�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ �ｿｽ�ｿｽ�ｿｽ�ｿｽ\</title>
<script language="JavaScript" type="text/JavaScript">
function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i
<a.length; i++) if (a[i].indexOf( "#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() {
//v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n,
d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf( "?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i
<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];} } function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+ ".location='"+selObj.options[selObj.selectedIndex].value+
"'"); if (restore) selObj.selectedIndex=0; } </script>
<link href="../../../styleseet.css" rel="stylesheet" type="text/css">
</head>
<body class="bodycss" id="02">
<table class="top" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table class="top_text" cellpadding="0" cellspacing="0">
<tr>
<td>
�ｿｽ#�ｿｽp�ｿｽ�ｿｽ|�ｿｽ�ｿｽ �ｿｽp�ｿｽ�ｿｽﾊ厄ｿｽ �ｿｽp�ｿｽ�ｿｽﾌネ�ｿｽC�ｿｽe�ｿｽB�ｿｽu�ｿｽX�ｿｽ^�ｿｽb�ｿｽt�ｿｽ|�ｿｽ�ｿｽﾒにゑｿｽ�ｿｽT�ｿｽ|�ｿｽ[�ｿｽg
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="790" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#FFFFFF">
<table class="sub_bg" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2">
<a href="/">
<img src="../../img/spacer.gif" width="197" height="47" alt="�ｿｽr�ｿｽ[�ｿｽR�ｿｽX" border="0">
</a>
</td>
<td class="top_Navi">
<ul>
<li class="gnv01">
�ｿｽ�ｿｽ�ｿｽ{�ｿｽ�ｿｽ
</li>
<li class="gnv02">
english
</li>
<li class="gnv03">
�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ
</li>
<li class="gnv04">
�ｿｽﾘ搾ｿｽ�ｿｽ�ｿｽ
</li>
</ul>
</td>
</tr>
<tr>
<td height="35" align="right">
<table class="ken" cellspacing="0" cellpadding="0">
<tr>
<td class="ken_bg">�ｿｽT�ｿｽC�ｿｽg�ｿｽ�ｿｽ�ｿｽ�ｿｽ</td>
<td>
<input type=text name=q maxlength=255 class="ken_input">
</td>
<td width="50">
<input type=submit name=btnG value="�ｿｽ�ｿｽ�ｿｽ�ｿｽ" class="ken_btn">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="sub_bg02" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="sub_tdregi">
<table class="sub_regi" cellspacing="0" cellpadding="0">
<tr>
<td class="title">�ｿｽo�ｿｽ^�ｿｽ�ｿｽ�ｿｽ�ｿｽ</td>
<td class="con">
<script type="text/javascript" src="../../js/country.js"></script>
�ｿｽ�ｿｽ�ｿｽ�ｿｽ</td>
</tr>
<tr>
<td class="title">�ｿｽo�ｿｽ^�ｿｽl�ｿｽ�ｿｽ</td>
<td class="con">
<script type="text/javascript" src="../../js/people.js"></script>
�ｿｽl</td>
</tr>
<tr>
<td class="title">�ｿｽo�ｿｽ^�ｿｽ�ｿｽ�ｿｽ齔�</td>
<td class="con">
<script type="text/javascript" src="../../js/language.js"></script>
�ｿｽ�ｿｽ�ｿｽ�ｿｽ</td>
</tr>
</table>
</td>
<td class="text999">�ｿｽr�ｿｽ[�ｿｽR�ｿｽX�ｿｽﾅは外�ｿｽ�ｿｽ�ｿｽl�ｿｽl�ｿｽb�ｿｽg�ｿｽ�ｿｽ�ｿｽ[�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽA�ｿｽ�ｿｽ�ｿｽﾈゑｿｽ�ｿｽﾆ撰ｿｽ�ｿｽE�ｿｽ�ｿｽﾂなゑｿｽ�ｿｽﾜゑｿｽ�ｿｽB</td>
</tr>
</table>
<div class="down_Navi">
<ul>
<li class="gn01">
�ｿｽz�ｿｽ[�ｿｽ�ｿｽ
</li>
<li class="gn02">
�ｿｽ�ｿｽ闊ｵ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ
</li>
<li class="gn03">
�ｿｽO�ｿｽ�ｿｽ�ｿｽl�ｿｽh�ｿｽ�ｿｽ�ｿｽT�ｿｽ[�ｿｽr�ｿｽX
</li>
<li class="gn04">
�ｿｽC�ｿｽO�ｿｽr�ｿｽW�ｿｽl�ｿｽX�ｿｽT�ｿｽ|�ｿｽ[�ｿｽg
</li>
<li class="gn05">
�ｿｽ�ｿｽ�ｿｽﾛ交流奇ｿｽ�ｿｽ
</li>
<li class="gn06">
�ｿｽX�ｿｽ^�ｿｽb�ｿｽt�ｿｽo�ｿｽ^
</li>
<li class="gn07">
�ｿｽ�ｿｽ�ｿｽ�ｿｽ齬暦ｿｽ\
</li>
<li class="gn08">
�ｿｽ�ｿｽ�ｿｽﾏゑｿｽﾋ暦ｿｽ
</li>
</ul>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="border:1px #000 solid;">
<tr>
<td width="140" valign="top" bgcolor="#42418c">
<!--#include Virtual="../left-->
</td>
<td width="641" valign="top">
<br>
<table width="630" border="0" cellpadding="0" cellspacing="0" class="f12">
<tr>
<td>
TOP�ｿｽ�ｿｽ
�ｿｽ�ｿｽ闊ｵ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ
�ｿｽp�ｿｽ�ｿｽ�ｿｽ�ｿｽ
�ｿｽp�ｿｽ�ｿｽe�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ\
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr align="center ">
<td>
<br>
�ｿｽp�ｿｽ�ｿｽe�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽs�ｿｽn�ｿｽo |
�ｿｽi�ｿｽ�ｿｽ�ｿｽﾛ擾ｿｽ
|
<a href="price>�ｿｽ�ｿｽ�ｿｽ�ｿｽ\</a> |
<a href=" estimation>�ｿｽ�ｿｽ�ｿｽﾏゑｿｽ</a>
|
�ｿｽp�ｿｽ�ｿｽT�ｿｽ[�ｿｽr�ｿｽX�ｿｽ齬�
</td>
</tr>
<tr>
<td align="center ">
<br>
<br>
<font color="#000000 " size="3 ">�ｿｽ�ｿｽ�ｿｽp�ｿｽ�ｿｽe�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ\
<br>
</font>
</td>
</tr>
<tr>
<td align="center ">
<table width="95% " border="0 " cellspacing="5 " cellpadding="0 " bgcolor="#CCCCCC
" height="200 ">
<tr>
<td bgcolor="#FFFFFF " valign="top ">
<div align="left ">
<table border="0 " width="100% " cellspacing="3 ">
<tr>
<td width="49% ">
<div align="center ">
<center>
<table border="1 " width="300 " cellspacing="0 " bordercolor="#000080
" bordercolordark="#000080 " bordercolorlight="#000080 ">
<tr>
<td width="293 " align="center ">
<p align="center ">�ｿｽp�ｿｽ�ｿｽe�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ\</p>
</td>
</tr>
<tr>
<td align="center ">�ｿｽ�ｿｽ600/1�ｿｽ�ｿｽ</td>
</tr>
</table>
</center>
</div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<table width="300 " border="1 " align="center " cellspacing="0 " bordercolor="#000080
" bordercolorlight="#000080 " bordercolordark="#000080 ">
<tr>
<td width="294 " align="center ">
<p align="center ">�ｿｽp�ｿｽ�ｿｽe�ｿｽ[�ｿｽv�ｿｽN�ｿｽ�ｿｽ�ｿｽ�ｿｽ+�ｿｽ�ｿｽ�ｿｽ{�ｿｽ�ｿｽｿ具ｿｽ\</p>
</td>
</tr>
<tr>
<td align="center ">�ｿｽ�ｿｽ2,500/1�ｿｽ�ｿｽ</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<br> �ｿｽ�ｿｽ�ｿｽl�ｿｽF
<br> �ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾔゑｿｽm�ｿｽF�ｿｽ�ｿｽﾌ鯉ｿｽ�ｿｽﾏゑｿｽ�ｿｽﾆなゑｿｽﾜゑｿｽ�ｿｽB
<br> �ｿｽ�ｿｽ�ｿｽ[�ｿｽ�ｿｽ�ｿｽﾍ通擾ｿｽA�ｿｽc�ｿｽﾆ難ｿｽ3�ｿｽ�ｿｽ�ｿｽﾈ擾ｿｽﾆなゑｿｽﾜゑｿｽ�ｿｽB
<br> �ｿｽ�ｿｽ�ｿｽX�ｿｽ�ｿｽ�ｿｽﾉゑｿｽ�ｿｽe�ｿｽ[�ｿｽv�ｿｽﾌ受け渡�ｿｽ�ｿｽ�ｿｽﾌ場合�ｿｽﾍ郵�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ[�ｿｽ�ｿｽ�ｿｽﾉ会ｿｽ�ｿｽZ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾜゑｿｽ�ｿｽB
<br> �ｿｽ�ｿｽ�ｿｽ[�ｿｽi�ｿｽﾍ��ｿｽ�ｿｽ[�ｿｽh�ｿｽf�ｿｽ[�ｿｽ^�ｿｽ[�ｿｽi�ｿｽﾆなゑｿｽﾜゑｿｽ�ｿｽB
<br> �ｿｽ�ｿｽ�ｿｽﾅ低注�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽi3,000�ｿｽ~�ｿｽ�ｿｽ�ｿｽ�ｿｽﾆなゑｿｽﾜゑｿｽ�ｿｽB
<br> �ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾋ暦ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽe�ｿｽﾉ関ゑｿｽ�ｿｽﾄキ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽZ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ鼾��ｿｽﾍ、�ｿｽL�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽZ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽｸゑｿｽ�ｿｽﾜゑｿｽ�ｿｽB
<br> �ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾅは別途�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾆなゑｿｽﾜゑｿｽ�ｿｽB
<br> �ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾈ擾ｿｽﾔなゑｿｽﾌに関ゑｿｽ�ｿｽﾄは以会ｿｽ�ｿｽﾌ表�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽB
<tr>
<TD>
<TABLE width="100% " border=1 cellspacing="0 " bordercolor="#000080 " cellpadding="2
" bordercolorlight="#000080 " bordercolordark="#000080 ">
<TBODY>
<TR>
<TD width="164 ">
<DIV align="center">�ｿｽ�ｿｽ�ｿｽ�ｿｽ</DIV> </TD>
<TD width="221 ">
<DIV align="center">�ｿｽ�ｿｽe</DIV>
</TD>
<TD width="165 ">
<DIV align="center">�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ</DIV>
</TD>
</TR>
<TR>
<TD width="164 ">�ｿｽ�ｿｽ蜷ｫ�ｿｽﾌ搾ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ</TD>
<TD width="221 ">�ｿｽ�ｿｽﾃ関連�ｿｽﾈど撰ｿｽ蜷ｫ�ｿｽﾌ搾ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ </TD>
<TD width="165 ">25�ｿｽ�ｿｽ�ｿｽ`50�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ </TD>
</TR>
<TR>
<TD width="164 ">�ｿｽﾌ趣ｿｽ�ｿｽA�ｿｽj�ｿｽ�ｿｽ�ｿｽ[�ｿｽX�ｿｽﾈゑｿｽ</TD>
<TD width="221 ">�ｿｽﾌの歌趣ｿｽ�ｿｽA�ｿｽ�ｿｽb�ｿｽ�ｿｽ�ｿｽx�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾌゑｿｽﾈゑｿｽ </TD>
<TD width="165 ">100�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ </TD>
</TR>
<TR>
<TD width="164 ">�ｿｽ�ｿｽ�ｿｽ}</TD>
<TD width="221 ">�ｿｽS�ｿｽ`�ｿｽT�ｿｽc�ｿｽﾆ難ｿｽ�ｿｽﾈ難ｿｽ </TD>
<TD width="165 ">50�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ </TD>
</TR>
<TR>
<TD width="164 ">�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ}</TD>
<TD width="221 ">�ｿｽP�ｿｽ`�ｿｽR�ｿｽc�ｿｽﾆ難ｿｽ�ｿｽﾈ難ｿｽ </TD>
<TD width="165 ">100�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ </TD>
</TR>
<TR>
<TD width="164 ">�ｿｽ^�ｿｽ�ｿｽ�ｿｽ�ｿｽﾔゑｿｽ�ｿｽﾇゑｿｽ�ｿｽﾈゑｿｽ�ｿｽ�ｿｽﾌ（�ｿｽ�ｿｽ�ｿｽj</TD>
<TD width="221 ">�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾉゑｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ </TD>
<TD width="165 ">25�ｿｽ�ｿｽ�ｿｽ`50�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ </TD>
</TR>
</TBODY>
</TABLE>
</TD>
<tr>
<TD> �ｿｽi�ｿｽ�ｿｽ�ｿｽj�ｿｽﾇゑｿｽ�ｿｽ�ｿｽ�ｿｽﾄゑｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾈゑｿｽ�ｿｽﾓ擾ｿｽ�ｿｽﾉ関ゑｿｽ�ｿｽﾄは×�ｿｽ~�ｿｽ~�ｿｽﾆ表�ｿｽL�ｿｽ�ｿｽ�ｿｽ�ｿｽ鼾��ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾜゑｿｽ�ｿｽB
<br>
<br> �ｿｽ�ｿｽ�ｿｽﾏゑｿｽﾉ関ゑｿｽ�ｿｽ�ｿｽ
<br> �ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾏ対会ｿｽ�ｿｽi1�ｿｽ�ｿｽ�ｿｽﾔ以難ｿｽj�ｿｽA�ｿｽ�ｿｽ�ｿｽﾏ厄ｿｽ�ｿｽ�ｿｽ
<br> �ｿｽ�ｿｽ�ｿｽ{�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ[�ｿｽ�ｿｽ�ｿｽf�ｿｽB�ｿｽX�ｿｽJ�ｿｽE�ｿｽ�ｿｽ�ｿｽg�ｿｽﾉ関ゑｿｽ�ｿｽﾄはゑｿｽ�ｿｽ竝��ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽB
</TD>
</TR>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table width="600 " border="0 " align="center " cellspacing="0 ">
<tr>
<td height="20 "></td>
</tr>
<tr>
<td align="center ">
<!--#include Virtual="../foot_price-->
</td>
</tr>
</table>
<br>
</td>
</tr>
<tr>
<td colspan="5">
<table width="100%" class="footer" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="397" height="50" class="text_no">�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽﾏゑｿｽE�ｿｽ�ｿｽ�ｿｽ竄｢�ｿｽ�ｿｽ�ｿｽ墲ｹ�ｿｽﾍ気�ｿｽy�ｿｽﾉどゑｿｽ�ｿｽ�ｿｽ</th>
<td width="395">
<a href="/02foreigner/inquiry-for-dispatch>
<img src="../../img/spacer.gif" width="125" height="68" alt="�ｿｽ�ｿｽ�ｿｽ竝��ｿｽ�ｿｽ">
</a>
<a href="/06price/">
<img src="../../img/spacer.gif" width="121" height="68" alt="�ｿｽ�ｿｽ�ｿｽ�ｿｽ\">
</a>
</td>
</tr>
<tr>
<td height="50" colspan="2" class="footer_text">�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽ �ｿｽﾐ �ｿｽ�ｿｽ105-0013�ｿｽ�ｿｽ�ｿｽ�ｿｽ�ｿｽs�ｿｽ`�ｿｽ�ｿｽl�ｿｽ�ｿｽ�ｿｽ�ｿｽ2-1-3 �ｿｽ�ｿｽ�ｿｽX�ｿｽr�ｿｽ�ｿｽ4F
Tel�ｿｽF03-5733-4264 Fax�ｿｽF03-3433-3320
<br /> Copyright © by b-cause,Inc. 2003-2016 </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
All the Japanese content in the HTML seems completely broken.
I have tried to decode the (garbled) strings in various encoding with ひたすらデコード, but all the result doesn't seem meaningful strings.
Maybe the HTML file is wrongly transformed and saved when you open the file with the editor. The reliable way to recover the content is downloading the HTML file from the server again, and then open the file with another editor that can handle Japanese encoding like Notepad++.
Related
I've been trying to adjust a <td> from my website in a place, but I just can't adjust its size, making the website create a rollbar in the bottom leading to the right side because the <td> is exceeding the page's size.
The part in question is the "right-column" that is in charge of the tip, the horoscope and the download banner below.
I'm new with web programming and I'm having a lot of trouble configuring this website, since it's an existing old background from an extinct website, so it's very hard to update it to new techs. It's already been a miracle I made some things that were in Flash being "converted" to Javascript/CSS.
<table id="main_bloc" border="0">
<tbody>
<tr>
<td style="border-bottom: 1px solid white; --darkreader-inline-border-bottom:#303436;" colspan="2" id="header_bloc" onmouseleave="showNavbarSection(-1);" data-darkreader-inline-border-bottom="">
<div id="logo" onmouseenter="showNavbarSection(-1);"><img src="medias/images/winxie.gif" onmouseover="this.src='medias/images/winxie2.gif';" onmouseout="this.src='medias/images/winxie.gif';" style="width: 106%;height: 153px;top: 0px;left: 3px;position: relative;"></div>
<table id="language_selector" onmouseenter="showNavbarSection(-1);">
<tbody>
<tr>
<td><img src="medias/images/lang_top.gif" id="language_selector_border" style="margin-bottom: -1px;"></td>
</tr>
<tr>
<td><img src="medias/images/menu_lang_button_img_en_arrow.gif" onclick="showLanguages();" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_it.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_fr.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_es.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_de.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_pt.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_ru.gif" id="language_selector_item"></td>
</tr>
<tr name="other_language" style="display:none">
<td><img src="medias/images/menu_lang_button_img_tr.gif" id="language_selector_item"></td>
</tr>
<tr>
<td><img src="medias/images/lang_bottom.gif" id="language_selector_border" style="margin-top:-2px;"></td>
</tr>
</tbody>
</table>
<table id="navbar">
<tbody>
<tr>
<td onmouseover="showNavbarSection(0);"><span id="navbar_section"><strong>News</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(1);"><span id="navbar_section"><strong>Story</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(2);"><span id="navbar_section"><strong>Games</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td><span id="navbar_section"><strong><a id="navbar_section" href="#Parents"></a>Parents</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(3);"><span id="navbar_section"><strong>Fun Zone</strong></span></td>
<td> <span id="navbar_star">★</span> </td>
<td onmouseover="showNavbarSection(4);"><span id="navbar_section"><strong>Community</strong></span></td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_0" onmouseover="showNavbarSection(0);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Announcements |</td>
<td> Events |</td>
<td> Articles </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_1" onmouseover="showNavbarSection(1);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Summary |</td>
<td> Characters |</td>
<td> World Locations </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_2" onmouseover="showNavbarSection(2);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Winx Adventure |</td>
<td> Mini-Games |</td>
<td> Web Avatar </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display:none" id="navbar_subsection_3" onmouseover="showNavbarSection(3);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Music |</td>
<td>Videos |</td>
<td> Wallpapers |</td>
<td> Magazines </td>
<td> </td>
</tr>
</tbody>
</table>
<table class="navbar_subsections" style="display: none;" id="navbar_subsection_4" onmouseover="showNavbarSection(4);" onmouseleave="showNavbarSection(-1);">
<tbody>
<tr>
<td> </td>
<td>Forums |</td>
<td> FAQ |</td>
<td> Bug Report |</td>
<td> Contact us </td>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="submenu">
<td colspan="2">
<iframe style="width: 100%; position: relative; left:15" src="././pages/Iframes/HotLinks.php" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" data-ruffle-polyfilled=""></iframe>
</td>
</tr>
<tr id="container">
<td id="container_left_column">
<div style="position: relative; margin-top: 11px; margin-left: 15px;">
<iframe id="ranking_iframe" scrolling="no" frameborder="0" src="pages/Iframes/Access_guests.php" data-ruffle-polyfilled=""></iframe>
</div>
</td>
<td id="container_middle_column" style="vertical-align: top;">
<img onclick="javascript:Previous();" class="previous" style="position: relative; top: 274px; left: 541px; cursor: pointer;" src="././medias/images/arrow_left.png" onmouseover="this.src='././medias/images/arrow_left_hover.png';" onmouseout="this.src='././medias/images/arrow_left.png';"><img onclick="javascript:Next();" class="next" style="position: relative; top: 274px; left: 625px; cursor: pointer;" src="././medias/images/arrow_right.png" onmouseover="this.src='././medias/images/arrow_right_hover.png';" onmouseout="this.src='././medias/images/arrow_right.png';"><table id="content_videobox" cellspacing="1" cellpadding="1" border="0">
<tbody>
<tr style="">
<td id="content_videobox_firstcolumn" rowspan="3">
<div id="content_videobox_iframe" frameborder="0" allowfullscreen="" volume="0"><div class="ckin__player default ckin__overlay"><video class="file" preload="metadata" poster="././medias/images/Video_Thumbs/happy2021thumb.png" src="././medias/videos/Happy_2021.mp4" data-overlay="1"></video><button class="default__button--big toggle" title="Toggle Play"><i class="ckin-play"></i></button><div class="default__controls ckin__controls"><button class="default__button toggle" title="Toggle Video"><i class="ckin-play"></i></button><div class="progress"><div class="progress__filled"></div></div><button class="default__button volume" title="Volume"><i class="ckin-volume-medium"></i></button><button class="default__button fullscreen" title="Full Screen"><i class="ckin-expand"></i></button></div></div></div>
</td>
<td id="content_videobox_secondcolumn">
<h2>
<span class="video-title" id="content_videobox_videotitle" style="text-shadow: 1px 0px 0px #560027;">Happy New Year!</span>
</h2>
<p style="position:relative; top: 150px;">
<span class="video-description" id="content_videobox_videotext" style="text-shadow: 1px 0px 0px #560027;">2021 arrived. Your favorite Winx fairies and specialists are hoping it will be better than the last one. The witches? Not sure.</span>
</p>
</td>
</tr>
<tr style="">
<td id="content_videobox_firstcolumn2">
</td>
</tr>
<tr style="">
<td id="content_videobox_secondcolumn2" style="text-align: center">
<span class="video-number" style="color: white; font-family: Arial; font-size: 20px; text-shadow: rgb(86, 0, 39) 1px 0px 0px; --darkreader-inline-color:#e8e6e3;" data-darkreader-inline-color=""> 1/4 </span>
</td>
</tr>
</tbody>
</table>
<div id="content_mininews_frame">
<iframe id="content_mininews_iframe" frameborder="0" src="pages/Mininews/NewsContentV2.php" data-ruffle-polyfilled="">Browser not compatible.</iframe>
</div>
</td>
</tr>
<tr>
<td id="container_right_column" style="vertical-align: top;">
<div id="content_horoscope_iframe" style="position: relative;/* margin-left: 808px; */">
<iframe id="content_horoscope_iframe" frameborder="0" src="pages/Tips.php" data-ruffle-polyfilled="">Browser not compatible.</iframe>
</div>
<iframe style="position: relative;width: 705px;height: 219px;margin-left: -466px;margin-top: -91px;" frameborder="0" src="pages/Iframes/Download.php" data-ruffle-polyfilled="">Browser not compatible!</iframe>
</td>
</tr>
<tr id="footer">
<td id="footer_content" colspan="2">
<hr style="margin-top: auto; position: relative;">
<div style="margin-top: auto; position: relative;">
<img id="footer_rainbow_img" src="http://onlinewinxclub.com/center-web/medias/images/rainbow_logo_small.jpg">
<p id="footer_text">Winx Club™ a series created and produced by Iginio Straffi and Rainbow S.r.l<br>
© 2011-2021 Winx Club Online - Unofficial WinxClub.com inspirated by the old official website
</p>
</div>
</td>
</tr>
<script src="js/ckin.js"></script>
<script src="js/cssrefresh.js"></script>
we're using Coldfusion and SQL and are trying to make a page with a query with only one tablr with one row and need it to force a page break after so many rows. We could also have it force a page break after 8x11 page is filled. I'm using a header and it will never show the header on page 2 sense it can't figure out where the page break is. Any help would be great.
Thanks
<head>
<script>
thead {
position: sticky;
top: 0px;
}
</script>
</head>
<thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<td bgcolor="#EDE9C6" width="5px">
<div align="center"><nobr><font size="-2">fmt</font></div>
</td>
<td style="overflow:hidden;" bgcolor="#EDE9C6" width="23px">
<div align="center"><strong><font size="-2"> <nobr> category </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><nobr><font size="-2"> SKU </font></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><strong><nobr><font size="-2"> artist </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="25px">
<div align="center"><nobr> <font size="-2"> title </font></div>
</td>
<td bgcolor="EDE9C6" width="5px">
<div align="center"><strong><nobr><font size="-2"><strong>qs </strong></font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">fa </font></div></td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><strong><font size="-2"><strong>ts </strong> </font></strong></div>
</td>
<td bgcolor="EDE9C6" width="12px">
<div align="center"><nobr><font size="-2">wtd </font></div>
</td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><strong><font size="-2">mtd </font></strong></div></td>
<td bgcolor="EDE9C6" width="12px"><div align="center"><font size="-2">ytd </font></div></td>
<td bgcolor="EDE9C6" width="20px">
<div align="center"><font size="-2"><strong>price</strong></font>
</div></td>
<td bgcolor="EDE9C6" width="15px">
<div align="center"><font size="-2">check</font>
</div></td>
</table></thead>
<table width="100%" cellspacing="2" cellpadding="0" border="0" align="center" bgcolor="#CCCCCC" contenteditable="false">
<tbody>
<cfoutput query="myquery">
<tr>
<td bgcolor="ffffff" width="5px">
<div align="center"><nobr><font size="-2">#fmt#</font></div>
</td>
<td style="overflow:hidden;" bgcolor="ffffff" width="50px">
<div align="center"><strong><nobr><font size="-2">#Left(catdesc,20)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="20px">
<div align="center"><nobr><font size="-2">#fsku#</font></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><strong><nobr><font size="-2">#Left(artist,25)# </font></strong></div>
</td>
<td bgcolor="ffffff" width="25px">
<div align="center"><nobr><em><font size="-2">#Left(title,25)#</font> </em></div>
</td>
<td bgcolor="ffffff" width="8px">
<div align="center"><strong><nobr><font size="-2">#fUpStkQty#</font> </strong></div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2"><cfif #Fas# is not "">X<cfelseif #Fas# is ""> </cfif></font></div></td>
<td bgcolor="ffffff" width="12px">
<div align="center"><strong><font size="-2">#fStockQty#</font></strong> </div>
</td>
<td bgcolor="ffffff" width="12px">
<div align="center"><nobr><font size="-2">#fNSWTD1#</font></div>
</td>
<td bgcolor="ffffff" width="12px"><div align="center"><strong><font size="-2">#fNSMTD1#</font></strong></div></td>
<td bgcolor="ffffff" width="12px"><div align="center"><font size="-2">#fNSYTD1#</font></div></td>
<td bgcolor="ffffff" width="20px">
<div align="center"><strong><font size="-2">$#fcost#</font></strong>
</div></td>
<td bgcolor="ffffff" width="15px">
<div align="center"><font size="-2"> </font>
</div></td>
</cfoutput></tbody>
</table>
i´m converting HTML to PDF with itextsharp, i have improved the the code in itextsharp side, following this thread iTextSharp XMLWorker parsing really slow
but now i need to improve in html too. My goal is reach a time lowest than 0,1 seconds, i'm getting now 0,4 seconds
I don't know what are the rules in html side for a fatest rendering in itextsharp. In my HTML template basically i have style inline html and all is done with tables, here i let you the code
<html>
<head>
<title>DOCUMENT</title>
</head>
<body>
<!-- 2 -->
<table width="100%" cellspacing="0px" cellpadding="0px">
<tr>
<!-- DETALLE DE LECTURA/CONSUMO OK-->
<td width="60%" style="padding-right:5px" valign="top">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="100%" style="border:1px solid #2F3640;background-color:#2F3640;color:#FFFFFF;font-weight:bold;padding: 2px 5px;font-size:10pt;">DETALLE DE LECTURA/CONSUMO</td>
</tr>
<tr>
<td>
<table width="100%" style="font-size:8pt;text-align:center" cellspacing="0px" cellpadding="0px" border="0">
<tr>
<td>Consumo Últimos 13 Meses (KWHs)</td>
</tr>
<tr>
<td width="100%">
<!-- GRAFICO DE CONSUMO -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<!--BARRAS-->
<tr>
<td width="100%">
<table width="100%" style="" cellspacing="0" cellpadding="0" align="left">
<tr style="font-size:5pt;height:130px;">
<!-- -->
<td style="font-size:5pt;width:4%"></td>
<!-- MES 1 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-1]</p>
<div style="width:100%; height:[valor-grafico-1-px]px; background-color:black">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 2 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-2]</p>
<div style="width:100%; height:[valor-grafico-2-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 3 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-3]</p>
<div style="width:100%; height:[valor-grafico-3-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 4 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-4]</p>
<div style="width:100%; height:[valor-grafico-4-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 5 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-5]</p>
<div style="width:100%; height:[valor-grafico-5-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 6 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-6]</p>
<div style="width:100%; height:[valor-grafico-6-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 7 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-7]</p>
<div style="width:100%; height:[valor-grafico-7-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 8 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-8]</p>
<div style="width:100%; height:[valor-grafico-8-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 9 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-9]</p>
<div style="width:100%; height:[valor-grafico-9-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 10 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-10]</p>
<div style="width:100%; height:[valor-grafico-10-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 11 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-11]</p>
<div style="width:100%; height:[valor-grafico-11-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 12 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-12]</p>
<div style="width:100%; height:[valor-grafico-12-px]px; background-color:gray">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:2%"></td>
<!-- MES 13 -->
<td valign="bottom" style="font-size:5pt;width:5%">
<p valign="center" style="width:100%; height:8px;">[valor-grafico-13]</p>
<div style="width:100%; height:[valor-grafico-13-px]px; background-color:black">
</div>
</td>
<!-- -->
<td style="font-size:5pt;width:4%"></td>
</tr>
</table>
</td>
</tr>
<!-- EJE -->
<tr style="background-color:black; padding: 0; height: 1px">
<td colspan="26" nowrap="" >
<div></div>
</td>
</tr>
<!-- MESES -->
<tr>
<td width="100%">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:5pt;" width="4%"></td>
<td style="font-size:5pt;" width="5%">[mes-1]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-2]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-3]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-4]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-5]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-6]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-7]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-8]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-9]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-10]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-11]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-12]</td>
<td style="font-size:5pt;" width="2%"></td>
<td style="font-size:5pt;" width="5%">[mes-13]</td>
<td style="font-size:5pt;" width="4%"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" style="font-size:8pt;">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="50%">Datos consumo desde: [fecha-inicio-consumo]</td>
<td width="50%">hasta: [fecha-hasta-consumo]</td>
</tr>
<tr>
<td colspan="2" >
<table width="100%" style="font-size:10pt;text-align:center;" cellspacing="0px" cellpadding="0px">
<tr>
<th>Medidores</th>
<th>Lectura Actual</th>
<th>Lectura Anterior</th>
<th>Diferencia</th>
<th>Constante</th>
<th>KWH</th>
</tr>
<tr>
<td>[medidor-1]</td>
<td>[lectura-actual-1]</td>
<td>[lectura-anterior-1]</td>
<td>[diferencia-1]</td>
<td>[constante-1]</td>
<td>[kwh-1]</td>
</tr>
<tr>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
</tr>
<tr>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
<td>[XX]</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:5px" colspan="2">
<table width="100%" style="font-size:8pt;text-align:right" cellspacing="0px" cellpadding="0px">
<tr>
<td width="80%" style="font-size:10pt;">Consumo Energia(KWH/mensual)</td>
<td width="20%" style="font-size:10pt;">[consumo-energia]</td>
</tr>
<tr>
<td width="80%" style="font-size:10pt;">Consumo Energia Invierno(KWH/mensual)</td>
<td width="20%" ="font-size:10pt;">[consumo-energia-invierno]</td>
</tr>
<tr>
<td width="80%">Potencia Contratada o Leída (KW)</td>
<td>[potencia-contratada]</td>
</tr>
<tr>
<td width="80%">Potencia Contratada o Leída Horas de Punta(KW)</td>
<td>[potencia-hora-punta]</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="40%">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td align="center">
<img width="180px" src="http://localhost/FE.images/SEC.jpg" alt="sec"/>
</td>
</tr>
<tr>
<td>
<!-- ACUSE DE RECIBO -->
<table width="100%" style="font-size:8pt;">
<tr>
<td width="40%">Recinto:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td>Nombre:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td>Fecha:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td>RUT:</td>
<td width="60%" style="border-bottom:1px solid black;"></td>
</tr>
<tr>
<td colspan="2" style="border-bottom:1px solid black;">
<br/>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">FIRMA</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 3 -->
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="65%">
<table width="100%" style="padding-right:5px; font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td style="border:1px solid #2F3640;background-color:#2F3640;color:#FFFFFF;font-weight:bold;padding: 2px 5px;font-size:10pt;">
DETALLE DE LA CUENTA FACTURACION
</td>
</tr>
<tr>
<td>
<table width="100%" style="font-size:8pt;line-height:9pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="70%" style="font-size:10pt;" >Cargo fijo mensual</td>
<td width="30%" style="text-align:right;font-size:10pt;">$[cargo-fijo-mensual]</td>
</tr>
<tr>
<td style="font-size:10pt;">Cargo único del sistema troncal ([cantidad-energia] kWh)</td>
<td style="text-align:right;font-size:10pt;">$[cargo-unico]</td>
</tr>
<tr>
<td style="font-size:10pt;">Cargo por energía base ([cantidad-energia] kWh)</td>
<td style="text-align:right;font-size:10pt;">$[cargo-energia-base]</td>
</tr>
<tr>
<td style="font-size:10pt;">Cargo por energía adicional de invierno ([cantidad-energia] kWh)</td>
<td style="text-align:right;font-size:10pt;">$[cargo-energia-invierno]</td>
</tr>
<tr>
<td style="border-top:1px solid black;font-size:10pt;" width="70%">Reliquidaciones</td>
<td style="border-top:1px solid black;text-align:right;font-size:10pt;" width="30%">$[reliquidaciones]</td>
</tr>
<tr>
<td style="font-size:10pt;">Calibracion de medidor</td>
<td style="text-align:right;font-size:10pt;">$[calibracion-medidor]</td>
</tr>
<tr>
<td style="font-size:10pt;">Interés por mora</td>
<td style="text-align:right;font-size:10pt;">$[interes-mora]</td>
</tr>
<tr>
<td style="font-size:10pt;">Compensaciones</td>
<td style="text-align:right;font-size:10pt;">$[compensaciones]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-1]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-2]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-3]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-4]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-5]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-6]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-7]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-8]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-9]</td>
</tr>
<tr>
<td style="font-size:10pt;">item</td>
<td style="text-align:right;font-size:10pt;">$[item-10]</td>
</tr>
<tr>
<td width="70%" style="border-top:1px solid black;padding-top:5px;font-size:10pt;">Total:</td>
<td width="30%" style="border-top:1px solid black;padding-top:5px;text-align:right;font-size:10pt;">$[total-pagar]</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!-- TOTALES -->
<td width="35%">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="100%" align="left">
<table width="95%" style="font-size:8pt;border:2px solid black;" cellspacing="0px" cellpadding="0px">
<tr>
<th style="border-bottom:1px solid black;">DETALLE DE ABONOS</th>
</tr>
<tr>
<td>Total Abonados:</td>
<td></td>
</tr>
<tr>
<td>Fecha Abono:</td>
<td></td>
</tr>
<tr>
<td>Comprobante Caja №:</td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table width="100%" style="font-size:8pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="50%" style="font-size:10pt;">Fecha vencimiento:</td>
<td width="50%" style="font-size:10pt;">[fecha-vencimiento]</td>
</tr>
<tr>
<td width="50%" style="font-size:10pt;">Fecha de corte de suministro:</td>
<td width="50%" style="font-size:10pt;">[fecha-corte]</td>
</tr>
<tr>
<td width="50%" style="font-size:10pt;">Último pago realizado:</td>
<td width="50%" style="font-size:10pt;">[fecha-ultimo-pago]</td>
</tr>
<tr>
<table width="100%" style="background-color:black;color:white;font-weight:bold;font-size:10pt;" cellspacing="0px" cellpadding="0px">
<tr>
<td width="50%" >TOTAL:</td>
<td width="50%" style="background-color:black;color:white;font-weight:bold;font-size:10pt;";>[total-pagar]</td>
</tr>
</table>
</tr>
<tr>
<td align="center">
<img width="280px" src="#" alt="timbre"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I don't know if this has been addressed in the most recent version but as of 5.5.5 there was an issue in regards to the ImageProvider. If you don't explicitly set an ImageProvider iTextSharp will internally throw an exception, catch it and create an ImageProvider on your behalf. Unfortunately this can happen dozens or hundreds of times depending on how much HTML your are processing.
The quick fix is to just explicitly set your own ImageProvider. This can be just a simple so called "blank image provider" as shown here or you could make a more complex one.
Here's a VB.Net version:
Public Class BlankImageProvider
Implements IImageProvider
Public Function GetImageRootPath() As String Implements IImageProvider.GetImageRootPath
Return ""
End Function
Public Sub Reset() Implements IImageProvider.Reset
End Sub
Public Function Retrieve(src As String) As iTextSharp.text.Image Implements IImageProvider.Retrieve
Return Nothing
End Function
Public Sub Store(src As String, img As iTextSharp.text.Image) Implements IImageProvider.Store
End Sub
End Class
To use it you just need to bind it to your HtmlPipelineContext object using the SetImageProvider method:
htmlContext.SetImageProvider(New BlankImageProvider())
Also, I don't know if this factors in but your HTML is technically not accurate in several places. For instance, you are using px in your HTML attributes but in reality you can only use numbers or numbers with a percent sign. For instance, cellpadding="0px" is invalid and should be cellpadding="0". You also have at least one <table> tag that is directly a child of a <tr> but instead there should be an intermediary <td> or <th> tag. These things may or may not affect iTextSharp's speed but it might make things more future-proof to fix.
I looked for a similar question but no solutions.
I have a webpage with a table and a Youtube movie at the middle: http://www.zofim.org.il/magazin_item.asp?item_id=531438084004
it looks good in Chrome, but in Internet explorer the movie is too low and not in the right place.
Here is the code:
<table background="http://www.zofim.org.il/pics/magazin/Page-1 (1).jpg" width="650" height="700" border="0" align="center" cellpadding="1" cellspacing="1">
<tbody>
<tr>
<td>
<table border="0" width="600">
<tbody>
<tr>
<td colspan="4"><span style="font-size: 8; "> </span>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><br />
</p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "> </span></p>
<p><span style="font-size: 8; "><br />
<br />
<br type="_moz" />
</span></p>
<p> </p>
</td>
</tr>
<tr>
<td height="440" width="23%" rowspan="2">
<table border="0" width="100%" height="430">
<tbody>
<tr>
<td height="131"> </td>
</tr>
<tr>
<td height="63"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="76" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td height="142" width="12%">
<p style="margin-top: 0; margin-bottom: 0"> </p>
<p> </p>
<p> </p>
</td>
<td height="142" width="35%">
<p style="margin-top: 10px; margin-bottom: 0px; text-align: center; "><iframe width="250" height="150" src="http://www.youtube.com/embed/wnBGKeXF8X0?rel=0&controls=0&autoplay=1" frameborder="0" allowfullscreen="" name="I1" scrolling="no" marginheight="2"></iframe></p>
</td>
<td height="142" width="31%">
<p> </p>
<p> </p>
</td>
</tr>
<tr>
<td height="285" colspan="3">
<table border="0" width="100%" height="292">
<tbody>
<tr>
<td width="135">
<table border="0" width="100%" height="280">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="134" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" width="104%" height="278">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="175" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<td width="153">
<table border="0" width="100%" height="281">
<tbody>
<tr>
<td height="78"> <img border="0" src="http://www.zofim.org.il/pics/magazin/1(158).gif" width="152" height="99" alt="" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
thanks!
Dor.
By the looks of the markup you provided you are using tables to layout your website. This is considered bad practice. You should consider changing to using best practices (divs etc) and using CSS to style your layout instead of using inline-styles. When you have done this you can use prefixr.com to create cross-browser friendly CSS.
I have a markup:
<table cellpadding="0" cellspacing="0" class="table_report_line">
<tbody>
<tr>
<td>
<div class="dvlefttable">
</div>
</td>
<td class="dvtoptable" colspan="4" width="100%">
Test
</td>
<td>
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;">
</canvas>
</tr>
<tr>
<td>
</td>
<td colspan="4">
<br style="line-height: 15px;" />
</td>
<td>
</td>
</tr>
<tr>
<td colspan="6" class="bg_bottom_table">
</td>
</tr>
</tbody>
</table>
but when Firefox renders the page I see that it put canvas outside the table
<canvas id="chartId" style="margin: 30px;" height="400" width="400"> </canvas>
<table cellspacing="0" cellpadding="0" class="table_report_line">
<tbody>
<tr>
<td class="">
<div class="dvlefttable">
</div>
</td>
<td width="100%" colspan="4" class="dvtoptable">
Test
</td>
<td class="">
<div class="dvrighttable">
</div>
</td>
</tr>
<tr>
</tr>
<tr style="background: none repeat scroll 0% 0% transparent;">
<td class="td_border_left">
</td>
<td colspan="4" class="td_padding_left">
<br style="line-height: 15px;">
</td>
<td class="td_border_right">
</td>
</tr>
<tr>
<td class="bg_bottom_table" colspan="6">
</td>
</tr>
</tbody>
</table>
Why does it happen and how it possible to fix that?
You have to put the CANVAS inside of a TD element.
Change:
<tr>
<canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas>
</tr>
to:
<tr>
<td><canvas id="chartId" width="400" height="400" style="margin: 30px;"></canvas></td>
</tr>
General rule of thumb in cases like this is to use the HTML validator to see what you did wrong.