Sub menu positioning in IE7 and chrome

[sskiruba]

Dear Support,
I tried to keep the submenu with the my main menu but I do not have any clue why is not coming just below the main menu in IE 7 but I can see that its working fine in Firefox.
I have attached the screen shot in both the browsers. and I am sending how the source of the page is looked like, please let me know where I am being wrong;

Code: Select all

<table style ="position:relative;top:30px;left: 54px; width:825px; border: none " >
                           <tr valign ="top" >
                           <td colspan ="3">
                             
                                
<script language="javascript" type ="text/javascript" >
<!--
fixMozillaZIndex=true
_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=150            // The time delay before menus open on mouse over
_followSpeed=5                // Follow scrolling speed
_followRate=40                // Follow scrolling Rate
_scrollAmount=3               // Only needed for Netscape 4.x
_scrollDelay=20               // Only needed for Netcsape 4.x
_subOffsetTop=10              // Sub menu top offset
_subOffsetLeft=-10            // Sub menu left offset
buildAfterLoad=true


with(menuStyle=new mm_style()){
onbgcolor="transparent";//#d1d1d1
oncolor="#F28000";//#FF0000
offbgcolor="transparent";//#E6E6E6
offcolor="#ffffff";
bordercolor="";//#99ccff
borderstyle="solid";
borderwidth="0";
separatorcolor="#99ccff";//#99ccff
separatorsize="0";
padding="1";
fontsize="18px";
fontstyle="normal";//normal
//fontweight ="Bold";
fontfamily="Spumoni LP";//Verdana, Tahoma, Arial
pagecolor="";//#333333 #171796
pagebgcolor="";//CCCCCC #171796
headercolor="";//#171796"
headerbgcolor="#ffffff";//#ffffff
subimage="";
subimagepadding="1";
overfilter="Fade(duration=0.2);Alpha(opacity=100);Shadow(Direction=100, Strength=0)";//#777777 color='#d1d1d1', 
outfilter="randomdissolve(duration=0.3)";
}

with(menuStyle1=new mm_style()){
onbgcolor="#171796";//#d1d1d1
oncolor="#F28000";//#FF0000
offbgcolor="#171796";//#E6E6E6
offcolor="#ffffff";
bordercolor="#F28000";//#99ccff
borderstyle="solid";
borderwidth="1";
separatorcolor="#F28000";
separatorsize="1";
padding="1";
fontsize="16px";
fontstyle="normal";//normal
//fontweight ="Bold";
fontfamily="Spumoni LP";//Verdana, Tahoma, Arial
pagecolor="";//#333333 #171796
pagebgcolor="";//CCCCCC #171796
headercolor="";//#171796"
headerbgcolor="";//#ffffff
subimage="";
subimagepadding="1";
overfilter="Fade(duration=0.2);Alpha(opacity=100);Shadow(Direction=100, Strength=0)";//#777777 color='#d1d1d1',
outfilter="randomdissolve(duration=0.3)";
}

