Submenus Positioned by Bottom on Some Browsers

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:17

Submenus Positioned by Bottom on Some Browsers

Poster: jellis613
Dated: Monday August 25 2008 - 21:43:51 BST

I have something strange happening with a menu. Location is here: http://kochav-yaakov.com/en/

On most browsers (IE7, some installs of Firefox) it works fine. It is a vertical menu, positioned inside a <ul> tag, with submenus that are supposed to open up immediately to the right of the parent menu item However, on some installs of Firefox (I can't figure out what distinguishes them, though one interesting thing is that the FF install where this doesn't happen has FireBug as an extension, and when FireBug is activated, the bug is replicated), instead of the submenus opening up with their top item aligned with the calling item of the parent menu (as they are supposed to), all of the submenus open up with their bottom positions fixed in exactly the same point, somewhere around the middle of the parent menu. Thus, the tops of the submenus are higher up on the page (and in some cases hidden by a flash animation) depending on how many items there are in the submenu.

I have tried fooling around with position:relative, top and right fixed positions, fixMozillaZIndex=true, putting the entire menu in a table or no table. It always gives me the same result on these browsers - instead of submenu items opening up with the topmost item aligned with the parent menu item, they all open up with their bottom fixed in the same position for all submenus.

Any ideas what could be causing this and how to fix it?

Here is the pertinent code from menu_data.js:

Code:

_menuCloseDelay=300;
_menuOpenDelay=100;
_subOffsetTop=1;
_subOffsetLeft=1;

with(menuStyle=new mm_style()){
align="left";
bordercolor="#000080";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial, Verdana, Tahoma";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#FFFFFF";
offcolor="#000000";
onbgcolor="#E0E2FF";
oncolor="#000000";
onbold=1;
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Shadow(color=#777777', Direction=135, Strength=2)";
padding=5;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#000080";
separatorsize=1;
itemwidth="140px";
}

The submenus are all defined in a script block right after the opening <body> tag. The alwaysvisible menu is defined in the proper place in the html.

Thanks!

Re: Submenus Positioned by Bottom on Some Browsers

Poster: Ruth
Dated: Tuesday August 26 2008 - 2:21:20 BST

Hi,

I'm not sure I understand the problem. When I go to the site in IE, my resolution is 1024x768 so the bottom of the main menu is sort of at the bottom of the visible part of the page in the browser window. That means that any submenu that opens which is longer than the visible page, i.e. the bottom of the submenu would be below the bottom of the browser, then the built in collision detection will force the submenu to shift up so you can see it all.

You can try setting the ignoreCollisions to true and then set all the submenus to overflow='scroll' and see if that forces the submenus to open with their top at the top of the parent and make them a scroll menu if it is longer than the page. Let me know if this works

Ruth

Re: Submenus Positioned by Bottom on Some Browsers

Poster: jellis613
Dated: Tuesday August 26 2008 - 9:39:47 BST

Quote:

You can try setting the ignoreCollisions to true and then set all the submenus to overflow='scroll' and see if that forces the submenus to open with their top at the top of the parent and make them a scroll menu if it is longer than the page. Let me know if this works

Setting IgnoreCollisions=true worked. You were right, the problem was because the menus were being automatically bumped up on smaller monitors (which explains why it only happened on my larger monitor when I was using FireBug). This setting fixed it.

However, setting overflow=scroll for some reason reverted things back to the way that they had been before IgnoreCollisions was set to true. So I have not set this, and am fine with having the bottom of the submenu go beneath the bottom of the viewable area on some monitors.

Something strange has happened though, only since I set IgnoreCollisions=true. This is only happening on IE7, not on FF3. First, the subimage appears larger and more pixelated than in FF, as if it has been enlarged from the actual size. And then when mousing over the main (alwaysvisible) menu items (see http://kochav-yaakov.com/en/ for an example) that are associated with a submenu, the subimage gets noticeably larger. And if you continue to mouseover each of the main menu items with subimages, each time you go over one of them, the subimage gets larger and larger and larger. It is as if there is some function working now that multiplies the size of the subimage by 10% every time I do a mouseover. This was not happening before setting IgnoreCollisions=true. Any idea why this is happening now, and how to prevent it?

Thanks!

Re: Submenus Positioned by Bottom on Some Browsers

Poster: jellis613
Dated: Wednesday August 27 2008 - 17:23:21 BST

Any Ideas? This is triggered by the OnMouseOver event, on a menu that has a submenu and IgnoreCollisions = true, in IE7 only (a different page - http://kochav-yaakov.com/fr - where IgnoreCollisions=false does not display this bug). In addition to this, the image starts loads larger than it should. In FF, everything is normal.

Re: Submenus Positioned by Bottom on Some Browsers

Poster: Ruth
Dated: Wednesday August 27 2008 - 18:20:38 BST

Hi,

No I have no idea what the problem is. I will post it to Milonic. It is also happening on IE6.

I just wanted to say something about the 'I am fine with having the bottom of the submenu go beneath the bottom of the viewable area on some monitors' statement.

It's actually not the monitor but the resolution setting, but anyway, if the submenu goes below on some monitors, those people can NEVER get to any items that are going below. When they mouse off the menu to move their scroll bar the submenu will disappear so they will never get to see that unless they think to scroll the page up a bit to 'raise' the main menu up in order to show the bottom of the long sub

Ruth

Re: Submenus Positioned by Bottom on Some Browsers

Poster: jellis613
Dated: Wednesday August 27 2008 - 18:28:07 BST

Ruth wrote:

No I have no idea what the problem is. I will post it to Milonic. It is also happening on IE6.

Thanks

Ruth wrote:

It's actually not the monitor but the resolution setting, but anyway, if the submenu goes below on some monitors, those people can NEVER get to any items that are going below. When they mouse off the menu to move their scroll bar the submenu will disappear so they will never get to see that unless they think to scroll the page up a bit to 'raise' the main menu up in order to show the bottom of the long sub

The thing is, if the menu is raised up as it does by default, then the top items are hidden by the Flash animation. If there is a way that I can ensure that the menu is on top of the flash, then I can revert it to the default (as I would prefer to do).

Re: Submenus Positioned by Bottom on Some Browsers

Poster: Ruth
Dated: Wednesday August 27 2008 - 20:49:55 BST

Hi,

The menu should not be going behind the flash. I will check it out and see why it is doing that.

Ruth

Re: Submenus Positioned by Bottom on Some Browsers

Poster: Ruth
Dated: Thursday August 28 2008 - 15:24:28 BST

Hi,

You need to add two param to your flash object.

Code:

<param name="movie" value="/fr/wp-content/themes/mistylook-101/banner-25-years.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <embed src="/fr/wp-content/themes/mistylook-101/banner-25-years.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="790" height="225">

That should fix the problem. Note that the wmode param is opaque in the object code, but transparent in the embed code

Ruth