PDA

View Full Version : به هم ریختگی جدول در مرورگرهای مختلف



Mah
پنج شنبه 09 مهر 1388, 10:06 صبح
سلام .
من یک فرم دارم که در آن از Ajax استفاده می کنم .
فرم من شامل چند جدول می باشد .
این فرم در مرورگرهای مختلف ، متفاوت نمایش داده می شود .
برای مثال در IE کاملا درست نمایش داده می شود . اما در FF به هم می ریزد .
در Opera خیلی جمع می شود و ......

یک مشکل دیگر اینکه تابعی داریم که در onclick یک Button صدا می زنم اما تابع فقط در IE فراخوانی می شود !!!

لطفا راهنمایی نمائید .

Hossein Bazyan
پنج شنبه 09 مهر 1388, 10:22 صبح
سلام .
من یک فرم دارم که در آن از Ajax استفاده می کنم .
فرم من شامل چند جدول می باشد .
این فرم در مرورگرهای مختلف ، متفاوت نمایش داده می شود .
برای مثال در IE کاملا درست نمایش داده می شود . اما در FF به هم می ریزد .
در Opera خیلی جمع می شود و ......

یک مشکل دیگر اینکه تابعی داریم که در onclick یک Button صدا می زنم اما تابع فقط در IE فراخوانی می شود !!!

لطفا راهنمایی نمائید .

سلام
مقادیر را درصدی انتخاب کن

Mah
پنج شنبه 09 مهر 1388, 10:43 صبح
نمونه کدش را می ذارم تا راحتتر راهنمایی نمائید .


<?xml version="1.0" encoding="utf-8"?><!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></title>
<style>
.HTb
{

font-family:Tahoma;
font-size:12px;
font-weight:700;
}
.HTitr
{
font-family:"Traditional Arabic",Tahoma;
font-size:20px;
font-weight:600;
text-align:center;

}
</style>
<link href="../style.css" rel="stylesheet" type="text/css" />
<link rel="alternate stylesheet" type="text/css" media="all" href="calendar-win2k-2.css" title="win2k-2" />

<!-- import the Jalali Date Class script -->
<script type="text/javascript" src="jalali.js"></script>

<!-- import the calendar script -->
<script type="text/javascript" src="calendar.js"></script>

<!-- import the calendar script -->
<script type="text/javascript" src="calendar-setup.js"></script>

<!-- import the language module -->
<script type="text/javascript" src="calendar-fa.js"></script>
<script language="javascript" src="../ajax.js"></script>
<script language="javascript">
<!--
var ImgWaite=new Image();
ImgWaite.src="../img/Anim1.gif";
var ImgWaite2=new Image();
ImgWaite.src="../img/Anim4.gif";
var httpData=getHTTPObject();
var http=getHTTPObject();

function AnswerKh()
{
// alert(httpData.responseText+ "\n\n"+httpData.readystate);

if(httpData.readyState==4)
{
// alert(httpData.responseText);

if (httpData.status == 200)
{
document.getElementById("mkh").innerHTML="";
// alert(httpData.responseText);

resp=httpData.responseText;
// document.getElementById("mkh").innerHTML=resp;
var res=new Array(4);
res=resp.split('#');
var iDMachin=res[2].split(',');
var noekh=res[0].split(',');
var estefade=res[1].split(',');

for (i = document.getElementById("SelIDMachin").length - 1; i>=0; i--)
{
document.getElementById("SelIDMachin").remove(i);
}

for (i = document.getElementById("khNoe").length - 1; i>=0; i--)
{
document.getElementById("khNoe").remove(i);
}

for (i = document.getElementById("khEstefade").length - 1; i>=0; i--)
{
// for(i=0;i<=document.getElementById("khEstefade").length;i++)
document.getElementById("khEstefade").remove(i);
}
for(i=0;i<iDMachin.length;i++)
{
insertOption(document.getElementById("SelIDMachin"),iDMachin[i]);
}
for(i=0;i<noekh.length;i++)
{
insertOption(document.getElementById("khNoe"),noekh[i]);
}
for(i=0;i<estefade.length;i++)
{
insertOption(document.getElementById("khEstefade"),estefade[i]) ;
}
}
else
{
alert("اتصال شما با سرور قطع مي باشد !");
document.getElementById("mkh").innerHTML="اتصال شما با سرور قطع مي باشد !";
}
}

}

function insertOption(x,txt)
{
var y=document.createElement('option');
y.text=txt;
try
{
x.add(y,null); // standards compliant
}
catch(ex)
{
x.add(y); // IE only
}
}