with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
menuwidth=850;
menualign="center";
position="relative";
aI("text=Concept<img src=images/space.gif border=0 width=25 height=10>;url=menuContentDisplay.aspx?Menu_ID=1&set=one&ExpandItem=32&Item_ID=32;showmenu=Menu32;status=;");
aI("text=Collectie<img src=images/space.gif border=0 width=25 height=10>;url=menuContentDisplay.aspx?Menu_ID=1&set=one&ExpandItem=33&Item_ID=33;showmenu=Menu33;status=;");
aI("text=Acties<img src=images/space.gif border=0 width=25 height=10>;url=menuContentDisplay.aspx?Menu_ID=1&set=one&ExpandItem=34&Item_ID=34;status=;");
aI("text=Vestigingen<img src=images/space.gif border=0 width=25 height=10>;url=StorelocatorNL.aspx?Item_ID=35&ExpandItem=35&Menu_ID=1&set=one;status=;");
aI("text=VIPP-Fan club<img src=images/space.gif border=0 width=25 height=10>;url=menuContentDisplay.aspx?Menu_ID=1&set=one&ExpandItem=36&Item_ID=36;showmenu=Menu36;status=;");
aI("text=Spelletjeskamer<img src=images/space.gif border=0 width=25 height=10>;url=menuContentDisplay.aspx?Menu_ID=1&set=one&ExpandItem=37&Item_ID=37;showmenu=Menu37;status=;");
aI("text=Partners<img src=images/space.gif border=0 width=25 height=10>;url=menuContentDisplay.aspx?Menu_ID=1&set=one&ExpandItem=38&Item_ID=38;showmenu=Menu38;status=;");
aI("text=Vacatures<img src=images/space.gif border=0 width=25 height=10>;url=JobListingsNL.aspx?Item_ID=39&ExpandItem=39&Menu_ID=1&set=one;showmenu=Menu39;status=;");
aI("text=Nieuws<img src=images/space.gif border=0 width=25 height=10>;url=NewsListingNL.aspx?Item_ID=40&ExpandItem=40&Menu_ID=1&set=one;showmenu=Menu40;status=;");

}
with(milonic=new menuname("Menu32")){
style=menuStyle1;
overflow="scroll";
//put the menus here
aI("text=Rebble Pebble kamer   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=32&Item_ID=28;status=;");
aI("text=Artoni meisjes kamer   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=32&Item_ID=29;status=;");
aI("text=Artoni jongens kamer   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=32&Item_ID=30;status=;");
aI("text=Hot Gossip kamer   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=32&Item_ID=31;status=;");
aI("text=Square Deal kamer   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=32&Item_ID=32;status=;");

}
with(milonic=new menuname("Menu33")){
style=menuStyle1;
overflow="scroll";
//put the menus here
aI("text=Baby maat 50-86+   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=33&Item_ID=33;status=;");
aI("text=Meisjes maat 92-140   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=33&Item_ID=34;status=;");
aI("text=Jongens maat 92-140   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=33&Item_ID=35;status=;");
aI("text=Girls maat 128-164   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=33&Item_ID=36;status=;");
aI("text=Boys maat 128-164   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=33&Item_ID=37;status=;");

}
with(milonic=new menuname("Menu36")){
style=menuStyle1;
overflow="scroll";
//put the menus here
aI("text=Aanmelden   ;url=FanClubNL.aspx;target=_blank;status=;");

}
with(milonic=new menuname("Menu37")){
style=menuStyle1;
overflow="scroll";
//put the menus here
aI("text=Kleurplaten   ;url=GamesListing.aspx?Cat_ID=19&set=one&Item_ID=39&ExpandItem=37&Menu_ID=2;status=;");
aI("text=Spelletjes   ;url=GamesListing.aspx?Cat_ID=20&set=one&Item_ID=40&ExpandItem=37&Menu_ID=2;status=;");
aI("text=Puzzels   ;url=GamesListing.aspx?Cat_ID=21&set=one&Item_ID=41&ExpandItem=37&Menu_ID=2;status=;");

}
with(milonic=new menuname("Menu38")){
style=menuStyle1;
overflow="scroll";
//put the menus here
aI("text=Franchisers   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=38&Item_ID=43;status=;");
aI("text=Wholesale   ;url=SecondmenuDisplay.aspx?set=one&Menu_ID=2&ExpandItem=38&Item_ID=46;status=;");
aI("text=Contact    ;url=ContactFormNL.aspx?set=one&Item_ID=47&ExpandItem=38&Menu_ID=2;status=;");

}
with(milonic=new menuname("Menu39")){
style=menuStyle1;
overflow="scroll";
//put the menus here
aI("text=Service kantoor Nederland   ;url=JobListingsNL.aspx?set=one&Item_ID=48&ExpandItem=39&Menu_ID=2;status=;");
aI("text=Vestigingen   ;url=JobListingsNL.aspx?Cat_ID=26&set=one&Item_ID=49&ExpandItem=39&Menu_ID=2;status=;");
aI("text=Open Sollicitatie   ;url=JobApplicationNL.aspx;target=_blank;status=;");

}



drawMenus();
-->
</script> 

I have gone through the documentation to in the Table and the support questions and answer regarding the positioning . But still have not got through the problem I'm having.
Looking for your quick reply.

Kirubaa

[Ruth]

Hi,

Do you have a link to your page? If not, I really need all the page info, all the html, any css files etc. so I can make up a page and test it. The code you posted is not the full information that we need in order to make a test page.

Ruth

[johnwatson]

I too am having problems with the menu positioning in Chrome and Firefox. See http://www.chrysaliscarefostering.org/site/. You can view the source to see the data. I have recently downloaded the code.

