Submenus appear differently in IE7

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

Submenus appear differently in IE7

Poster: follicle
Dated: Thursday January 15 2009 - 20:47:45 GMT

Greetings.

I am currently evaluating a free sample of a Mionic menu for our website redesign currently in progress. You can visit the site here: http://www.frontierkemper.com/experiment/test%20page.html. Even though I'm working at a very high screen resolution (1920 x 1200), I've designed the website to fit a 1024 x 768 monitor.

I'm working in Dreamweaver CS3 on a Mac, and I'm previewing my pages in Safari and Firefox (Mac) and IE7 (from my Windows XP virtual machine). The menu looks great in all three of my browsers. I'm the only one in our company who uses a Mac, so I went to check the site on a few of my co-worker's PCs to make sure everything looked all right. Upon checking the website on two other PCs, I discovered that my co-workers' IE7 was having difficulty displaying the menu correctly. When ever they would rollover a link, all of the submenus would appear far off to the left (on top of our corporate logo). Both of my coworkers have their screen resolutions set at 1024 x 768. The website layout fit perfectly within the browser, yet the problem with the menu persisted. One of my coworkers then opened the website in both Windows Firefox and the new Google Chrome browser, and the menu displayed perfectly.

Any idea's what's going on here? I'd really like to invest in this menu system, but I'm worried it won't display probably on some PC's or browsers.

Any insights would be greatly appreciated. Thanks!

Re: Submenus appear differently in IE7

Poster: follicle
Dated: Thursday January 15 2009 - 21:04:36 GMT

Just an update. I just tried it on another employee's computer. Same thing in IE7. We pulled it up in Firefox, and now it's displaying it differently as well. The submenus are right on top of the primary menus, however, text from the submenus are colliding with the primary menu.

I'm so confused!

Re: Submenus appear differently in IE7

Poster: Ruth
Dated: Thursday January 15 2009 - 23:10:17 GMT

Hi,

I am going to assume you are trying to put the menu inside the table where you put the calls for it. If that is the case the problem is a result of not placing the menu in a table correctly. You can't just put the calls for the files there. So, if you want to use the new method try adding
buildAfterLoad=true; To the top of the data file right below the _subOffsetLeft=-2; and then in the main menu add position='relative'; up where you have the alwaysvisible, style etc. That should do it, but if there is still a problem you might have to use the old method. There are two ways to do it. For more information on putting the menu in a table, or div positioning it relatively see viewtopic.php?f=10&t=8777 You will find info on both methods in one of the links.

Ruth

Re: Submenus appear differently in IE7

Poster: follicle
Dated: Friday January 16 2009 - 15:26:10 GMT

Thanks for your response!

I followed both methods and I'm actually still having problems. I've checked the coding several times and everything is correct. I will report that after following the second method, things greatly improved in Firefox, but IE7 is still the same as it was. I guess my biggest concern is that close to all of our clients use PC, and by default, probably IE.

I wonder if I should attempt to add the navigation outside of a table. Maybe this would eliminate the problem? I'll give it a try and report back.

Thanks again for your reply.

Re: Submenus appear differently in IE7

Poster: follicle
Dated: Friday January 16 2009 - 16:11:06 GMT

All righty.

If you check the link now, you'll see that I've removed our corporate logo (for now) and have placed the navigation bar outside of the table. I reverted back to all of the original coding in the menu_data.js file (except for my customization settings). It runs flawlessly in Safari (Both PC & MAC) and Firefox (Both PC & MAC) yet I still can't perfect IE7! It doesn't work in my IE7, and I tried a few other PCs with IE7. Here's the tally: Three of the PCs displayed it incorrectly in IE7. Two displayed it correctly in IE7.

Now, here's a note of interest. The three PCs that displayed the menu incorrectly were set at a screen resolution of 1024 x 768 (the resolution I am designing the website for). The two PCs that displayed it correctly were set at a higher resolution since they were wide screen laptops.

Any additional thoughts? I'm really starting to think it has something to do with a combination of IE7 and what resolution the website is viewed in.

Thanks again.

Re: Submenus appear differently in IE7

Poster: Ruth
Dated: Friday January 16 2009 - 17:13:37 GMT

Hi,

I'll have to pass this on to someone with IE7, I only have 6 and it worked fine both now and when I put it in the table as you had it before.

Ruth

Re: Submenus appear differently in IE7

Poster: follicle
Dated: Friday January 16 2009 - 19:32:37 GMT

Thanks! I'd appreciate that.

Re: Submenus appear differently in IE7

Poster: follicle
Dated: Monday January 19 2009 - 15:18:01 GMT

Update!

I decided to go ahead and try to place the menu in an HTML file by itself, without my Iframe, background image, and logo. Works like a charm in IE7. So, the next step would be to rebuild the site I'm currently creating step by step and see what element it is that's interfering with its functioning in IE7.

I'll let you know what I find out.