function GetKhodro()
{
document.getElementById("mkh").innerHTML="<p align=center><font size=2 color='red'>لطفا کمي صبر نمائيد .</font><img src='../img/Anim1.gif' width=16 height=16 /><br /> <img src='../img/Anim4.gif' /></p>";
var grKh=document.getElementById("KhGroup");
var url='getKhodro.php';
var stData='groupKh='+grKh.options[grKh.selectedIndex].text;
//alert(stData);

httpData.open("POST",url,true);
httpData.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
httpData.setRequestHeader("Content-length", stData.length);
httpData.setRequestHeader("Connection", "close");
httpData.onreadystatechange = AnswerKh;
httpData.send(stData);

}
//----------------------------- getSabeghe(); ----------------------
function AnswerSabghe()
{
if(http.readyState==4)
{
if (http.status == 200)
{
document.getElementById("mkh").innerHTML="";
resp=http.responseText;
//alert(resp);
var res=new Array(2);
res=resp.split('#');
if(myTrim(res[0].toString()+"")=='')
document.getElementById("mkh").innerHTML='<p align=center dir=rtl><font size="4" face="Traditional Arabic" color="red"><b>داده اي يافت نشد .'+res[0]+' </b></font></p>';
else
document.getElementById("mkh").innerHTML='<p align=center dir=rtl><font size="4" style="font-size:24px;" color="#000000" face="Traditional Arabic"><b>جمع مبلغ بيمه نامه شما :'+res[0]+' ريال</b></font></p>';
}
}
document.getElementById('BtnCompute').disabled=fal se;

}

