I have a sliding panel application for a site I'm creating, and in Firefox the "innerHTML" function is working in one place and not the other, and even though I have functions preventing the panels from getting too big, if you go from the second to the first panel, the second panel gets too large and pushes the third down. In IE the variable representing the size of the panel still increases to more than it should, but the size of the panel doesn't. You can see the site here:

http://clients.industrialwebrevolution.com/vcprint/

And the javascript code is here:

Code:
// All Code Copyright Jacob Buob, All Rights Reserved

var defaultSpeed = 7; //Speed is 7px/50milliseconds
var acceleration = 5; //Acceleration is 5px/50milliseconds/50milliseconds
var largeSize = 560; //Large size of div is 560px
var smallSize = 160; //Small size of div is 160px
var timeInterval = 50; //Every 50 Milliseconds
var defaultFilter = 70; //Mask is 70% opacity on un-highlighted panels

var left = smallSize;
var middle = smallSize;
var right = largeSize;
var speed;

var intervalID;
var thisBox;

function hideOthers(Box) {
	thisBox = Box;
	speed = defaultSpeed;
	clearInterval(intervalID);
	//fixMasks();
	intervalID = setInterval('move()',timeInterval);
}

function move() {
	speed = speed + acceleration;
	switch(thisBox) {
		case 'left':
			if(left<largeSize && (left+speed)<largeSize) {
				left = left + speed;
				if(right>smallSize) {
					right = right - speed;
				} else {
					right = smallSize;
				}
				if(middle>smallSize) {
					middle =  middle - speed;
				} else {
					middle = smallSize;
				}
				changeWidths();
				changeOpacity();
				show();
			} else {
				left = largeSize;
				midde = smallSize;
				right = smallSize;
				changeWidths();
				changeOpacity();
				show();
				check();
				clearInterval(intervalID);
			}
			break;
		case 'middle':
			if(middle<largeSize && (middle+speed)<largeSize) {
				middle = middle + speed;
				if(right>smallSize) {
					right = right - speed;
				} else {
					right = smallSize;
				}
				if(left>smallSize) {
					left =  left - speed;
				} else {
					left = smallSize;
				}
				changeWidths();
				changeOpacity();
				show();
			} else {
				left = smallSize;
				middle = largeSize;
				right = smallSize;
				changeWidths();
				changeOpacity();
				show();
				check();
				clearInterval(intervalID);
			}
			break;
		case 'right':
			if(right<largeSize && (right+speed)<largeSize) {
				right = right + speed;
				if(left>smallSize) {
					left = left - speed;
				} else {
					left = smallSize;
				}
				if(middle>smallSize) {
					middle =  middle - speed;
				} else {
					middle = smallSize;
				}
				changeWidths();
				changeOpacity();
				show();
			} else {
				left = smallSize;
				middle = smallSize;
				right = largeSize;
				changeWidths();
				changeOpacity();
				show();
				check();
				clearInterval(intervalID);
			}
			break;
	}
}

function check() {
	switch(thisBox) {
		case 'left':
				left = largeSize;
				middle = smallSize;
				right = smallSize;
				changeWidths(left,middle,right);
		break;
		case 'middle':
				left = smallSize;
				middle = largeSize;
				right = smallSize;
				changeWidths(left,middle,right);
		break;
		case 'right':
				left = smallSize;
				middle = smallSize;
				right = largeSize;
				changeWidths(left,middle,right);
		break;
	}
}

function fixMasks() {
	document.getElementById('left-mask').style.display = "block";
	document.getElementById('middle-mask').style.display = "block";
	document.getElementById('right-mask').style.display = "block";
	
	document.getElementById(thisBox + '-mask').style.display = "none";
}

function show(){
	var LeftSize = left;
	var MiddleSize = middle;
	var RightSize = right;
	
	document.getElementById('left').innerHTML = LeftSize;
	document.getElementById('middle').innerHTML = MiddleSize;
	document.getElementById('right').innerHTML = RightSize;
}

function changeOpacity(){
	var leftOpacity = Math.round((defaultFilter/(smallSize - largeSize))*(left - smallSize) + defaultFilter);
	var middleOpacity = Math.round((defaultFilter/(smallSize - largeSize))*(middle - smallSize) + defaultFilter);
	var rightOpacity = Math.round((defaultFilter/(smallSize - largeSize))*(right - smallSize) + defaultFilter);

	
	document.getElementById('left-opac').innerHTML = leftOpacity/100;
	document.getElementById('middle-opac').innerHTML = middleOpacity/100;
	document.getElementById('right-opac').innerHTML = rightOpacity/100;
	document.getElementById('left-filter').innerHTML = leftOpacity;
	document.getElementById('middle-filter').innerHTML = middleOpacity;
	document.getElementById('right-filter').innerHTML = rightOpacity;
	

	document.getElementById('left-mask').style.opacity = leftOpacity/100;
	document.getElementById('middle-mask').style.opacity = middleOpacity/100;
	document.getElementById('right-mask').style.opacity = rightOpacity/100;
	document.getElementById('left-mask').filters.alpha.opacity = leftOpacity;
	document.getElementById('middle-mask').filters.alpha.opacity = middleOpacity;
	document.getElementById('right-mask').filters.alpha.opacity = rightOpacity;
}

function changeWidths() {
	//alert();
	document.getElementById("left-box").style.width=left + 'px';
	document.getElementById("middle-box").style.width=middle + 'px';
	document.getElementById("right-box").style.width=right + 'px';
}
Any help would be greatly appreciated! Thanks!