Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:47

offset issues


Poster: ick
Dated: Wednesday December 6 2006 - 16:29:48 GMT

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:

<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:

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!


Poster: rjmjr9
Dated: Wednesday December 6 2006 - 18:17:25 GMT

EDIT remove double post


Poster: rjmjr9
Dated: Wednesday December 6 2006 - 18:17:59 GMT

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.


Poster: ick
Dated: Wednesday December 6 2006 - 18:32:37 GMT

rjmjr9 wrote:
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:

Image


Poster: Ruth
Dated: Wednesday December 6 2006 - 19:29:33 GMT

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:
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


Poster: Ruth
Dated: Wednesday December 6 2006 - 19:58:13 GMT

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


Poster: ick
Dated: Thursday December 7 2006 - 14:29:59 GMT

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.


Poster: Ruth
Dated: Thursday December 7 2006 - 18:24:58 GMT

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

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support