PDA

View Full Version : DIV MouseOver Loses Focus When DIV Overlays Another DIV in Firefox/NN8

BradThor
06-09-2005, 10:54 PM
The following is an example of the problem Im having with some HTML. The problem seems to only appear in Firefox 1.01 and NN 8.0.

(I know this isnt the prettiest of code, but it does represent a problem I have)

If you notice in Firefox/NN, when you mouseOver the Menu item, the popup window loses focus when your pointer moves over the other Div (this also is the case if I use an IFRAME).

Ive tried absolute positioning the DIV and adding a Z-index and that solved nothing..

Does anyone have any pointers to help me out?


<html>
<head>
<title>Sample Page</title>
<script>
<!--
function GetMenu(mName, mState) {
var CurrMenu = document.getElementById (mName);
if (mState)
CurrMenu.style.visibility = "visible";
else
CurrMenu.style.visibility = "hidden";
}
-->
</script>
</head>

<body>

<table cellpadding="5">
<tr>
<td bgcolor="#999999"><a href="#" onMouseOut="GetMenu('menuPopUp',false);" onMouseOver="GetMenu('menuPopUp',true);">Mouse Over This</a></td>
<td>
<div style="overflow: auto; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000; padding: 5; height: 152px; width: 325px;">
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
</div>
</td>
</tr>

</table>

<div id="menuPopUp" style="visibility: hidden; position: absolute;top:85px;left:115px;" onMouseOut="GetMenu('menuPopUp',false);" onMouseOver="GetMenu('menuPopUp',true);">
<table bgcolor="#333333" bordercolor="#000000" border="1">
<tr><td><a href="" style="color:white;">My Groovy Popup</a></td></tr>
</table>
</div>

</body>
</html>
Boskic.com
06-10-2005, 09:41 PM
This is known problem with overflow. This is how it works in FF.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Sample Page</title>
<style type="text/css">
#content {
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
background-color: #CCCCCC;
border: 1px solid #000000;
padding: 5px;
height: 152px;
width: 325px;
}
#menuPopUp {
visibility: hidden;
position: fixed; /* position: absolute; for IE */
top: 85px;
left: 115px;
}
.popup {
background-color: #333333;
border: 1px solid #000000;
}
</style>
<script type="text/javascript">
<!--
function GetMenu (mName, mState) {
var CurrMenu = document.getElementById (mName);
if (mState)
CurrMenu.style.visibility = "visible";
else
CurrMenu.style.visibility = "hidden";
}
-->
</script>
</head>

<body>
<table cellpadding="5">
<tr>
<td bgcolor="#999999">
<a href="#" onMouseOut="GetMenu('menuPopUp',false);" onMouseOver="GetMenu('menuPopUp',true);">Mouse Over This</a>
</td>
<td>
<div id="content">
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
Content Goes Here<br>
</div>
</td>
</tr>
</table>
<div id="menuPopUp">
<table class="popup">
<tr>
<td>
<a href="#" onMouseOut="GetMenu('menuPopUp',false);" onMouseOver="GetMenu('menuPopUp',true);" style="color: white;">My Groovy Popup</a>
</td>
</tr>
</table>
</div>
</body>

</html>
if you use SSI try this hack
<!--[if IE]>
<style type="text/css">
/*<![CDATA[*/
#menuPopUp {
position: absolute!important;
}
/*]]>*/
</style>
<![endif]-->