offset issues

[ick]

I'm trying to troubleshoot Milonic on a test site to see if I want to use it...
I can't seem to get the submenus to line up, positioned in a centered div.

Here's my test code:

Code: Select all

<div style="margin-top: 50px; margin-left: auto; margin-right: auto; width: 900px; height: 150px; background: #000; ">
<div style="position: relative; top: 50px; left: 50px; width: 800px; height: 50px; background: #ff4500; ">

<script type="text/javascript" src="milonic_src.js"></script>	
<script type="text/javascript" src="mmenudom.js"></script>
<script type="text/javascript" src="menu_data.js"></script>	

</div></div>

And my menu_data.js:

Code: Select all

fixMozillaZIndex=false; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=0;
_menuOpenDelay=0;
_subOffsetTop=0;
_subOffsetLeft=0;



with(AllImagesStyle=new mm_style()){
styleid=1;
bordercolor="#000000";
borderstyle="solid";
fontstyle="normal";
fontweight="normal";
padding=0;
}

with(menuStyle=new mm_style()){
bordercolor="transparent";
borderstyle="none";
borderwidth=0;
headerbgcolor="transparent";
headercolor="transparent";
offbgcolor="transparent";
offcolor="transparent";
onbgcolor="#4e6b88";
oncolor="transparent";
outfilter="Fade(duration=0.0)";
overfilter="Fade(duration=0.0);Alpha(opacity=90)";
padding=0;
pagebgcolor="transparent";
pagecolor="transparent";
separatorcolor="transparent";
separatorsize=0;
subimage="/arrow.gif";
subimagepadding=0;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=AllImagesStyle;
aI("image=/images/insuranceplans.gif;overimage=/images/insuranceplans.gif;showmenu=menu1;url=#nogo;");
aI("image=/images/spacer_9px.gif;");
aI("image=/images/agenttools.gif;overimage=/images/agenttools.gif;showmenu=menu2;url=#nogo;");
aI("image=/images/spacer_9px.gif;");
aI("image=/images/benefitadmin.gif;overimage=/images/benefitadmin.gif;showmenu=menu3;url=#nogo;");
aI("image=/images/spacer_9px.gif;");
aI("image=/images/findproviders.gif;overimage=/images/findproviders.gif;showmenu=menu4;url=#nogo;");
aI("image=/images/spacer_9px.gif;");
aI("image=/images/companyinfo.gif;overimage=/images/companyinfo.gif;showmenu=menu5;url=#nogo;");
}

with(milonic=new menuname("menu1")){
style=menuStyle;
aI("image=/images/menus/m1_1_travelmedical.png;overimage=/images/menus/m1_1_travelmedical-over.png;url=#nogo;");
aI("image=/images/menus/m1_2_tripinsurance.png;overimage=/images/menus/m1_2_tripinsurance-over.png;url=#nogo;");
aI("image=/images/menus/m1_3_worldwidemedical.png;overimage=/images/menus/m1_3_worldwidemedical-over.png;url=#nogo;");
aI("image=/images/menus/m1_4_immigrantmedical.png;overimage=/images/menus/m1_4_immigrantmedical-over.png;url=#nogo;");
aI("image=/images/menus/m1_5_othertravelcoverage.png;overimage=/images/menus/m1_5_othertravelcoverage-over.png;url=#nogo;");
aI("image=/images/menus/m1_6_visitormedical.png;overimage=/images/menus/m1_6_visitormedical-over.png;url=#nogo;");
aI("image=/images/menus/m1_7_productforms.png;overimage=/images/menus/m1_7_productforms_over.png;url=#nogo;");
}

with(milonic=new menuname("menu2")){
style=menuStyle;
aI("image=/images/menus/m2_1_productforms.png;overimage=/images/menus/m2_1_productforms.png;url=#nogo;");
aI("image=/images/menus/m2_2_agentlogin.png;overimage=/images/menus/m2_2_agentlogin.png;url=#nogo;");
aI("image=/images/menus/m2_3_contractingforms.png;overimage=/images/menus/m2_3_contractingforms.png;url=#nogo;");
aI("image=/images/menus/m2_4_agentservices.png;overimage=/images/menus/m2_4_agentservices.png;url=#nogo;");
aI("image=/images/menus/m2_5_marketing.png;overimage=/images/menus/m2_5_marketing.png;url=#nogo;");
}

