IE Bug -> Sub Menu Overlapping Main Menu

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

IE Bug -> Sub Menu Overlapping Main Menu

Poster: digitalpacman
Dated: Friday March 28 2008 - 0:24:53 GMT

Hi,

I have a problem where the sub menu coordinates are not being calculated correctly. The end result is the sub menu overlays the main menu.

What I have found to cause this is if the HTML page the menu is embeded on contains some kind of css position:relative or position:absolute.
Also it has been found that padding or margins can cause this issue.

Here is a link to an example of this occuring: http://store.johnmccain.com/ProductDeta ... de=TSR3015

In IE7, load that link, mouse over the menu on the left where it says "Apparel".
Then click the REFRESH button and do not move your mouse.
Let the page load 100% (all images loaded).
Then mouse over the menu.

You will now notice the menu is overlapping.

My designers have been complaining head over heals about this and we are 2 steps away from dropping milonic completely for complete CSS menu styles of the web 2.0 world. They just won't listen to me and won't stop using positioning to make designs.

Thanks!

Re: IE Bug -> Sub Menu Overlapping Main Menu

Poster: digitalpacman
Dated: Friday March 28 2008 - 1:10:23 GMT

My outer menu is position="relative" and the inner ones are not set so they are absolute. This is how it normally works. Setting the submenus to relative screws all the positioning up (they dont get positioned at all no left or top)

My Styles:

Code:

_subOffsetLeft=-15
_menuCloseDelay=0
_menuOpenDelay=0
_followSpeed=0
_followRate=0
_subOffsetTop=3
_subOffsetLeft=-10
_scrollAmount=3
_scrollDelay=20

with(navStyle1=new mm_style()){
offclass="nav";
onclass="nav_hover";
pageclass="nav_hover nav_selected";
bordercolor="#D6D6D6";
borderstyle="solid";
borderwidth=0;
separatorcolor="#ffffff";
separatorsize="1";
padding="6px";
fontsize="11px";
fontstyle="normal";
fontweight="normal";
fontfamily="Arial";
image="/v/vspfiles/templates/101/images/Template/left_nav_bullet.png";
subimage="/v/vspfiles/templates/101/images/Template/left_nav_bullet_end.png";
subimagepadding="0";
subimageposition="middle";
menubgcolor="#3b3c3e";
}

with(subNavStyle1=new mm_style()){
offclass="nav_hover subnav_hover"
onclass="nav_hover subnav_hover"
pageclass="nav_hover subnav_hover nav_selected subnav_selected"
bordercolor="#cccccc";
borderstyle="solid";
borderwidth=1;
separatorcolor="#ffffff";
separatorsize="1";
padding="5px";
fontsize="11px";
fontstyle="normal";
fontweight="normal";
fontfamily="Arial";
image="/v/vspfiles/templates/101/images/Template/left_nav_bullet.png";
subimage="/v/vspfiles/templates/101/images/Template/left_nav_bullet_end.png";
subimagepadding="10";
subimageposition="middle";
menubgcolor="#3b3c3e";
}

My Data:

Code:

  navStyle1.image="/v/vspfiles/templates/101/images/Template/Menu1_Bullet.gif";
  navStyle1.subimage="/v/vspfiles/templates/101/images/Template/Menu1_Bullet_End.gif";
  with(milonic=new menuname("m_v1p0")) {
    style=navStyle1;
    itemwidth="172";
    alwaysvisible=1;
    orientation="vertical";    
    position="relative";


    aI("text=<font class=\"subnav\">Apparel</font>;url=SearchResults.asp?Cat=20;showmenu=m_v1p20;id=20;");
    aI("text=<font class=\"subnav\">Buttons</font>;url=SearchResults.asp?Cat=24;id=24;");
    aI("text=<font class=\"subnav\">Stickers</font>;url=SearchResults.asp?Cat=22;id=22;");
    aI("text=<font class=\"subnav\">Signs</font>;url=SearchResults.asp?Cat=21;id=21;");
    aI("text=<font class=\"subnav\">Accessories</font>;url=SearchResults.asp?Cat=23;showmenu=m_v1p23;id=23;");
    }
    subNavStyle1.image="/v/vspfiles/templates/101/images/Template/Menu1_Bullet.gif";
    subNavStyle1.subimage="/v/vspfiles/templates/101/images/Template/Menu1_Bullet_End.gif";
    with(milonic=new menuname("m_v1p20")) {      

      style=subNavStyle1;
      aI("text=<font class=\"subnav\">Outerwear</font>&nbsp;&nbsp;&nbsp;;url=SearchResults.asp?Cat=30;id=30;");
      aI("text=<font class=\"subnav\">T-Shirts</font>&nbsp;&nbsp;&nbsp;;url=SearchResults.asp?Cat=28;id=28;");
      aI("text=<font class=\"subnav\">Polo Shirts</font>&nbsp;&nbsp;&nbsp;;url=SearchResults.asp?Cat=29;id=29;");
      aI("text=<font class=\"subnav\">Hats</font>&nbsp;&nbsp;&nbsp;;url=SearchResults.asp?Cat=26;id=26;");
    }
    subNavStyle1.image="/v/vspfiles/templates/101/images/Template/Menu1_Bullet.gif";
    subNavStyle1.subimage="/v/vspfiles/templates/101/images/Template/Menu1_Bullet_End.gif";
    with(milonic=new menuname("m_v1p23")) {
      style=subNavStyle1;
      aI("text=<font class=\"subnav\">Coalitions Apparel</font>&nbsp;&nbsp;&nbsp;;url=SearchResults.asp?Cat=31;id=31;");
    }
  drawMenus();

