The XHTML & JavaScript code below will display a floating green bar. It stays at the top of the page and should reposition itself whenever the user scrolls thru the page.
It works fine in IE5 and Mozilla (Firefox) but not in IE6. In IE6 with Service Pack 2 installed, the bar always remains at the top of the page and does not reposition when the page is scrolled.
I can make it work if I remove the DOCTYPE, but I wish to keep it to remain W3C compliant.
Any suggestions?
It works fine in IE5 and Mozilla (Firefox) but not in IE6. In IE6 with Service Pack 2 installed, the bar always remains at the top of the page and does not reposition when the page is scrolled.
I can make it work if I remove the DOCTYPE, but I wish to keep it to remain W3C compliant.
Any suggestions?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html lang="en-US">
<head>
<title>test</title>
<meta name="language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<script language="JavaScript1.2" type="text/javascript">
<!--
var floaterObj
var isNS
var xOffset, yOffset
var newXOffset, newYOffset
function setUp() {
if (document.getElementById) {floaterObj = document.getElementById("floater").style;}
else {floaterObj = document.floater;}
if (navigator.appName == 'Netscape') {isNS = true;}
else {isNS = false;}
newXOffset = 0;
newYOffset = 0;
window.setInterval("placeFloater()", 100)
placeFloater()
}
function placeFloater() {
if (isNS) {
xOffset = window.pageXOffset;
yOffset = window.pageYOffset;
} else {
xOffset = document.body.scrollLeft;
yOffset = document.body.scrollTop;
}
floaterObj.top = 0 + yOffset - newYOffset + 'px';
floaterObj.left = 0 + xOffset - newXOffset + 'px';
}
//-->
</script>
</head>
<body onload="setUp()">
<div id="floater" style="position:absolute;">
<table cellpadding="0" cellspacing="0" width="100%" style="background-color:#060">
<tr>
<td> </td>
</tr>
</table>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>