with(milonic=new menuname("menu3")){
style=menuStyle;
aI("image=/images/menus/m3_1_corporateaccounts.png;overimage=/images/menus/m3_1_corporateaccounts.png;url=#nogo;");
aI("image=/images/menus/m3_2_government.png;overimage=/images/menus/m3_2_government.png;url=#nogo;");
aI("image=/images/menus/m3_3_clientlogin.png;overimage=/images/menus/m3_3_clientlogin.png;url=#nogo;");
aI("image=/images/menus/m3_4_myplanlogin.png;overimage=/images/menus/m3_4_myplanlogin.png;url=#nogo;");
}

with(milonic=new menuname("menu4")){
style=menuStyle;
aI("image=/images/menus/m4_1_insuredproducts.png;overimage=/images/menus/m4_1_insuredproducts.png;url=#nogo;");
aI("image=/images/menus/m4_2_governmentprogs.png;overimage=/images/menus/m4_2_governmentprogs.png;url=#nogo;");
}

with(milonic=new menuname("menu5")){
style=menuStyle;
aI("image=/images/menus/m5_1_contact.png;overimage=/images/menus/m5_1_contact.png;url=#nogo;");
aI("image=/images/menus/m5_2_history.png;overimage=/images/menus/m5_2_history-over.png;url=/companyinfo/history/;");
aI("image=/images/menus/m5_3_employment.png;overimage=/images/menus/m5_3_employment.png;url=#nogo;");
aI("image=/images/menus/m5_4_security.png;overimage=/images/menus/m5_4_security.png;url=#nogo;");
aI("image=/images/menus/m5_5_recordofservice.png;overimage=/images/menus/m5_5_recordofservice.png;url=#nogo;");
}

drawMenus();

Anyone know how to remedy these menu issues?

Here's the page on the web for reference: http://sevencorners.bamads.com/test.php

Thanks!

[rjmjr9]

EDIT remove double post

[rjmjr9]

Try this - add the global buildAfterLoad=true; TO THE TOP of your menu data file. This will build the menus after the page has loaded and the div tags are created.

[ick]

Try this - add the global buildAfterLoad=true; TO THE TOP of your menu data file. This will build the menus after the page has loaded and the div tags are created.

That seems to have done the trick on IE and FF.
The only problem is that it now sets an odd offset on Safari. See screenshot below:

[Ruth]

Hi,

Some browsers have problems when the menu is in a div. I suggest you try the old method of placing it there and see if that works across the browsers.

Open your menu_data.js file, remove the buildAfterLoad you added, and remove the main menu. Paste the main into it's own file, add position='relative' to the menu, and a drawMenus(); at the end of the file, and save it [I called it embed_main.js] You will now have the menu_data.js file which has everything in it but the main menu and a separate file for the main.

On the page put the calls for the milonic program files and the menu_data file the FIRST thing after the body tag, and put the call for the embed_main into the div where you now have all the calls.

I'm not sure what you want as to menu position, but if you want it to center in the div you need to have your main menu coded as the following, even if you don't want it centered you do need the position='relative'; using this method.

Code: Select all

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=AllImagesStyle;
position='relative';
menuwidth='100%';
menualign='center';

If this does not resolve the issue please post back so that we may notify milonic about the Safari problem. Also, can you post which safari, the more information the better.

A couple of things to note, you have position='relative' in the style, that is not a style property, it is a menu property, like margin and needs to be in the menu definition area. Menuwidth='100%' widens the menu to the width of the div, but it is the menualign with that which centers, not the menu, but the menu items into the center of the 100% span.

Hope this helps. Let us know if the problem persists.

Ruth

[Ruth]

Hmm,

While checking on the menualign, it seems that some browsers, i.e. FF is the one I tested, don't seem to want to center the items when they are positioned relatively. However, if that is the layout you want, the way to do it is to create a 1 cell table with no width specified, place it into that div and the embed_main.js call in the table cell and then center the table, that seems to work across all the browsers I tested.

Ruth

[ick]

It seems like if it's in a div, with a height attribute, safari acts just like the other browsers, so it seems like that did the trick.

On it's own, it still pops the menus above the buttons though.

[Ruth]

Hi,

Divs are a problem, mainly because not all browsers treat them the same especially with regard to relative, absolute, fixed positions and the menu also uses divs, tables, spans etc.

Is it working OK now?

Ruth