Dynamically positioned Form crashes IE5.5 [Archive]

View Full Version : Dynamically positioned Form crashes IE5.5

sametch

05-13-2003, 06:33 AM

I have written a script which centers web page elements by changing the position of a style element according to the width of the page.

The script works fine until I put a form inside the style element on the page. Then it crashes IE5.5 and AOL 7 (kills dead!).

Is there something wrong with doing this. My HTML code and Script follows:

**Script**

function CentreWebDesign(DesignWidth)
{
var LeftStart=0;
var PageSize=0;
if (document.body.clientWidth != null)
{
PageSize=document.body.clientWidth;
}
else
{
if (window.innerWidth != null)
{
PageSize=document.innerWidth;
}
}
if (PageSize > DesignWidth)
{
LeftStart=Math.round((PageSize - DesignWidth)/2);
}
document.getElementById('container').style.left = LeftStart;
}

**End Script**

**HTML**

<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript" src="c.js"></script>
<link href="content.css" rel="stylesheet" type="text/css">
<style type="text/css">

</style>
</head>
<body onLoad="CentreWebDesign(740); MM_preloadImages('images/faq-o.gif','images/contacts-o.gif','images/clients-o.gif','images/features-o.gif','images/services-o.gif','images/about-o.gif','images/home-o.gif')" onResize="CentreWebDesign(740)">
<div id="container">
<div class="heading">how to contact us</div>
<div class="content">
<form name="form1" method="post" action="thanks.php">
<table width="670" border="0" align="center" cellpadding="0" cellspacing="5" summary="Enquiry Form">
<tr>
<td width="158"><p class="formtext">Your Requirements</p></td>
<td width="487"><label for="textarea"></label> <textarea name="requirements" id="requirements"></textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Submit" id="Submit" style="background-color: #DEEFAD; color: #336633; border: 1 solid #3FBE7B;">
<input type="hidden" name="stage" value="process"> <input type="reset" name="Reset" value=" Reset" id="label" style="background-color: #DEEFAD; color: #336633; border: 1 solid #3FBE7B;"></td>
</tr>
</table>
</form>
<p><br>
</p>
<img src="images/bottom.gif" width="720" height="78" alt=""></div>
</div>
</body>
</html>

**End HTML**

Any help would be great, this has bugged me for days!:confused:

glenngv

05-13-2003, 08:45 AM

I copied your html and inserted the script in the head. It worked for me in IE5.5. How did you insert the script in your html. Does the external js (c.js) point to this script?

sametch

05-13-2003, 09:20 AM

Its tempting to think its a bug in my browser. But this problem occurs on two seperate machines one W2K IE5.5 the other WXP AOL7.0. IE crashes as soon as the page is loaded. AOL the page closes as soon as you try to scroll it!

I am completely baffled by it
:confused: and after two days, getting a little fed up too!

The full code of c.js is below:

*******************

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_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_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_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function CentreWebDesign(DesignWidth)
{
var LeftStart=0;
var PageSize=0;
if (document.body.clientWidth != null)
{
PageSize=document.body.clientWidth;
}
else
{
if (window.innerWidth != null)
{
PageSize=document.innerWidth;
}
}
if (PageSize > DesignWidth)
{
LeftStart=Math.round((PageSize - DesignWidth)/2);
}
document.getElementById('container').style.left = LeftStart;
}

glenngv

05-13-2003, 09:55 AM

try commenting the MM_preloadImages() call on onload to see if the function CentreWebDesign() is the culprit.

sametch

05-13-2003, 10:20 AM

Glen

Thanks for all your help. By accident I have found the problem and its the most bizzare thing.

I uploaded a new test site but left out the attached .css. It worked fine (apart from layout) without crashing.

I then disected my .css and found that a definition in the body selector to set up coloured scrollbars was the culprit. (AOL crashing when I scrolled gave me a clue!)

Don't ask me why. But if I remove the following code from my .css there are no more crashes:

body{
scrollbar-face-color: #DEEFAD;
scrollbar-highlight-color: #F5FAE6;
scrollbar-track-color: #ECF6CF;
scrollbar-arrow-color: #7B9A1F;
scrollbar-shadow-color: #C6E371;
}

This coding although not css2 generally works to colour scrollbars, but it obviously interacts badly with my function.

So I have gone back to grey scrollbars!

:D