[Javascript] DOCTYPE making div.style.top NOT WORK

Thu Dec 14 06:49:34 CST 2006

the following script works fine so far!
but when adding the following DOCTYPE into the first line:

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

the script stops working and div.style.top seems to have no effect.

it took me a lot of time to find this. any reason?!

thanks

the script:

---------------------------------------------------------------------------------------------------------------------

<html>

<head>
<title>JavaScript</title>

<script type="text/javascript">
function getPosition(element)
{
  var elem=element,tagname="",x=0,y=0;

  while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
  {
    y+=elem.offsetTop;
    x+=elem.offsetLeft;
    tagname=elem.tagName.toUpperCase();

    if (tagname=="BODY")
      elem=0;

    if (typeof(elem)=="object")
      if (typeof(elem.offsetParent)=="object")
        elem=elem.offsetParent;
  }

  position=new Object();
  position.x=x;
  position.y=y;
  return position;
}

function getSort(elementId, divId, show)
{
  var a,element;

  element=document.getElementById(elementId);
  div=document.getElementById(divId);

  a=getPosition(element);

   if(show == true)
   {
    div.style.visibility = 'visible';
    div.style.display  = 'block';

    div.style.top  = a.x+58;
    div.style.left = a.y+20;
  }
  else
  {
    div.style.visibility = 'hidden';
    div.style.display  = 'none';
  }
}

function handleSort(elementId, divId, show)
{
  var a,element;

  element=document.getElementById(elementId);

  div=document.getElementById(divId);

  a=getPosition(element);

  if(show == true)
  {
   div.style.top  = a.x+58;
   div.style.left = a.y+20;

   div.style.visibility = 'visible';
   div.style.display  = 'block';
 }
 else
 {
   div.style.visibility = 'hidden';
   div.style.display  = 'none';
 }
}
</script>
</head>

<body>

<a onmouseover="javascript:handleSort(this.id, 'sortDiv', true)" 
name="sort[contacts.contacts_name]" 
id="sort[contacts.contacts_name]">12345</a>

<div id="sortDiv" 
style="display:none;visibility:hidden;position:relative;">test</div>

</body>
</html> 