JavaScript loses image movement function when using a DOCTYPE_问答_开发者

I have got a JavaScript here that is suppose to make an image (ghost) appear on screen, fly around for a bit, and then fade out before repeating again later on. The script works just fine without a DOCTYPE in my document, however if I add any DOCTYPEs, only the appear/disappear works. For some reason it doesn't move around on screen. The DOCTYPE I need to use is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

This has been driving me crazy and I can't seem to figure out how to make it compatible. I just need to get the movement portion working with a DOCTYPE. Any help with this would really be appreciated. Below is the script:

if(!window.JSFX) JSFX=new Object();
JSFX.ghostImages = new Array( 
    "<img src='/ghost.png'>",
    "<img src='/ghost2.png'>"
);
var ns4 = document.layers;
var ie4 = document.all;
JSFX.makeLayer = function(id)
{
    var el =        document.getElementById ? document.getElementById(id) :
                    document.all            ? document.all[id] :
                                                      document.layers[id];
    if(ns4) el.style=el;
    el.sP=function(x,y){this.style.right = x;this.style.top=y;};
    el.show=function(){ this.style.visibility = "visible"; } 
    el.hide=function(){ this.style.visibility = "hidden"; } 
    if(ns4 || window.opera) 
            el.sO = function(pc){return 0;};
    else if(ie4)
            el.sO = function(pc)
            {
                    if(this.style.filter=="")
                            this.style.filter="alpha(opacity=100);";
                    this.filters.alpha.opacity=pc;
            }
    else
            el.sO = function(pc)
{
this.style.opacity=pc/100;
}

    return el;
}

if(window.innerWidth)
{
    gX=function(){return innerWidth;};
    gY=function(){return innerHeight;};
}
else
{
    gX=function(){return document.body.width-50;};
    gY=function(){return document.body.height-50;};
}
JSFX.ghostOutput=function()
{
    for(var i=0 ; i<JSFX.ghostImages.length ; i++)
            document.write(ns4 ? "<LAYER  NAME='gh"+i+"'>"+JSFX.ghostImages[i]+"<\/LAYER>" : 
                                       "<DIV id='gh"+i+"'     style='position:absolute'>"+JSFX.ghostImages[i]+"<\/DIV>" );

}
JSFX.ghostSprites = new Array();
JSFX.ghostStartAni = function()
{
    for(var i=0 ;i<JSFX.ghostImages.length;i++)
    {
            var el=JSFX.makeLayer("gh"+i);
            el.x=Math.random()*gX();
            el.y=Math.random()*gY();
            el.tx=Math.random()*gX();
            el.ty=Math.random()*gY();
            el.dx=-5+Math.random()*10;
            el.dy=-5+Math.random()*10;
            el.state="off";
            el.op=0;
            el.sO(el.op);
            el.hide();
            JSFX.ghostSprites[i] = el;
    }
    setInterval("JSFX.ghostAni()", 40);
}
JSFX.ghostAni = function()
{
    for(var i=0 ;i<JSFX.ghostSprites.length;i++)
    {
            el=JSFX.ghostSprites[i];

            if(el.state == "off")
            {
                    if(Math.random() > .99)
                    {
                            el.state="up";
                            el.show();
                    }
            }
            else if(el.state == "on")
            {
                    if(Math.random() > .98)
                            el.state="down";
            }
            else if(el.state == "up")
            {
                    el.op += 2;
                    el.sO(el.op);
                    if(el.op==100)
                            el.state = "on";
            }
            else if(el.state == "down")
            {
      开发者_高级运维              el.op -= 2;
                    if(el.op==0)
                    {
                            el.hide();
                            el.state = "off";
                    }
                    else
                            el.sO(el.op);
            }

            var X = (el.tx - el.x);
            var Y = (el.ty - el.y);
            var len = Math.sqrt(X*X+Y*Y);
            if(len < 1) len = 1;
            var dx = 20 * (X/len);
            var dy = 20 * (Y/len);
            var ddx = (dx - el.dx)/10;
            var ddy = (dy - el.dy)/10;
            el.dx += ddx;
            el.dy += ddy;
            el.sP(el.x+=el.dx,el.y+=el.dy);

            if(Math.random() >.95 )
            {
                    el.tx = Math.random()*gX();
                    el.ty = Math.random()*gY();
            }

    }
}
JSFX.ghostStart = function()
{
    if(JSFX.ghostLoad)JSFX.ghostLoad();
    JSFX.ghostStartAni();
}
JSFX.ghostOutput();
JSFX.ghostLoad=window.onload;
window.onload=JSFX.ghostStart;

Here is an example of the script on a page without a DOCTYPE: http://boomansion.net/test.php

...and an exmaple on a page with a DOCTYPE (look at the very bottom): http://boomansion.net/test2.php

Thanks in advance!

You set setting top and left to Numbers, but they take lengths (and non-zero lengths must have a unit).

When you add a Doctype, browsers:

Assume you know what you are doing
Follow the specification more closely
(Consequently) are more consistent with each other
(Consequently) will treat more errors are "values to ignore" instead of "values to fix up automatically".

You probably want to + "px".