Thanks

John

[Ruth]

Hi,

The problem is two fold. 1st, you do not have the menu relatively positioned as it should be, 2nd the css #page code with the auto margins is causing the offset problem in FF and Chrome. Now, you can fix it in one of either two ways. The first is the best

Create a data file with the following in it, this is all your style and your sub menu information but NOT the main menu data, you'll see it also has a draw menus at the end of it. Save this file as subs_data.js. You can actually name it whatever you want

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps

_menuCloseDelay=500;
_menuOpenDelay=0;
_subOffsetTop=0;
_subOffsetLeft=0;

with(menuStyle=new mm_style()){
bordercolor="#A1CADC";
borderstyle="borderborrom: 1px dashed #A1CADC";
borderwidth=0;
fontfamily="Arial";
fontsize="12px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#ffffff";
offcolor="";
onbgcolor="#ffffff";
oncolor="";
outfilter=""; //randomdissolve(duration=0.3)
overfilter=""; //Fade(duration=0.2);Alpha(opacity=100);Shadow(color=#777777', Direction=135, Strength=5)
padding=5;
pagebgcolor="white";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=0;
subimage="http://img.milonic.com/arrow.gif";
subimagepadding=2;
}

with(menuStyle2=new mm_style()){
bordercolor="#A1CADC";
borderstyle="solid";
borderwidth=1;
fontfamily="Arial";
fontsize="12px";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#ffffff";
offcolor="";
onbgcolor="#ffffff";
oncolor="";
outfilter=""; //randomdissolve(duration=0.3)
overfilter=""; //Fade(duration=0.2);Alpha(opacity=100);Shadow(color=#777777', Direction=135, Strength=5)
padding=5;
pagebgcolor="white";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=0;
subimage="http://img.milonic.com/arrow.gif";
subimagepadding=2;
}
with(milonic=new menuname("Foster Carer (unrestricted)")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Training Calendar;url=trainingcalendar.asp");
aI("text=Induction through to CPD;url=inductionthroughtocpd.asp;showmenu=Induction through to CPD");
aI("text=Anti Discrimatory Practice;url=antidiscrimatorypractice.asp");
aI("text=NVQ and Partnerships;url=nvqandpartnerships.asp");
aI("text=Foster carer achievements;url=fostercarerachievements.asp");
aI("text=What you can expect from us;url=whatyoucanexpectfromus.asp;showmenu=What you can expect from us");
aI("text=Login;url=fostercarer(restricted).asp;showmenu=Foster Carer (Restricted)");
}

with(milonic=new menuname("Support Groups")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Frequency;url=frequency.asp");
}

with(milonic=new menuname("Services offered")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Therapeutic Services;url=therapeutic-services.asp");
aI("text=Preparation for Independent Living;url=preparation-for-individual-living.asp");
aI("text=Individual Support;url=individual-support.asp");
aI("text=Support Groups;url=support-groups.asp;showmenu=Support Groups");
aI("text=Resources;url=resources-for-children-and-young-people.asp");
}

with(milonic=new menuname("Foster carer profiles")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
}

with(milonic=new menuname("About us")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=What we do;url=whatwedo.asp");
aI("text=Who we are;url=whoweare.asp");
aI("text=Our history;url=ourhistory.asp");
aI("text=Our Vision;url=ourvision.asp");
aI("text=Inspection reports;url=inspectionreports.asp");
}

with(milonic=new menuname("Interested in Fostering")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Being a foster carer;url=beingafostercarer.asp");
aI("text=Why Chrysalis Care;url=whychrysaliscare.asp");
aI("text=What our foster carers say?;url=whatourfostercarerssay.asp;showmenu=What our foster carers say?");
aI("text=Application Form;url=applicationformpage1.asp;target=_el");
}

with(milonic=new menuname("Induction through to CPD")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Training;url=preapproval.asp");
aI("text=Induction;url=postapproval.asp");
aI("text=Approved carers;url=approvedcarers.asp");
aI("text=Career Development;url=careerdevelopment.asp");
aI("text=Staff;url=staff.asp;showmenu=Staff");
aI("text=Investing in People;url=investinginpeople.asp");
}

