CodingForums.com - Mouse Over Text doesn't appear in Firefox

I put in a code, so that when you hover over a link, text appears at the bottom of the page. My code works fine in IE 8, but the text doesn't appear in Firefox. I ran Firebug, and it gave me a "detailsbox is not defined" error. I'm still trying to figure javascript out, and could really use your help!

Thanks
Code:
<script type="text/javascript">



  function menu (whichMenu,whatState){ 

  if (document.getElementById) 

  {document.getElementById(whichMenu).style.visibility = whatState;} 

 

  else {document[whichMenu].visibility = whatState;} 

 

  } 

  function details(what){ 

  myInfo={"Threat":"text.",

          "Compliance":"text.",

          "Virtualization":"text.",

          "Convergence":"text."} 

  detailsBox.innerHTML=myInfo[what] 

  } 



</script>



<LINK href="main.css" rel="stylesheet" type="text/css">



<style type="text/css">

<!--

a.black:link {color: #000000;}

a.black:active {color: #000000;}

a.black:visited {color: #000000;}

a.black:hover {color: #000000;}



a.red:link {color: #ff0000;}

a.red:active {color: #ff0000;}

a.red:visited {color: #ff0000;}

a.red:hover {color: #ff0000;}

-->

</style>



<script type="text/javascript">

function newPopup(url) {popupWindow = window.open(url,'popUpWindow','dependent=yes,height=570,width=750,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')}

</script>

<script type="text/javascript">

function newPopup2(url) {popupWindow = window.open(url,'popUpWindow','dependent=yes,height=570,width=750,left=10,top=10,resizable=no,scrollbars=no,toolbar=no,menubar=no,location=no,directories=no,status=no')}

</script>



</head>

<body bgcolor="#c1c2c2">

        

<table width="1065" cellpadding="0" cellspacing="0" border="0">

<tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065" height="24"></td></tr>



</table>

<table width="1065" bgcolor="white" cellpadding="0" cellspacing="0" border="0">

<tr><td><img src="images/White_Rectangle.jpg" width="17" height="55"></td><td colspan="5"><a href="index.html"><img src="images/Trend_Micro_Securing_Your_Web_World_Logo.gif" border="0"></a></td>

<td><img src="images/White_Rectangle.jpg" width="100" height="55"></td>

<td align="right"><font size="2" face="Interstate-Regular"><a href="JavaScript:newPopup('help.html');" style="text-decoration:none" class="red">Help</a></font>

<font size="2" face="Interstate-Regular" color="gray">&nbsp;&nbsp;|&nbsp;&nbsp;</font>

<font size="2" face="Interstate-Regular"><a href="JavaScript:newPopup2('quiz.html');" style="text-decoration:none" class="red">Feedback</a></font>

<br>

<br>

<font size="2" face="Interstate-Regular"><a href="http://www.trendmicro.com" style="text-decoration:none" class="black" target="blank">www.trendmicro.com</a></font>

</td>

<td><img src="images/White_Rectangle.jpg" width="25" height="55"></td>

</tr>

</table>



<table width="1065" cellpadding="0" cellspacing="0" border="0">

<tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065" height="18"></td></tr>

</table>



<table width="1065" cellpadding="0" cellspacing="0" border="0">

<tr><td><A HREF="products.html" onmouseover="document.but.src='images/Upsell_Reference_Gradient.jpg'"onmouseout="document.but.src='images/Upsell_Reference_Tab.jpg'"><IMG SRC="images/Upsell_Reference_Tab.jpg" NAME="but" width="178" height="38" BORDER="0"></A></td><td><A HREF="competitor_products.html" onmouseover="document.but2.src='images/Competitor_Products_Gradient.jpg'"onmouseout="document.but2.src='images/Competitor_Products_Tab.jpg'"><IMG SRC="images/Competitor_Products_Tab.jpg" NAME="but2" width="178" height="38" BORDER="0"></A></td><td><img src="images/Red_Bar.jpg" width="178" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td><td><img src="images/Red_Bar.jpg" width="177" height="38"></td></tr>

<tr><td colspan="6"><img src="images/White_Rectangle.jpg" width="1065"></td></tr>

</table>



        <table width="1024" cellpadding="0" cellspacing="0" border="0">

     <tr>

            <td  valign="top">

                   <table cellpadding="0" cellspacing="0" border="0" >

               <tr>

                         <td valign="top" bgcolor="#FFFFFF">

                          <div style="overflow:auto; width:300px; height:820px; background-color:#ebebe9; text-align:right; padding-right:1px;">

                    <div style="text-align:left;">

                               <a href="index.html"><img src="images/home_btn.jpg" border="0" /></a>

                    <div class="glossymenu" >

                        <a class="menuitem submenuheader" href="" ><div style="margin-top:4px;">Client/Server Suite</div></a>

                            <div class="submenu">

                                <ul>

                                <li><a onmouseover="details('Threat')" href="products_css_detail1.html" target="mainBody" class="menulink">Threat Landscape</a></li>

                                <li><a onmouseover="details('Compliance')" href="products_css_detail2.html" target="mainBody" class="menulink">Security Compliance</a></li>

                                <li><a onmouseover="details('Convergence')" href="products_css_detail4.html" target="mainBody" class="menulink">Convergence and Cost Reduction</a></li>

                                </ul>

                            </div>