IE Compatibility Issue ....

Hey guys ...

Have an issue with the website I'm building.
I'm using the prototype library along with scriptaculous..
nothing really fancy or out of the ordinary...

There are a few videos to be looked at - it's a website for a wedding films production company (well the wedding films production company a friend and I are creating) -
I built the following js class - quite straight forward to dim the page, open the player - a flash player you may already be familiar with ... here is the code with a few comments :

var BPPlayer = Class.create({
	initialize: function(videoElement) {
			this.videoWidth = videoElement.width;
			this.videoHeight = videoElement.height;
		this.videoFile = videoElement.pathToMovie;
		this.id = "BPPlayer";
			// first, we destroy the player if it already exists ... shouldn't happen, but it doesn't hurt .. just in case
		this.destroy();
			// then we go to the heart of the problem
		this.DOMcreate();
	  },
	DOMcreate: function() {
			 var fullScreen = new Element("div");
			 fullScreen.id = this.id;
			 fullScreen.setAttribute("class","curtain");
			 fullScreen.setAttribute("style","position:absolute;top:0px;left:0px");

			 //fullScreen.style.display='none';
			 fullScreen.style.width = $('body').offsetWidth+"px";
		 fullScreen.style.height = $('body').offsetHeight+"px";
		 //Effect.toggle(fullScreen,'appear');
		 // the part above here makes a great big div the background pic is a grey image at about 20% opacity for the dim effect - I commented out the Effect to avoid problems ...

			 // the following part just builds the table that will contain the closing button, the background, the borders, the logo and the container for the player

		var player = new Element("div");
		player.id = "playerContainer";
		var x = ( $('body').getWidth() - this.videoWidth ) / 2;  /// yeah .. i gave the id "body" to the body
		player.style.position='absolute';
		player.style.left=x+"px";
				player.style.top= $('body').scrollTop+120+"px";
		player.style.display='';

		var table = new Element('table');
		table.cellSpacing = 0;
		table.cellPadding = 0;
		table.border = 0;
		table.setAttribute("class",'playerTable');
		
		var row = new Element('tr');
		row.height='30px';
		var cell = new Element('td');
		cell.height = '30px';
		cell.width = '30px';
		cell.appendChild(this.closeButton());
		cell.id = 'top-left';
		row.appendChild(cell);
		var cell = new Element('td');
		cell.id = 'top';
		row.appendChild(cell);
		var cell = new Element('td');
		cell.width = '30px';
		cell.id = 'top-right';
		row.appendChild(cell);
		table.appendChild(row);
		
		var row = new Element('tr');
		var cell = new Element('td');
		cell.width = '30px';
		cell.id = 'left';
		row.appendChild(cell);
		var cell = new Element('td');
		cell.id = 'player1';
		row.appendChild(cell);
		var cell = new Element('td');
		cell.id = 'right';
		cell.width = '30px';
		row.appendChild(cell);
		table.appendChild(row);

		var row = new Element('tr');
		var cell = new Element('td');
		cell.width = '30px';
		cell.id = 'left';
		row.appendChild(cell);
		var cell = new Element('td');
		cell.align='center'
		cell.id = 'player-logo';
		cell.innerHTML = '<img src="./interface/images/player/logo.png"/>';
		row.appendChild(cell);
		var cell = new Element('td');
		cell.id = 'right';
		cell.width = '30px';
		row.appendChild(cell);
		table.appendChild(row);

		var row = new Element('tr');
		row.height='30px';
		var cell = new Element('td');
		cell.height = '30px';
		cell.width = '30px';
		cell.id = 'bottom-left';
		row.appendChild(cell);
		var cell = new Element('td');
		cell.id = 'bottom';
		row.appendChild(cell);
		var cell = new Element('td');
		cell.width = '30px';
		cell.id = 'bottom-right';
		row.appendChild(cell);
		table.appendChild(row);

		
		player.appendChild(table);
		fullScreen.appendChild(player);
		$('body').appendChild(fullScreen);

				// the next 2 commands call the UFO class to create the flash player in the container td defined above
		var FO = {	movie:"./interface/flv_player/flvplayer.swf",width:(this.videoWidth-35),height:this.videoHeight,majorversion:"7",build:"0",bgcolor:"#FFFFFF",
						flashvars:"file="+this.videoFile+"&lightcolor=0xFFFFFF&showdigits=true&autostart=true&showfsbutton=false" };
		UFO.create(	FO, "player1");
		
	  },
	closeButton: function() {
		var button = new Element('a');
		var img = new Element('img');
		button.href='java script:void(0)';
		button.setAttribute('onclick','BPPlayerInstance.close()');
		img.border=0
		img.style.position='relative';
		img.style.top='5px';
		img.style.left='5px';
		img.src='./interface/images/closebox.png';
		button.appendChild(img);
		return button;
	},
	destroy: function() {
		if($(this.id)) {
			$(this.id).remove();
		}
	},
	close: function() {
		this.destroy();
	}
	
});

the css for curtain (i added the same as in-line style def but it hasn't changed a thing):

.curtain {
	background-image:url('../images/curtain.png');
	position:absolute;
	top:0px;
	left:0px;
}

right ... so that works brilliantly in safari 3,4 and FF 2,3 ... but not in IE :crazy:

in IE when the handler is called and an instance of BPPlayer in initialised, the browser viewport just doubles in size and there is nothing in the second half...

when i alert the content of the fullScreen element it looks pretty good, everything seems to be where it should be and I managed to get rid of all errors that IE was throwing at me ... but still no luck ...

I'm probably using some properties that IE doesn't like .... but I need another set of (skilled) eyes to have a look at it ...
Thanks in advance !!!