The following code works wel in firefox but doesn't do the job flawlessly in IE. You can try it out here. In IE, try moving the mouse vertically over the menu, you'll see what i mean. Any clue why this is happening and what i can do about it?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function show(lyr) {
var browserType;
if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}
if (browserType == "gecko" ) {
document.poppedLayer = eval('document.getElementById(lyr)');
}
else if (browserType == "ie") {
document.poppedLayer = eval('document.all[lyr]');
}
else {
document.poppedLayer = eval('document.layers[lyr]');
}
if(document.poppedLayer.style.display == "none") {
document.poppedLayer.style.display='inline';
}
else {
document.poppedLayer.style.display='none';
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<div id="menu1" onmouseover="javascript:show('menu1_');" onmouseout="javascript:show('menu1_');" style="width:300px; background-color:#FFFFCC">
<div align="right">
<table width="100%" border="0" cellspacing="0">
<tr>
<td><div align="right" class="style1">Biography</div></td>
</tr>
<tr>
<td><div id="menu1_" style="display:none">Content for id "menu1_" Goes Here</div></td>
</tr>
</table>
</div>
</div>
<div id="menu2" onmouseover="javascript:show('menu2_');" onmouseout="javascript:show('menu2_');" style="width:300px; background-color:#FFFFCC">
<div align="right">
<table width="100%" border="0" cellspacing="0">
<tr>
<td><div align="right" class="style1">Bibliography</div></td>
</tr>
<tr>
<td><div id="menu2_" style="display:none">Content for id "menu2_" Goes Here</div></td>
</tr>
</table>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript">
function show(lyr) {
var browserType;
if (document.layers) {browserType = "nn4"}
if (document.all) {browserType = "ie"}
if (window.navigator.userAgent.toLowerCase().match("gecko")) {browserType= "gecko"}
if (browserType == "gecko" ) {
document.poppedLayer = eval('document.getElementById(lyr)');
}
else if (browserType == "ie") {
document.poppedLayer = eval('document.all[lyr]');
}
else {
document.poppedLayer = eval('document.layers[lyr]');
}
if(document.poppedLayer.style.display == "none") {
document.poppedLayer.style.display='inline';
}
else {
document.poppedLayer.style.display='none';
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<div id="menu1" onmouseover="javascript:show('menu1_');" onmouseout="javascript:show('menu1_');" style="width:300px; background-color:#FFFFCC">
<div align="right">
<table width="100%" border="0" cellspacing="0">
<tr>
<td><div align="right" class="style1">Biography</div></td>
</tr>
<tr>
<td><div id="menu1_" style="display:none">Content for id "menu1_" Goes Here</div></td>
</tr>
</table>
</div>
</div>
<div id="menu2" onmouseover="javascript:show('menu2_');" onmouseout="javascript:show('menu2_');" style="width:300px; background-color:#FFFFCC">
<div align="right">
<table width="100%" border="0" cellspacing="0">
<tr>
<td><div align="right" class="style1">Bibliography</div></td>
</tr>
<tr>
<td><div id="menu2_" style="display:none">Content for id "menu2_" Goes Here</div></td>
</tr>
</table>
</div>
</div>
</body>
</html>
