Getting error in IE 8, but works ok in Firefox.

The page should show an overlay box with text in it, but this only works in Firefox but not IE can anyone see why this may be?

The error I get is...

Message: Object doesn't support this property or method
Line: 26
Char: 29
Code: 0

line 26 is..
helpContent = document.getElementById('helpContent');




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>
	<title>Overlay test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	#helpOverlay { background-color: #ccffcc; display: none; margin-left: 40px; position: absolute; width: 400px; height: 200px; visibility: visible }
	#helpContainer{ color: black; background-color: #0ff; text-align: center; position: absolute; width: 100%; overflow: visible; visibility: visible; display: block }
	</style>
	<script type="text/javascript">//<![CDATA[
	function hideHelpContent() {
		document.getElementById('helpOverlay').style.display = 'none';
		var helpContent = document.getElementById('helpContent');
		helpContent.innerHTML = '';
	}

	function showHelpContent(layer) {
		var xmlhttp;
				if(window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
											}
		xmlhttp.onreadystatechange=function() {
				if(xmlhttp.readyState==4 && xmlhttp.status==200) {
																	if(xmlhttp.responseText == ''){ //document.getElementById('passengerID').value='0';
																									//document.getElementById('results').style.display='none';
																									} else {	helpIconId = document.getElementById(layer); //alert(layer);
																												helpContent = document.getElementById('helpContent'); // line 26
																												helpContent.innerHTML = '';
																												// Move the help container!
																												the_left = ds_getleft(helpIconId);
																												the_top = ds_gettop(helpIconId); // + helpContent.offsetHeight;
																												//alert(the_left + '  ' + the_top);
																												helpContainer = document.getElementById('helpContainer');
																												helpContainer.style.left = the_left + 'px';
																												helpContainer.style.top = the_top + 'px';
																												helpContent.innerHTML = xmlhttp.responseText;
																												document.getElementById('helpOverlay').style.display = 'block';
																											}
				}
		}
	xmlhttp.open("GET","getHelpText.php?name="+layer,true); xmlhttp.send();
	}




	// Get the left and the top of the element.
	function ds_getleft(el) {
		var tmp = el.offsetLeft;
		el = el.offsetParent
		while(el) {
			tmp += el.offsetLeft;
			el = el.offsetParent;
		}
		return tmp;
	}
	function ds_gettop(el) {
		var tmp = el.offsetTop;
		el = el.offsetParent
		while(el) {
			tmp += el.offsetTop;
			el = el.offsetParent;
		}
		return tmp;
	}



	//]]></script>
</head>
<body>

<div id="helpContainer"><div id="helpOverlay"><a href="#" onclick="hideHelpContent();" style="float: right;">close</a><div id="helpContent"></div></div></div>
<br />
<br />
<br />
<br />
<br />
<br />
<img id="helpA" alt="" onclick="showHelpContent('helpA')" src="../images/newsimage39.gif">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img id="helpB" alt="" onclick="showHelpContent('helpB')" src="../images/newsimage39.gif">

</body>
</html>