function getSabeghe()
{

document.getElementById("mkh").innerHTML="<p align=center><font size=2 color='red'>لطفا کمي صبر نمائيد .</font><img src='../img/Anim1.gif' width=16 height=16 /><br /> <img src='../img/Anim4.gif' /></p>";
var grKh=document.getElementById("SabegheSales");
var pMali=document.getElementById("PosheshMali");
var pJani=document.getElementById("PosheshJani");
var pSar1=document.getElementById('pSar');
var IDMachin=document.getElementById('SelIDMachin');
var url='getSabeghe.php';
stData='SabgheKh=' ;
var s=-1;
s=(grKh.selectedIndex+1);

if(document.getElementById("chSefr").checked)
{
stData+="0";
}
else
{
stData+=s;
}
stData+="&pSar=" + pSar1.options[pSar1.selectedIndex].text;

stData+="&pMali=" + pMali.options[pMali.selectedIndex].text;
stData+="&pJani=" + pJani.options[pJani.selectedIndex].text;
stData+="&IDMachin=" + IDMachin.options[IDMachin.selectedIndex].text;
stData+='&NumSar='+document.getElementById('txtNumSarneshin' ).value;
// alert(stData);
http.open("POST",url,true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8");
http.setRequestHeader("Content-length", stData.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = AnswerSabghe;
http.send(stData);

}

var oldLink = null;
// code to change the active stylesheet
function setActiveStyleSheet(link1, title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
if (oldLink) oldLink.style.fontWeight = 'normal';
oldLink = link1;
// link1.style.fontWeight = 'bold';
return false;
}


function myTrim(st1)
{
var l=0;u=0;
for(i=0;i<st1.length && l==0;i++)
{
if(st1.charAt(i)!=' ')
{
l=1;
break;
}
}//for
l=i;
for(i=st1.length-1;i>=0 && u==0;i--)
{
if(st1.charAt(i)!=' ')
{
u=1;
break;
}
}//for
u=i;
// alert(l+ '-'+u);
if(u<l)
return('');
else
{
var stReturn=st1.substring(l,u+1);
return(stReturn);
}
}


function init()
{

var i=1340;
a = new Date();
d= a.getDay();
day= a.getDate();
month = a.getMonth()+1;
year= a.getYear();

year = (year== 0)?2000:year;
(year<1000)? (year += 2000):true;

year -= ( (month < 3) || ((month == 3) && (day < 21)) )? 622:621;
for(i=year;i>=1320;i--)
try
{
Model.options[Model.length] = new Option(i+'', i+'');
}
catch(ex)
{

}

return setActiveStyleSheet(this, 'win2k-2');

}
//-->
/*
stData+="&pSar=" + pSar1.options[pSar1.selectedIndex].text;
stData+='&pMali=' + pMali.options[pMali.selectedIndex].text;
stData=stData + '&pJani=' + pJani.options[pJani.selectedIndex].text;
stData+='&IDMachin=' + document.getElementById("IDMachin").options[document.getElementById("IDMachin").selectedIndex].text;

*/
</script>

</head>

<body onload="init();">
<table border="0" width="900" height="600" align="center" cellspacing="0" background="../img/BackSales2.jpg" cellpadding="0">
<tr><td>
<table border="0" width="820" height="300" align="center" cellspacing="0" cellpadding="0">
<tr>
<td height="176">
<table width="100%" height="170" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="120">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="200" class="HTitr" align="center">استعلام بيمه شخص ثالث</td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height="50">
<hr />
<table width="100%%" border="0" cellspacing="0" cellpadding="0">
<caption class="HTb" align="right">
اطلاعات خودرو
</caption>
<tr>
<td>
گروه خودرو :<select name="KhGroup" id="KhGroup" style="width:150px;" onchange="GetKhodro();">
<option value="1"></option>
<option value="1">سواري</option>
<option value="2">اتوکار</option>
<option value="3">بارکش</option>
<option value="4">موتور سيکلت</option>
<option value="5">ماشين آلات كشاورزي-راه سازي وساختماني</option>

</select></td>
<td>نوع خودرو : <select name="khNoe" id="khNoe" style="width:150px;" onchange="document.getElementById('SelIDMachin').selectedInd ex=document.getElementById('khNoe').selectedIndex;" ></select>
<Select name="SelIDMachin" id="SelIDMachin" style="visibility:hidden; width:0px;" ><option selected="selected">-1</option> </select> </td>
<td>مورد استفاده : <select name="khEstefade" id="khEstefade" style="width:150px;">
</select></td>
</tr>

<tr>
<td><label for="chSefr">صفر کيلومتر</label>
<input name="chSefr" type="checkbox" id="chSefr" value="sefr" onclick="if(this.checked)SabegheSales.disabled=true; else SabegheSales.disabled=false;"/>

</td>
<td>تاريخ شماره گذاري: <input name="DateModel" readonly="readonly" type="text" class="txt" id="DateModel" style="direction:ltr;" />
<img src="../img/cal.png" name="imgCal" width="22" height="22" id="imgCal" />
<script type="text/javascript">
Calendar.setup({
inputField : "DateModel", // id of the input field
button : "imgCal", // trigger for the calendar (button ID)
ifFormat : "%Y/%m/%d", // format of the input field
dateType : 'jalali',
weekNumbers : false
});
</script>
</td>
<td>سال ساخت: <select name="Model" class="txt" id="Model">
<option></option>
</select>
</td>
</tr>

</table></td>
</tr>
<tr>
<td height="50">
<hr />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<caption align="right" class="HTb">
اطلاعات بيمه سال قبل
</caption>
<!--
<tr>
<td>بيمه نامه سال قبل دارد
<input name="chBime" type="checkbox" id="chBime" value="bime" /></td>
<td>تاريخ انقضاء بيمه نامه :
<input name="DateBime" type="text" id="DateBime" /></td>
</tr>
-->
<tr>
<td>سابقه ثالث : <select name="SabegheSales" id="SabegheSales" >
<option value="3">يك سال عدم خسارت
<option value="4">دو سال عدم خسارت
<option value="5">سه سال عدم خسارت
<option value="6">چهار سال عدم خسارت
<option value="7">پنج سال عدم خسارت
<option value="8">شش سال و بيشتر عدم خسارت
<option value="9">يك بار خسارت در سال گذشته
<option value="10">دو بار خسارت در سال گذشته
<option value="11">سه بار خسارت در سال گذشته
<option value="14">سابقه دارد بدون تخفيف
عدم خسارت

</select></td>
<td>سابقه سرنشين : <select name="SabegheSarneshin" id="SabegheSarneshin" >
<option value="3" selected="selected">يك
سال عدم خسارت
<option value="4">دو
سال عدم خسارت
<option value="5">سه
سال عدم خسارت
<option value="6">چهار
سال عدم خسارت
<option value="7">پنج
سال عدم خسارت
<option value="8">شش
سال و بيشتر عدم خسارت
<option value="9">يك
بار خسارت در سال گذشته
<option value="10">دو
بار خسارت در سال گذشته
<option value="11">سه
بار خسارت در سال گذشته
<option value="14">سابقه
دارد بدون تخفيف عدم خسارت
</select></td>
</tr>
</table></td>
</tr>
<tr>
<td height="50"><table cellspacing="0" cellpadding="0">
<tr>
<td><span id="m9">پوشش جاني(مليون ريال) : </span></td>
<td><select name="PosheshJani" id="PosheshJani" style="width:70px;text-align:center;"
onchange="document.getElementById('PosheshMali').selectedInd ex=document.getElementById('PosheshJani').selected Index; document.getElementById('pSar').selectedIndex=docu ment.getElementById('PosheshJani').selectedIndex;" >
<option selected="selected">550</option>
<option>600</option>
</select>
</td>
<td><span id="m10">پوشش مالي(مليون ريال) : </span></td>
<td colspan="2"><select name="PosheshMali" id="PosheshMali" style="width:70px;text-align:center;"
onchange="document.getElementById('PosheshMali').selectedInd ex=document.getElementById('PosheshJani').selected Index; document.getElementById('pSar').selectedIndex=docu ment.getElementById('PosheshJani').selectedIndex;"
>
<option>13.5
<option>20

</select>
</td>
<td></td>
</tr>
<tr>
<td><span id="m11">پوشش سرنشين (مليون ريال) : </span></td>
<td><select name="pSar" id="pSar" style="width:70px;text-align:center;"
onchange="document.getElementById('PosheshMali').selectedInd ex=document.getElementById('PosheshJani').selected Index; document.getElementById('pSar').selectedIndex=docu ment.getElementById('PosheshJani').selectedIndex;"
>
<option selected="selected">100</option>
<option>100</option>
</select>
</td>
<td><span id="Label1">سرنشين تحت پوشش :</span></td>
<td><select id="P3dropSraneshinTahtPoshesh" disabled="disabled" onchange="doEnDisPusheshTaht(this.options[this.selectedIndex].value)" name="P3dropSraneshinTahtPoshesh">
<option value="70">راننده</option>
<option value="71" selected="selected">ظرفيت مجاز</option>
</select></td>
<td><span id="Label2">تعداد سرنشين :</span></td>
<td colspan="2"><input name="txtNumSarneshin" id="txtNumSarneshin" style="width:40px;text-align:center;" onkeyup="if(!isFinite(this.value) || this.value.search(' ') != -1 ) { alert('تعداد سرنشين بايد محتواي اعداد صحيح باشد .'); this.value='' ;}" onblur="if( this.value=='' ) { alert('تعداد سرنشين بايد محتواي اعداد صحيح باشد .'); this.value='' ;}" />
<font color="#FF0000" size="3"><b>*</b></font></td>
</tr>
</table>
<br />
<div align="center">
<input name="BtnCompute" onclick="this.disabled=true;getSabeghe();" style="width:130px; height:35px;background:url(../img/refresh.png) no-repeat right center #CCCCCC!important;border:2px #333333 ;border-top-color:#EEEEEE; border-left-color:#EEEEEE;" type="button" id="BtnCompute" value="محاسبه حق بيمه" />
</div>

</td>
</tr>
<tr>
<td>
<div id="mkh"></div>
</td>
</tr>
</table>
</td></tr></table>
</body>
</html>



مقادیر درصد هستند ....!
منتظر پاسخ شما هستم .

Hossein Bazyan
پنج شنبه 09 مهر 1388, 10:50 صبح
سلام

در کدهای زیر به جای اعداد ثابت درصد قرار بده مثلا بجای width=900px مقدار width=100% را قرار بده و بقیه هم بسته به نیاز خودت درصد دهی کن تا هم با عوض شدن رزولیشن و نوع براوزر بجای مقادیر ثابت درصد جایگزین شود چون مثلا" 100% یعنی همه عرض صفحه و در هر رزولیشن و براوزری . در ضمن همه براوزرها تمامی دستورات html و css را ساپورت نمیکنند



<table border="0" width="900" height="600" align="center" cellspacing="0" background="../img/BackSales2.jpg" cellpadding="0">
<tr><td>
<table border="0" width="820" height="300" align="center" cellspacing="0" cellpadding="0">
<tr>
<td height="176">
<table width="100%" height="170" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="120">&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td width="200" class="HTitr" align="center">استعلام بيمه شخص ثالث</td>
<td>&nbsp;</td>
</tr>
</table></td>
</tr>
<tr>
<td height="50">
<hr />
<table width="100%%" border="0" cellspacing="0" cellpadding="0">
<caption class="HTb" align="right">
اطلاعات خودرو
</caption>
<tr>
<td>