Javascript Dynamic Div Hover Menu Doctype Problem

I can get this to work in IE or firefox with out the doctype specified, but I need it for my other pages in my site. Is there a way to fix it so IE and firefox will view the hover divs correctly in both? The div should display below the text, but with the doctype Im using it will always show in the upper left hand corner. Thanks.

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

<script language="javascript" type="text/javascript">

//**************************************************************************************************************
//positioning functions*************************************************************************************

function getAnchorWindowPosition(anchorname)
{

   var coordinates=getAnchorPosition(anchorname);
   var x=0;
   var y=0;

   if(document.getElementById)
   {
      if(isNaN(window.screenX))
      {
         //ie likes this
         this.x=coordinates.x;
         this.y=coordinates.y + 16; //added the px height of font to display directly under
      }
         else
      {
         this.x=coordinates.x;
         this.y=coordinates.y + 12; //added the px height of font to display directly under
      }
   }
}

function getAnchorPosition(anchorname)
{
   var useWindow=false;
   var coordinates=new Object();
   var x=0,y=0;
   coordinates.x=AnchorPosition_getPageOffsetLeft(document.getElementById(anchorname));
   coordinates.y=AnchorPosition_getPageOffsetTop(document.getElementById(anchorname));
   return coordinates;
}

function AnchorPosition_getPageOffsetLeft(el)
{
   var ol=el.offsetLeft;
   while((el=el.offsetParent) != null)
   {
      ol += el.offsetLeft;
   }
   return ol;
}

function AnchorPosition_getWindowOffsetLeft(el)
{
   return AnchorPosition_getPageOffsetLeft(el)-document.body.scrollLeft;
}

function AnchorPosition_getPageOffsetTop(el)
{
   var ot=el.offsetTop;
   while((el=el.offsetParent) != null)
   {
      ot += el.offsetTop;
   }
   return ot;
}

function AnchorPosition_getWindowOffsetTop(el)
{
   return AnchorPosition_getPageOffsetTop(el)-document.body.scrollTop;
}

//********** end of positioning functions*******************************************************************
//**************************************************************************************************************



//**************************************************************************************************************
//********** FUNCTIONS USED BY THE FORM BELOW **************************************************************

var gTopNavTimer;
var prevDiv="";
function ShowExtraLinks(div, el)
{
    ResetDivNavTimer();

    var ParentPosition = new getAnchorWindowPosition(el);
    var divRef = document.getElementById(div);

    divRef.style.top = ParentPosition.y;
    divRef.style.left = ParentPosition.x;

    divRef.style.visibility = "visible";
    divRef.style.display = "block";

    if(prevDiv!="" && prevDiv!=div){HideExtraLinksTimeout(prevDiv)};
    prevDiv=div;
}

function HideExtraLinks(div)
{
    gTopNavTimer = window.setTimeout("HideExtraLinksTimeout('" + div + "')", 500);
}

function HideExtraLinksTimeout(div)
{
    document.getElementById(div).style.visibility = 'hidden';
    document.getElementById(div).style.display = 'none';
    prevDiv="";
}

function ResetDivNavTimer()
{
    window.clearTimeout(gTopNavTimer);
}

</script>


<style type="text/css">

.ExtraNavLinks1
{
      position: absolute;
      border-right: solid 1px #000;
      border-bottom: solid 1px #000;
      border-left: solid 1px #000;
      visibility: hidden;
      background-color: #676767;
      overflow:visible;
      padding: 5px 5px 5px 5px;
      width:auto!important;
}

.ExtraNavLinks1 a:link, a:visited, a:active
{
      color: #FFF;
      text-decoration: none;
}

.ExtraNavLinks1 a:hover
{
      color: #FFF;
      text-decoration: underline;
}
</style>


</head>
<body>
<form>

<div id="divExtraCusLinks1" class="ExtraNavLinks1" onMouseOver="ResetDivNavTimer();" onMouseOut="HideExtraLinks(this.id);">
    <table>
        <tr>
            <td>
                <a href="#">Add Customer</a><br />
                <a href="#">All Customers</a><br />
                <a href="#">Quote Customer</a><br />
                <a href="#">New Blank Quote</a><br />
                <a href="#">My Hotlist</a>
            </td>
        </tr>
    </table>
</div>
<div id="divExtraInvLinks2" class="ExtraNavLinks1" onMouseOver="ResetDivNavTimer();" onMouseOut="HideExtraLinks(this.id);">
    <table>
        <tr>
            <td>
                <a href="#">All Inventory</a><br />
                <a href="#">Add Inventory</a><br />
                <a href="#">Inventory History</a>
            </td>
        </tr>
    </table>
</div>

<table>
    <tr>
        <td>
            <a href="#" id="">HOME</a>
        </td>
        <td>
            <a href="#" id="TopNavCustomers" onMouseOver="ShowExtraLinks('divExtraCusLinks1', this.id);" onMouseOut="HideExtraLinks('divExtraCusLinks1');">CUSTOMERS</a>
        </td>
        <td>
            <a href="#" id="TopNavInventory" onMouseOver="ShowExtraLinks('divExtraInvLinks2', this.id);" onMouseOut="HideExtraLinks('divExtraInvLinks2');">INVENTORY</a>
        </td>
    </tr>
</table>

</form>
</body>
</html>
LVL 3
caseyrharrisAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
change
    divRef.style.top = ParentPosition.y;
    divRef.style.left = ParentPosition.x;

to
    divRef.style.top = ParentPosition.y+'px';
    divRef.style.left = ParentPosition.x+'px';
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
caseyrharrisAuthor Commented:
Doh! These details for doctype are killing me! That fixed it, thanks!
0
Michel PlungjanIT ExpertCommented:
the px is in my mind mandatory for FF - if you always add them you should be ok...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Languages and Standards

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.