with(milonic=new menuname("Who are you")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Foster Carer;url=fostercarer(unrestricted).asp;showmenu=Foster Carer (unrestricted)");
aI("text=Interested in Fostering?;url=interestedinfostering.asp;showmenu=Interested in Fostering");
aI("text=Local Authority;url=localauthority(restricted).asp;showmenu=Local Authority (restricted)");
aI("text=Under 18's;url=under18s.asp;showmenu=Under 18s");
}

with(milonic=new menuname("What our foster carers say?")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=The assessment;url=theassessment.asp");
aI("text=How fostering feels;url=howfosteringfeels.asp");
aI("text=What a foster carer does;url=whatafostercarerdoes.asp");
aI("text=The best moments;url=thebestmoments.asp");
aI("text=The worst moments;url=theworstmoments.asp");
aI("text=How is it different?;url=howisitdifferentfromlookingafteryourownchildren.asp");
aI("text=What makes a good carer;url=whatmakesagoodcarer.asp");
}

with(milonic=new menuname("Local Authority (restricted)")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Current Vacancy list;url=currentvacancylist.asp");
aI("text=Foster carer profiles;url=profileoffostercarers.asp;showmenu=Foster carer profiles");
aI("text=Costing;url=costing.asp");
aI("text=Referral Form;url=referral-form.asp");
aI("text=Children's Services Department;url=childrensservices.asp");
aI("text=Kidzone example;url=kidzoneexample.asp");
}

with(milonic=new menuname("Support Groups")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Foster Children;url=foster-children.asp");
aI("text=Young Carers;url=young-carers.asp");
}

with(milonic=new menuname("Childrens services")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Services Offered;url=servicesoffered.asp;showmenu=Services offered");
aI("text=Achievements;url=achievements.asp");
}

with(milonic=new menuname("Under 18s")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Guides and leaflets;url=downloadguidesandleaflets.asp");
aI("text=Links;url=supportsites.asp");
}

with(milonic=new menuname("Staff")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Staff;url=staff-introduction.asp");
}

with(milonic=new menuname("What you can expect from us")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Support Group Dates;url=supportgroupdates.asp;showmenu=Support Groups");
}

with(milonic=new menuname("Foster Carer (Restricted)")){
style=menuStyle2;
borderwidth=1;
itemwidth=150;
aI("text=Publications List;url=publicationslist.asp");
aI("text=Relevant links;url=relevantlinks.asp");
aI("text=Online Training;url=online-training.asp");
}
drawMenus();

Next, either add position='relative'; to the main menu on the page and leave it as it is without the styles and subs data there, or create a file with the main menu coded as below, you'll see it has position='relative' and a draw menus at the end of it, also. Save this as main_data.js [or whatever you want to call it]

Code: Select all

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
overflow="scroll";
itemwidth=150;
style=menuStyle;
position='relative';
aI("text=About us;url=aboutus.asp;target=;showmenu=About us");
aI("text=Who are you?;url=whoareyou.asp;target=;showmenu=Who are you");
aI("text=Children's Services;url=childrensservices.asp;target=;showmenu=Childrens services");
}

drawMenus();

Finally, call the milonic_src.js, mmenudom.js, and subs_data.js file immediately after the body tag and call the main_data.js file in the

Code: Select all

<DIV id=navpos>

That is the original method for positioning a menu relatively in a table or div. This fixes the issue with the offset of the submenu.

The second method is what Andy at Milonic calls a 'dirty' fix, so there is no guarantee that it will work in every single browser out there without problems.

Put all the data, style, main and subs into one file, use position='relative' in the main menu and add buildAfterLoad=true; at the top of the data file right below the subOffset area. Save the file as whatever you want, i.e. menu_data.js then call all the files, milonic_src.js, mmenudom.js and menu_data.js in that div id=navpos.

Both of these fix the issue you are having with FF and Chrome. Also, leaving it as it is and adding the buildAfterLoad=true; up at the top section by the subOffset works. I don't know why you have all those variables in there, but I removed them and added the buildAfterLoad=true; on the page and it worked fine in FF and Chrome. So, the top would be

Code: Select all

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps

_menuCloseDelay=500;
_menuOpenDelay=0;
_subOffsetTop=0;
_subOffsetLeft=0;
buildAfterLoad=true;

Hope this helps. Note that the best option is the first, which is the regular method for setting a menu relatively positioned, but all three seem to work.

Ruth

[johnwatson]

Thanks Ruth that has fixed it!