php and javascript...don't like each other?

[pgsjoe]

so I pulled some script off of here used it on a regular HTML page and it worked awesome. But, once I tried to incorporate PHP into it, all of the sudden "it don't work so good".

The script is suppose to float the menu on the page, and as you scroll down, it moves with you. The box is taking on the CSS attributes (which it should) and parsing the correct information, as well as the rest of the page looking as it should, but the box doesn't float. I know there's a difference between client-side and server-side coding, but I really don't know what to do here. if you know anything, thanks in advance.


<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute">')
</script>
<layer id="divStayTopLeft">
<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<table border="0" width="220" cellspacing="0" cellpadding="0" id="interests">
<tr>
<td>
<h3>interests</h3></td>
</tr>
<tr>
<td>
<ul id="topics">';
<?php
// Request all the updates
$result = @mysql_query('SELECT * FROM `gau` GROUP BY submitdate DESC, pk ASC');
if (!$result) {
exit('<p>Error performing query: ' .
mysql_error() . '</p>');
}

// Display the results of each row
while ($row = mysql_fetch_array($result)) {
$pk = $row['pk'];
$title = $row['title'];

$title = addslashes($title);

echo '<li><a href="#' . $pk . '">' . $title . '</a></li>';
}
?>
</ul> </td>
</tr>
</table>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">

/*
Floating Menu script- Roy Whittle (http://www.javascript-fx.com/)
Script featured on/available at http://www.dynamicdrive.com/
This notice must stay intact for use
*/

var verticalpos="fromtop"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = 3,
startY = 10;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>