5 replies [Last post]
Blastnsmash
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-08-30
Posts: 4
Points: 0

Hey, this seems to work fine in IE, Opera, but in firefox it is sticky. Something like "www.blizzard.com" menu. Notice how the menu is sticky in firefox.

Here is my code. Anyone can get this to work properly in Firefox?

<begin html>
--------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<style type="text/css">
body, html {
margin 0;
padding 0;
}
</style>
<script language="javascript">
function mouseover()
{

var nodeObj = document.getElementById('Table1');
nodeObj.style.display = 'inline';
nodeObj.style.fontStyle = 'normal';
nodeObj.style.color = 'red';


}

function mouseout()
{

var nodeObj = document.getElementById('Table1');
nodeObj.style.display = 'none';

}
function mouseover1()
{

var nodeObj = document.getElementById('Div1');
nodeObj.style.display = 'inline';
nodeObj.style.fontStyle = 'normal';
nodeObj.style.color = 'red';


}

function mouseout2()
{

var nodeObj = document.getElementById('Div1');
nodeObj.style.display = 'none';

}

</script>

<body>
<div id="Header" onmouseover="mouseover()" onmouseout="mouseout()" style="positionrelative; margin-top100px; height20px; width50px; border-stylesolid; margin-bottom0px; ">
File
<div id='Table1' style="margin-top0px; positionabsolute; height200px; width200px; border-stylesolid; background-colorwhite; top22px; left0px; displaynone;">
This is absolutely positioned relative to this containing divs position. Can follow format for more sub menus. Sticky in firefox. Works well in IE, Opera.
</div>

</body>
</html>

--------------------------------------------------------------------------------------
<End Html>

Tags:
thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 31 weeks 21 hours ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Absolute div menu. Cross Browser support. Any suggestions?

It's not a good idea to use tables for layout, or drop down menus.

Also, it;s not a good idea to use absolute positioning.

What you want is the Suckerfish Menu

Verschwindende wrote:
  • CSS doesn't make pies

Blastnsmash
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-08-30
Posts: 4
Points: 0

Thanks for the response. But...

>It's not a good idea to use tables for layout, or drop down menus.
>
>Also, it;s not a good idea to use absolute positioning.

>What you want is the Suckerfish Menu

Uh. Well for starters I'm not attempting to use tables. There are no tables. And, it is a good idea to use absolute positioning. Absolute positioned elements can stack on top of normal elements. And, your example even uses absolute positioned elements. How else is it going to float over the other elements?

Although, it is a fine example of a drop down menu, however, that wasn't my question. Really i'd like to solve why firefox isn't firing the mouseout event when perhaps it should. As always, maybe IE and Opera have it backwards. If anyone needs anymore info, please feel free to post.

Thank you for your reply. Lets continue the discussion!

Blastnsmash
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-08-30
Posts: 4
Points: 0

You know, I should clear up my html

Ok, you probably thought I was using tables because my div id is named table1. But in fact, it is a div and not a table. I apologize.
Here is some cleaner code

--------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<style type="text/css">
body, html {
margin 0;
padding 0;
}
</style>
<script language="javascript">
function mouseover()
{

var nodeObj = document.getElementById('HideThenShow');
nodeObj.style.display = 'inline';
nodeObj.style.fontStyle = 'normal';
nodeObj.style.color = 'red';


}

function mouseout()
{

var nodeObj = document.getElementById('HideThenShow');
nodeObj.style.display = 'none';

}


</script>

<body>
<div id="Header" onmouseover="mouseover()" onmouseout="mouseout()" style="positionrelative; margin-top100px; height20px; width50px; border-stylesolid; margin-bottom0px; ">
File
<div id='HideThenShow' style="margin-top0px; positionabsolute; height200px; width200px; border-stylesolid; background-colorwhite; top22px; left0px; displaynone;">
This is absolutely positioned relative to this containing divs position. Can follow format for more sub menus. Sticky in firefox. Works well in IE, Opera.
</div>

</body>
</html>
--------------------------------------------------------------------------------------

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 10 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Re: Thanks for the response. But...

Blastnsmash wrote:
Really i'd like to solve why firefox isn't firing the mouseout event when perhaps it should. As always, maybe IE and Opera have it backwards. If anyone needs anymore info, please feel free to post.

Thank you for your reply. Lets continue the discussion!

IE and DOM (FF) use slightly different event models. And the modern event models can be quite complex. However, I can't explain why FF isn't fireing the onmouseout event, the first time you leave #Header or its child, it does the second time or if the first time you leave #Header going upwards.

