Why can't i get this to work? See my demo code, works fine in IE6, xhtml transitional validator tested, but xSlideTo fails in FireFox??

Copy code and view demopage in IE and FF. I tried everything... the bottom div just wont slide in Firefox!......

Read comments on demo page. PLEASE HELP!!

HTML Code:
<?xml version="1.0" encoding="UTF-8"?>
<!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>Demotestpage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://cross-browser.com/x/x_core.js"></script><!-- just for this demo only -->
<script type="text/javascript" src="http://cross-browser.com/x/x_slide.js"></script><!-- just for this demo only-->

<script type="text/javascript">
window.onload = function() {
    var e = xGetElementById('t1');
    e.onmouseover = scrlOnMouseover;
    e.onmouseout = scrlOnMouseout;
}
function scrlOnMouseover() {
		xMoveTo(t1, xPageX(tf), xPageY(tf));
    xSlideTo(t1, xPageX(tf), xPageY(tf)-xHeight(t1)+40, 200);
}

function scrlOnMouseout() {
    xSlideTo(t1, xPageX(tf), xPageY(tf), 200);
}
</script>



<style type="text/css">
<!--

html, body {width:100%; height:100%;overflow:hidden;}

body { 
margin: 0px;
adding: 0px;
font: 9px Verdana;
color:  #8599a5;
background:#fff;
}
	
#wrapper {
position: absolute;
bottom:0px;left:0px;
width:100%;height:100%;
margin:0px;
padding:0px;
background:#bddefd;
color:#000;
}

#t1 {
position: absolute;
bottom:0px;
left:0px;
padding:0px;
margin: 0px 0px -165px 0px;
 filter:alpha(Opacity:50);
 -moz-opacity: 0.5;
 opacity: 0.5;
width:100%;
height:200px;
background:#000;
color:#fff;
border: 0px solid blue;
overflow:visible;
z-index:10;
}

#tf {
position: absolute;
bottom:0px;
left:0px;
padding:0px;
margin: 0px 0px -165px 0px;
width:100%;
height:200px;
background:transparent;
color:#fff;
border: 0px solid blue;
overflow:visible;
z-index:0;
}
-
</style>


</head>
<body>
<body>
<div id="wrapper">
<h2>xSlideTo not crossbrowser?</h2>
(check bar at bottom) &nbsp;&nbsp;&nbsp;.....why won't this work????? 
<div id="t1">
Mike, this div slides up on mouseover, and back on mouseout. Works fine in IE6, but not in firefox (2.0)????<br>
Exept when i delete the xhtml 1.0 transitional doctype (why is this?). BUT i need this 'XHTML 1.0 Transitional' doctype! HELP! 
</div>

<div id="tf">&nbsp;</div>

</div>
</body>
</html>