Re: IE Bug -> Sub Menu Overlapping Main Menu

Poster: Ruth
Dated: Friday March 28 2008 - 3:34:51 GMT

Hi,

Is it supposed to just butt up to the main menu parent item?
I see in the posted code you have subOffsetLeft=-15; that means the submenu will open 15px more toward the left than the usual position. There's really not a lot I can do since you are using version 5.42 which is 3 1/2 years old. There have been many changes, upgrades, additional features, changes in how x,y,z function that I wouldn't know where to begin as to how to fix anything in that version. I can only suggest that you look at the offsets. I know the newer version will allow you to put all the menu files into a div, but in the older versions the only menu that is supposed to be in the div/table is the main menu.

This has explanations for both methods which can be used with the up to date versions, but it is only the second method that is used with the older versions http://support.milonic.com/beginners/ta ... /index.htm

Ruth

Re: IE Bug -> Sub Menu Overlapping Main Menu

Poster: digitalpacman
Dated: Friday March 28 2008 - 21:59:07 GMT

I tried the both methods and it did no work. Same results.

buildAfterLoad isnt supported in my version.

Old version? We updated to this version last year I figure that it would be fairly recent =(

I have a question about the new version, if you put in a feature request I asked for.

I want to be able to specify what the ID's are for all the menus created so that I can reference them.

As an example:

Quote:

aI("textApparel;url=something.asp?Cat=20;showmenu=m_v1p20;id=20;");

Does the newest new version support this? It helps SO MUCH! Your pageclass= thing doesn't work in an ecommerce environment because pages are generated constantly and the pages arn't always the same names.

So I'd like to just go, on an onload...

document.getElementById('tr20').className = 'selected';

Get it? Anyway... got any more suggestions?

Re: IE Bug -> Sub Menu Overlapping Main Menu

Poster: digitalpacman
Dated: Friday March 28 2008 - 22:10:04 GMT

Its obvious what its doing.... the main menus WIDTHS and HEIGHTS are 0 or not available when it calculates the positions.

The sub menus are perfectly left top aligned to the main menu item. So.. I dont know =(

I would upgrade if you guys have that feature I listed. Otherwise we arn't going to upgrade.

Re: IE Bug -> Sub Menu Overlapping Main Menu

Poster: Ruth
Dated: Friday March 28 2008 - 22:40:06 GMT

Hi,

When I downloaded the milonic files from the link you provided I get version 5.42 which was released August 2004. Also, if this is an IE7 only issue, I don't have that version and can't test for what's going on. The submenus look fine in NN7,9, FF2, IE6, Safari 3 Beta for pc, the left side of the subs is just a few pixels to the left of the end of the white lines in the main menu items.

As to your request, you would have to contact Milonic directly, if you updated last year, your support is probably still valid, but since I don't see that version I can't tell for sure. You have a professiona/above license and can try using the support system

http://www.milonic.com/support/

I don't know anything about menu IDs and such, I just volunteer on the forum because I like this menu and for most things [not involving a lot of advanced coding] I can usually figure out the problem and/or a solution by experimenting with the pages. I know there was an item property added a while back called id, I have no idea about it, something about developers adding their own IDs to menu items, but I don't think that is what you want since you want a menu ID. There are also methods and functions which allow you to do things about getting menus, setting positions and such, but again that is more advanced than any knowledge I have. I'm sorry I couldn't help. I'm sure with all the menu does, it can do what you want, I just don't have the know how to show you.

Ruth

Re: IE Bug -> Sub Menu Overlapping Main Menu

Poster: digitalpacman
Dated: Friday March 28 2008 - 23:22:51 GMT

Ok thank you I'll be sure to contact them to try to figure out how to get this fixed.

Thanks for the suggestion, even though it couldn't solve my problem.

Goodluck in your endeavors!