Misaligned submenus in IE or Firefox

[kitlamoureux]

HI there.

At the 11th hour, my design team wants to center the website i am workiing on versus having it positioned fixed left.

http://www2.beta.hodes.com

Consequently, the menu, which had been working fine, is now giving me no end of trouble when displaying the submenus.

In order to achieve the fixed location based on a variable browser window, i used a "center" position with an offset equal to the width of the interface (760px) which puts it where it has to go. At extreme brower window sizes, this technique no longer works, and the menu shifts to the center. THis is the same for all browsers.

Also, the submenus are also appearing about 200 pixels off of the menu in IE but seem fine in Firefox and Netscape.

I am at a bit of a loss as to the best way to handle this issue.

THoughts?

While you are at it...notice the rollover highlight is enormous around some of the menu items which i would like spaced farther from the top and bottom menu items....how do i make the highlight go just around the word , but maintain the spacing.

THanks,

Kit

[Ruth]

Hi,

The link is to the old page with the old layout. Do you have the new one with the centered layout?

I can take the old one and try to center and work on it, but if I do the layout different than what you have, the solution won't work.

Thanks

Ruth

[kitlamoureux]

Hey Ruth,

Could it be a cache issue? THis is definitely the new layout.

[Ruth]

It doesn't seem to be a cache issue for me. I went in Netscape to test that and the page is aligned to the left with about an inch or so of grey at the right at my resolution of 800x600. Just like it was on the page from the other post.

Can you upload a test page with your new layout to a different area? say a directory called test or something?

Ruth

[kitlamoureux]

at 800x600 you probably arent seeing the effect... the page is 760 pixels wide. when i resize to 800x600 using the developer toolbar, the interface is aligned left for me as well. And the navigation seems to be working.

What is happening though, is if you expand the window beyond 800x600, the submenu drift is enhanced as the window gets larger... eventually, the menu shifts toward the middle as well, at extreme resolutions like 1920 x 1200.

So you are in fact seeing the right version, just need to expand your resolution, if possible.

Let me know if this is indeed the case.

Kit

[Ruth]

Hi,

I actually reset the resolution to 1024x768 and it still aligned left. But, that's OK because if you are getting it to center then that's all that's necessary.

I finally just put center tags around everything from just below the body tag to just before the closing body tag and that centered it in all the browsers and I figured out the problem.

Your width you have set for the different divs is 760 px. So when you set left="offset=-760"; it is moving it as far left as possible since your actual menu position is centered that puts is farther than the left half of the page.

I tried different numbers and it seems that left="offset=-324"; works.

Ruth

[kitlamoureux]

Hey RUth,

It is almost as it fwe are looking at two different sites!

When i try the smaller offset...it jsut means the menu shifts much earlier. I tried centering it with the center tags, and it doesnt work for me, since all the content then starts to center!

[Ruth]

Well, you said they wanted the site to be centered instead of left aligned, so I assumed you'd want the stuff to be in the center no matter what the resolution. And, just typing that I realized that you can't really do what you want using top;center and offsets because each resolution will change what the offsets actually have to be. So, I'll figure another way and post back. But, I have to use the center tags for what I do, since it is not centering on any browser I've tried, IE5.5, Netscape 7.1, FF 1.0.2 at resolution 1024x768

I'll get back to you.

Ruth

[Ruth]

Ok, this will keep the menu where it is right now no matter what the resolution. You'll have to make changes to the menu_data.js file also. By where it is, I mean it will stay no matter where that image goes, it goes with it.

Code: Select all

<script type="text/javascript" src="menu_data.js"></script>	
			<!--
			 Milonic DHTML Website Navigation Menu Version 5.0+
			 Copyright 2004 (c) Milonic Solutions Limited (UK). All Rights Reserved.
			 Please visit http://milonic.com/ for more information.
			-->	
<!-- Menu Section -->
<div id="menu"><table width=117 height=408 cellpadding=0 cellspacing=0 border=0>
<tr>
       <td><img src="menutop_home.gif" width="117" height="16" /><br /></td>
</tr>
<tr>
       <td><script>with(milonic=new menuname("Home")){
style=menuStyle;
menuwidth=117;
menuheight=392;
alwaysvisible=1;
followscroll=0;
orientation="vertical";
position="relative";
//aI("text=<IMG height=16 src='menutop_home1.gif' width=117>;type=header;headerbgcolor=transparent;padding=0px;");
aI("text=<label for=search><input type=text name=search id=search value=search size=7/></label><input type=submit value=go />;type=form;");
//aI("text=<form method=get action=search.asp><label for=search><input type=text name=search id=search value=search size=7/></label><input type=submit value=Go /></form>;type=form;");
aI("text=Contact Us;offclass=menumargintop;onclass=menumargintop;showmenu=ContactUs;url=/contactus/index.asp;fontweight=normal;");
aI("text=About Us;url=/aboutus/index.asp;showmenu=About Us;");
//aI("text=Core<br>Compentencies;url=/core/index.asp;");
aI("text=Core<br />Compentencies;url=/core/index.asp;showmenu=CoreComps");
aI("text=Case Studies;url=/casestudies/index.asp;showmenu=Case Studies;");
aI("text=Industries;url=/industries/index.asp;showmenu=Industries;");
aI("text=Specialty Services;url=/specservices/index.asp;showmenu=Specialty Services;");
aI("text=Publications;url=/publications/index.asp;showmenu=Publications;");
aI("text=Sitemap;offclass=menumarginbot;onclass=menumarginbot;fontweight=normal;");
aI("image=HodesGlobalNetwork.gif;url=/globalnetwork/index.asp;showmenu=GlobalNetwork");
}
drawMenus();
</script>
</td>
</tr>
</table></div>

In your menu_data.js file remove the Home menu totally.

Ruth

[kitlamoureux]

Awesome Ruth.

I implemented as you mentioned and the menu certainly does stay put as the brower size increases. However, in IE, i am still experiencing submenu shift, the wider the browser is. Could this be caused by something in my global CSS file? I tried commenting the div#menu CSS out completely and it still had the issue, but the menu was sittng at the bottom of the screen.

Seems like this should be so simple.

Thanks for all your efforts.

Kit

[kitlamoureux]

Hey Ruth,

you are a lifesaver...

after a few hours sleep, i realized that i hadnt put it at the top of the page after the BODY tag and there was a few path fixes i had to make to a bit of the code.

Seems to be working like a charm.

You are the best.

Sincerely,

Kit