Try the code below to get a better understanding of what is going on. Apologies for its kludgy nature, its a mish mash of your page (which probably shouldn't work at all, <style> and <script> not in <head> or <body>, unclosed <div> Laughing out loud) and some of my stuff.

See it action here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<title>xhtml1-strict template</title>

<!--[if IE]>
  <style>
    body {behavior: url(/javascript/csshover.htc);}
    img {behavior: url(/javascript/pngbehavior.htc);}
  </style>
<![endif]-->

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

html {background: #999;}

body { 
    margin:20px auto; 
    padding:0; 
    width: 90%;
    background: white;
    font: 80% Verdana, Helvetica, Arial, sans-serif;
}

#Header {
  position:relative; 
  margin-top:100px; 
  height:20px; 
  width:50px; 
  border-style:solid; 
  margin-bottom:0px;
}

#HideThenShow {
  margin-top:0px; 
  position:absolute; 
  height:150px; 
  width:150px; 
  border-style:solid; 
  background-color:white; 
  top:22px; 
  left:0px; 
  display:none;
}

#tree {
  width: 200px;
  float: left; 
}

#event {
  margin: 5px 5px 5px 205px;
  font-size: 85%;
}

* html #event {height: 1px;}

dl {
  border-bottom: 1px solid #999;
}

dl:after {
  content: '.';
  visibility: hidden;
  clear: both;
  height: 0;
}

dt {
  margin: 0;
  padding: 0 0 0 1em;
  float: left;
  color: #090;
}

dd {
  margin: 0;
  padding: 0;
  float:left;
}

/*]]>*/-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--

function mouseover() {
  var nodeObj = document.getElementById('HideThenShow');
  nodeObj.style.display = 'inline';
  nodeObj.style.fontStyle = 'normal';
  nodeObj.style.color = 'red';
}

function mouseout() {
  var nodeObj = document.getElementById('HideThenShow');
  nodeObj.style.display = 'none';
}

/* add event recording stuff */
var counter = 0;

function getElementData(e) {
    return (e ? e.tagName + (e.id ? "#"+e.id : "") + (e.className ? "." + e.className : "") : "n/a")
}
    
function myHandler(evt, current) {
    var e, t, origin;
    evt = (evt) ? evt : ((window.event) ? window.event : null);
    
    if (evt) {
        e = document.getElementById('eventlist');
        if (e) {
            origin = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
            if (origin) origin = (origin.nodeType == 1 || origin.nodeType == 9) ? origin : origin.parentNode;
            
            if (!current) {
                current = (evt.currentTarget) ? evt.currentTarget : null;
                if (current) current = (current.nodeType == 1 || current.nodeType == 9) ? current : current.parentNode;
            }
        
            t = "<dl>";
            t += "<dt>#</dt><dd>"+(++counter)+"</dd>";
            t += "<dt>event:</dt><dd>"+evt.type+"</dd>";
            t += "<dt>mouse:</dt><dd>"+evt.clientX+","+evt.clientY+"</dd>";
            t += "<dt>current:</dt><dd>"+getElementData(current)+"</dd>";
            t += "<dt>source:</dt><dd>"+getElementData(origin)+"</dd>";
            t += "</dl>";
                        
            e.innerHTML = t+e.innerHTML;
        }
    }
}
    
function addHandlers(e) {

    // only add handlers to ELEMENT_NODEs
    if (e.nodeType == 1) {
        addEvent(e, 'click', myHandler, true);
        addEvent(e, 'mouseout', myHandler, true);
        addEvent(e, 'mouseover', myHandler, true);
    }
}

// walk all elements of DOM tree at and below e, 
// run function fn for each element    
function walkTree(e, fn) {

 //   return;  // function disabled, handlers placed directly on elements in the html
    
    fn(e);
    
    var eChild = e.firstChild
    while (eChild) {
        walkTree(eChild, fn);        
        eChild = eChild.nextSibling;
    }
}

/*
 * Crossbrowser addEvent
 * Courtesy of http://www.soziologie.uni-halle.de/unger/scripts/workshop_internet/fr_js_322.html
 */
 function addEvent(obj, eventType, afunction, isCapture) {
    // W3C DOM
    if (obj.addEventListener) {
       obj.addEventListener(eventType, afunction, isCapture);
       return true;
    }
    // Internet Explorer
    else if (obj.attachEvent) {
       return obj.attachEvent("on"+eventType, afunction);
    }
    else return false;
 }


//--><!]]>
</script>
</head>

<body onload="walkTree(document.getElementById('Header'), addHandlers)">

<div id="tree">
  <div id="Header" onmouseover="mouseover()" onmouseout="mouseout()" >
    File
    <div id='HideThenShow'>
      This is absolutely positioned relative to this containing divs position. 
      Can follow format for more sub menus. Sticky in firefox. Works well in IE, Opera.
    </div>
  </div>
</div>

<div id="event">
  <h2>Events List</h2>
  <div id='eventlist'>
  </div>
</div>

<br clear="all">

</body>
</html>

Blastnsmash
Offline
newbie
Last seen: 17 years 13 weeks ago
Joined: 2005-08-30
Posts: 4
Points: 0

Wow, nice post.

I apologize for the mesh of html. I should have been a little neater.
The event models are definitely complex, and there maybe no easy answer to this. Thank you for the debugging information. Definitely worth taking a look at.

I would love to solve this problem, however, it might not be doable. Bottom line maybe, they just have different event models and there isn't anything to compensate for it.

Thanks a lot for the valuable post.