SmartMenus DHTML Menu / JavaScript Menu - Forums

awesomemenus · 2009-Jul-20 11:44:55

greetings,

ive got a probably very common issue going on. im using the example files from your relative div example (Relative Position (in a DIV) - Horizontal Left). when you attempt to highlight items in the menu list, it works fine until your mouse cursor goes down far enough to overlap the next div area under the menu div area, at which point the menu loses focus. in other words, items in the drop down menus become unselectable when the drop down menu items are overlapped(?) by a second div element below them.

its far easier to witness it in action as opposed to me attempting to explain it

an example of this can be seen here:

saving-health.com/new/index.php

thanks again for the menus. they rock

edit:

oddly enough, its not doing it in IE6 or Opera, but its definitely happening in firefox.

Last edited by awesomemenus (2009-Jul-20 15:33:23)

smartmenus · 2009-Jul-21 11:43:25

This seems to happen because of the "opacity" declaration you have applied to both the #menu and the #page DIVs. As far as I understand from the specs, Firefox and Safari/Chrome (Webkit) behave correctly here and display the contents of the #page DIV above the #menu DIV. And in order to fix the issue you should make both DIVs positioned elements (i.e. set them some specific "position" other than "static") and then use "z-index" to specify which should be displayed above the other.

Here is a quick example how to do it in your "style.css" CSS file:

Code:

#menu {
    ...
    opacity: 0.75;
    position:relative;
    z-index:2;
}

...

#page {
    ...
    filter:alpha(opacity=75);
    opacity: 0.75;
    position:relative;
    z-index:1;
}

Please note that you will just need to remove the "filter:alpha(opacity=75);" declaration for the #menu DIV because IE has a bug that will just cut off the parts of the sub menus that overflow the box of the #menu DIV if you keep it. As far as I know, there is just no way to workaround this bug in IE.

awesomemenus · 2009-Jul-21 21:24:18

thanks again for your help, sadly i dont know very much about css.

im not exactly sure why it would be doing this but, when i do that, the menu no longer works in IE6. in fact, none of the text at all from the menu div is selectable

why is the rendering engine for ie so picky?

smartmenus · 2009-Jul-22 02:57:24

As I mentioned, you should remove the "filter:alpha(opacity=75);" declaration for the #menu DIV, otherwise you would really have troubles with IE. There is just no other way to workaround this bug in IE..

awesomemenus · 2009-Jul-22 14:56:03

this is pretty bizarre. ive removed that opacity filter from the menu div but the text in that div still wasnt selectable. ive narrowed it down to one thing: im using supersleight (which allows png transparencies in IE6 to work correctly), but with that javascript enabled it breaks the menu text from being highlightable at all. if i remove the background image from that div, however, the text works fine.

im going to try to make that area a gif instead of a png and see if i can get away with it like that

thanks again for all your help again

smartmenus · 2009-Jul-23 13:04:01

No problem at all!

SmartMenus DHTML Menu / JavaScript Menu - Forums

#1 2009-Jul-20 11:44:55

menu div loses mouse focus when overlaying another div

#2 2009-Jul-21 11:43:25

Re: menu div loses mouse focus when overlaying another div

Code:

#3 2009-Jul-21 21:24:18

Re: menu div loses mouse focus when overlaying another div

#4 2009-Jul-22 02:57:24

Re: menu div loses mouse focus when overlaying another div

#5 2009-Jul-22 14:56:03

Re: menu div loses mouse focus when overlaying another div

#6 2009-Jul-23 13:04:01

Re: menu div loses mouse focus when overlaying another div

Board footer