Please take a look at:
<!-- m --><a class="postlink" href="http://home.comcast.net/~delerious1/index4.html">http://home.comcast.net/~delerious1/index4.html</a><!-- m -->
It works correctly in Mozilla and Opera, but not IE. If you look at that page in IE, you will notice that the submenu disappears when you move the mouse from one link to another. This is because when you move the mouse off of a link, an onmouseout event is generated with relatedTarget/toElement=<DIV that contains the content>. In the HTML, the DIV that contains the content is not a child of the submenu DIV, so the submenu disappears.
Also notice that I have specified a height style for the submenu Anchors. If I remove the height style, then moving the mouse from one link to another does not generate an onmouseout event with relatedTarget/toElement=<DIV that contains the content>, and the problem does not occur. But my real page is not quite the same as that example page, and it is necessary that I specify the height style.
Does anyone know how to get around this IE problem?maybe something to do with the gap?The margin in your styles for the <a> tag are what's messing things up. IE seems to not count margins as part of the area that can generate on onmouseover or onmouseout event.
Just to be on the safe side, I'd nix the margins. I created a pop-out menu very similar to this in function, but quite different in design.
<!-- m --><a class="postlink" href="http://users.tm.net/gburghardt/home/">http://users.tm.net/gburghardt/home/</a><!-- m -->
Before the menu is hidden, I check a sentinal variable that gets set when on mouse out and on mouse over a wrapper DIV that contains all the links for a submenu.
Example: The mouse rolls over top of a level 1 link and makes the submenu appear. The mouse rolls out of the level 1 link and there is a brief delay in the script before it tries to hide the submenu.
The mouse moves over top of the wrapper div for the submenu. The onmouseover event for this wrapper div sets a sentinal variable to something like "onmenu". Meanwhile, the delay before hiding the submenu is up and the script double-checks the sentinal variable, which tells whether the mouse is over the submenu. If the sentinal variable is "onmenu," the script won't hide the submenu.
The mouse moves out from the submenu's wrapper DIV. The sentinal is set to something like "offmenu" and the submenu gets hidden without delay.
That's the basic algorithm I used for my sub menu. Feel free to view my source code, CSS and JavaScript included. Use it if you want. Lemme know if you do and I can help you adapt it to your page.I know this probably isn't that relevent but if you move the mouse quickly then it does go on to the next link...I gave your submenu DIV a background color, and low-and-behold, it works properly in IE. Funny. Just what we all need: Another screwy bug in Internet Explorer. See the attached TXT document.Interesting find, Greg! I just tried background-color: transparent, but that didn't work.
I'll mess around with this some more, but I may have to use a timer-based solution like the one you mentioned earlier. Thanks for the help.Hey I just found this microsoft article which seems to describe the same problem I am experiencing:
<!-- m --><a class="postlink" href="http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/Q262/5/59.asp&NoWebContent=1">http://support.microsoft.com/default.as ... bContent=1</a><!-- m -->
When I use that filter:alpha(opacity=0) style though, it makes the whole submenu invisible (although you can still click on the links)! Also, the filter style is not supported by Mozilla or Opera, so this does not seem like a solution for me. I guess I could try the transparent gif solution, but that seems like such a kludge!<style type="text/css">
<!--
#someelement {
-moz-opacity:0.5; #50% opacity
filter:alpha(opacity=50); #Also 50% opacity
}
-->
<!-- m --><a class="postlink" href="http://home.comcast.net/~delerious1/index4.html">http://home.comcast.net/~delerious1/index4.html</a><!-- m -->
It works correctly in Mozilla and Opera, but not IE. If you look at that page in IE, you will notice that the submenu disappears when you move the mouse from one link to another. This is because when you move the mouse off of a link, an onmouseout event is generated with relatedTarget/toElement=<DIV that contains the content>. In the HTML, the DIV that contains the content is not a child of the submenu DIV, so the submenu disappears.
Also notice that I have specified a height style for the submenu Anchors. If I remove the height style, then moving the mouse from one link to another does not generate an onmouseout event with relatedTarget/toElement=<DIV that contains the content>, and the problem does not occur. But my real page is not quite the same as that example page, and it is necessary that I specify the height style.
Does anyone know how to get around this IE problem?maybe something to do with the gap?The margin in your styles for the <a> tag are what's messing things up. IE seems to not count margins as part of the area that can generate on onmouseover or onmouseout event.
Just to be on the safe side, I'd nix the margins. I created a pop-out menu very similar to this in function, but quite different in design.
<!-- m --><a class="postlink" href="http://users.tm.net/gburghardt/home/">http://users.tm.net/gburghardt/home/</a><!-- m -->
Before the menu is hidden, I check a sentinal variable that gets set when on mouse out and on mouse over a wrapper DIV that contains all the links for a submenu.
Example: The mouse rolls over top of a level 1 link and makes the submenu appear. The mouse rolls out of the level 1 link and there is a brief delay in the script before it tries to hide the submenu.
The mouse moves over top of the wrapper div for the submenu. The onmouseover event for this wrapper div sets a sentinal variable to something like "onmenu". Meanwhile, the delay before hiding the submenu is up and the script double-checks the sentinal variable, which tells whether the mouse is over the submenu. If the sentinal variable is "onmenu," the script won't hide the submenu.
The mouse moves out from the submenu's wrapper DIV. The sentinal is set to something like "offmenu" and the submenu gets hidden without delay.
That's the basic algorithm I used for my sub menu. Feel free to view my source code, CSS and JavaScript included. Use it if you want. Lemme know if you do and I can help you adapt it to your page.I know this probably isn't that relevent but if you move the mouse quickly then it does go on to the next link...I gave your submenu DIV a background color, and low-and-behold, it works properly in IE. Funny. Just what we all need: Another screwy bug in Internet Explorer. See the attached TXT document.Interesting find, Greg! I just tried background-color: transparent, but that didn't work.
I'll mess around with this some more, but I may have to use a timer-based solution like the one you mentioned earlier. Thanks for the help.Hey I just found this microsoft article which seems to describe the same problem I am experiencing:<!-- m --><a class="postlink" href="http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/Q262/5/59.asp&NoWebContent=1">http://support.microsoft.com/default.as ... bContent=1</a><!-- m -->
When I use that filter:alpha(opacity=0) style though, it makes the whole submenu invisible (although you can still click on the links)! Also, the filter style is not supported by Mozilla or Opera, so this does not seem like a solution for me.
I guess I could try the transparent gif solution, but that seems like such a kludge!<style type="text/css"><!--
#someelement {
-moz-opacity:0.5; #50% opacity
filter:alpha(opacity=50); #Also 50% opacity
}
-->