I'm trying to write the code for an AJAX script. The goal is to let the visitor send a comment through a form (obviously). The form is inside a div that pops up when the visitor clicks on an "add a comment" link and when the form is submitted the result of the form processing apears inside the same div which resizes to fit the size of the result.

The problem I'm trying to solve is that although the resizing and the positioning of the div works for Firefox it doesn't for IE7. In IE7 it does the resizing but the positioning fails


Here are the source codes simplified (only the divs resizing and centering are shown):

Test them here

PS: I know I could give a try to scriptacolous but... it's a matter of pride


testprototype.htm
HTML Code:
<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script src="js/prototype.js"></script>
<script src="js/openDiv.js"></script>
<link href="css/openDiv.css" rel="stylesheet" type="text/css" />
</head>

<body onload="initDivs();">
<a href="#" onclick="showForm();">click 1</a><br />
<a href="#" onclick="showResults();">click 2</a>

<div id="sombra"></div>
<div id="papel"></div>
</body>
</html>
openDiv.css
Code:
/* CSS Document */


	#sombra{
		z-index:102;
		position:absolute;
		background-color:#000000;
		opacity:0.5;
	}
		
	#papel{
		z-index:103;
		position:absolute;
		background-color:#FFFFFF;
		border:1px solid #666666;
		text-align:left;
	}
openDiv.js
Code:
// JavaScript Document
	var	screenWidth = findLivePageWidth(); 		
	var	screenHeight = findLivePageHeight(); 	
	var w;								//temp width
	var h;								//temp height
	var creado = false;						
	var visible = false;						
	
	var incW = 100; // width incremrnt
	var incH = 30; // height increment
	
	var shadow;				// drop-shadow object
	var offsetXShadow = 5;
	var offsetYShadow = 5;
	
	var papel;						//canvas object
	var	wFinal;						//canvas final width
	var	hFinal;						// canvas final height
	

	/* client dimensions */
	function findLivePageWidth(){
		try{
			return window.innerWidth;
		}catch(err){
			return document.body.clientWidth;	
		}
	}
	
	function findLivePageHeight(){
		try{
			return window.innerHeight;
		}catch(err){
			return document.body.clientHeight;	
		}
	}
	
	
	
	/* initialize  divs */
	function initDivs(){

		shadow = $('sombra');
		papel = $('papel');

		w = 2;
		h = 2;
		wFinal = 2;		
		hFinal = 2;
				
		shadow.setStyle({width:w+'px', height:h+'px', top:(screenHeight/2 + offsetYShadow -1 )+'px', left:(screenWidth/2 + offsetXShadow - 1)+'px'});
		shadow.hide();
		
		papel.setStyle({width:w+'px', height:h+'px', top:(screenHeight/2 - 1)+'px', left:(screenWidth/2 -1 )+'px'});
		papel.hide();
		
		creado = true;
		visible = false;
	}
	

	/* resize canvas */
	function resize(){

		if(!visible){
			shadow.show();
			papel.show();
		}
		
		/* getWidth() returns width including borders so 
		 * 2 pixeles are substracted
		 */
		w = papel.getWidth() - 2;
		h = papel.getHeight() - 2;

		deltaW = wFinal - w;
		deltaH = hFinal - h;
		
		masMenosW = (deltaW >= 0)?1:-1;
		masMenosH = (deltaH >= 0)?1:-1;

		
		if(deltaW != 0){
			if(Math.abs(deltaW) >= incW){
				w = w + (masMenosW*incW);
			}else{
				w = w + (masMenosW*Math.abs(deltaW));	
			}	
	
			x = Math.floor((screenWidth/2) - (w/2));
						
			papel.setStyle({width: w+'px'});	
			papel.setStyle({left:x+'px'});		
			
			shadow.setStyle({width: w+'px'});
			shadow.setStyle({left:(x+offsetXShadow)+'px'});		
			setTimeout("resize()",10);				
			
		}else{
			if(deltaH != 0){
				if(Math.abs(deltaH) >= incH){
					h = h + (masMenosH*incH);
				}else {
					h = h + (masMenosH*Math.abs(deltaH));	
				}				

				y = Math.floor((screenHeight/2) - (h/2));
							
				papel.setStyle({height: h+'px'});	
				papel.setStyle({top:y+'px'});		
				
				shadow.setStyle({height: h+'px'});
				shadow.setStyle({top:(y+offsetYShadow)+'px'});		
	
				setTimeout("resize()",10);	
			}else{
				clearTimeout();	
			}
		}
	}
	
	function showForm(){
		wFinal = 290;
		hFinal = 400;
		resize();
	}
	
	function showResults(){
		wFinal = 240;
		hFinal = 190;		
		resize();

	}