Re: Submenus appear differently in IE7

Poster: Ruth
Dated: Monday January 19 2009 - 16:10:55 GMT

Thanks. I'd appreciate any info you can provide. The menu is designed to drop over iframes so that shouldn't have been an issue. If you really want your original layout, if you could put the page back up someplace, I'll get it and try setting something up so you can have it tested

Ruth

Re: Submenus appear differently in IE7

Poster: follicle
Dated: Monday January 19 2009 - 16:26:40 GMT

Whoops. I took a few images/link off of my original test page by accident. If you click on the link that I first posted, that will take you to the layout I am hoping to achieve.

Thanks.

Re: Submenus appear differently in IE7

Poster: follicle
Dated: Monday January 19 2009 - 17:35:59 GMT

All right! I think I got it working. Of course, I haven't linked any of the dropdowns to any pages yet, but the navigation now works smoothly in IE7 as well as the other browsers I've mentioned. You can see here: http://www.frontierkemper.com/navitest/navi.html. Thanks for your replies and suggestions!

Now, one more simple question and then I'm done. There is more than a generous amount of space between the main menu and the submenus. I would like to bring the submenus in closer to the main menu. I've played around with the code a bit, but I can't seem to achieve this. My guess is it has something to do with cell padding. See below for my current configurations:

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=4;
_subOffsetLeft=-2;

with(EasySampleStyle=new mm_style()){
styleid=3;
fontfamily="trebuchet MS";
fontsize="12pt";
fontstyle="normal";
fontweight="bold";
offcolor="#999999";
oncolor="#FFFFFF";
padding=8;
separatorcolor="white";
separatorsize=1;
separatorheight=20;
}

with(ScrollingSampStyle=new mm_style()){
topbordercolor="#ffffff";
topborderstyle="solid";
topborderwidth=1;
fontfamily="trebuchet MS";
fontsize="10pt";
fontstyle="bold";
fontweight="normal";
lineheight=25;
offcolor="#999999";
oncolor="#FFFFFF";
padding=8;
separatorcolor="white";
separatorsize=1;
separatorheight=15;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=EasySampleStyle;
aI("showmenu=about;text=About FKCI;");
aI("showmenu=services;text=Services;");
aI("showmenu=lakeshore;text=FKC-Lake Shore;");
aI("showmenu=projects;text=Projects;");
aI("showmenu=careers;text=Careers;");
aI("showmenu=contact;text=Contact Us;");
}

with(milonic=new menuname("about")){
orientation="horizontal";
style=ScrollingSampStyle;
top="offset=2";
aI("text=Safety;url=;target=;");
aI("text=History;url=;target=;");
aI("text=Organization;url=;target=;");
aI("text=Management;url=;target=;");
aI("text=News;url=;target=;");
}

with(milonic=new menuname("services")){
orientation="horizontal";
style=ScrollingSampStyle;
top="offset=2";
aI("text=Civil Construction;url=;target=;");
aI("text=Mine Development;url=;target=;");
aI("text=Drilling;url=;target=;");
aI("text=Technical Services;url=;target=;");
aI("text=Field Services;url=;target=;");
}

with(milonic=new menuname("lakeshore")){
orientation="horizontal";
style=ScrollingSampStyle;
top="offset=2";
aI("text=Hoisting Systems;url=;target=;");
aI("text=Vertical Belts;url=;target=;");
aI("text=Elevator Systems;url=;target=;");
aI("text=Breakman Cars;url=;target=;");
aI("text=Field Services;url=;target=;");
}

with(milonic=new menuname("projects")){
orientation="horizontal";
style=ScrollingSampStyle;
top="offset=2";
aI("text=Civil Projects;url=;target=;");
aI("text=Mining Projects;url=;target=;");
aI("text=FKC-Lake Shore Projects;url=;target=;");
aI("text=Bid Specs;url=;target=;");
}

with(milonic=new menuname("careers")){
orientation="horizontal";
style=ScrollingSampStyle;
top="offset=2";
aI("text=Job Openings;url=;target=;");
aI("text=Download Application;url=;target=;");
aI("text=Submit Resume;url=;target=;");
}

with(milonic=new menuname("contact")){
orientation="horizontal";
style=ScrollingSampStyle;
top="offset=2";
aI("text=Contact Information;url=;target=;");
}

drawMenus();

Again, thanks for all the help. It is greatly appreciated.

Re: Submenus appear differently in IE7

Poster: Andy
Dated: Tuesday January 20 2009 - 11:03:47 GMT

Hi,

Your sub menus have a top offset of 2, try changing this to something like 12 like this:

Code:

top="offset=-12";

-- Andy

Re: Submenus appear differently in IE7

Poster: follicle
Dated: Tuesday January 20 2009 - 22:14:03 GMT

Thanks! That worked perfectly. We'll be purchasing a license here soon. Again, thanks for all the help. The support is awesome.