Menu alignment issues with version 5.21

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

Menu alignment issues with version 5.21

Poster: scargin
Dated: Saturday June 5 2004 - 11:39:48 BST

I have just updated a menu for a site I am building with version 5.21. The site uses a table bound horizontal menu. Previously it was using version 5.14 and the alignment was fine as soon I updated the milonic_src.js, mmenudom.js and mmenuns4.js files the alignment has shifted. The home link is positioned to left and all other links are crammed to the right of the cell. It was previously evenly spaced.

I am using the following settings in the cell:

style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
itemwidth="100%";

The site can be found at: http://www.stokes-aus.com.au. The DNS was recently redelegated and if you cannot locate it try http://www.stokesaus.com.au.

Everytime I upgrade to the newest version there seems to be different alignment issues.

Thanks in advance,

Stuart

Poster: Ruth
Dated: Saturday June 5 2004 - 15:23:39 BST

Code:

with(milonic=new menuname("Main Menu")){
style=menuStyle;alwaysvisible=1;
orientation="horizontal";
position="relative";
meuwidth="100%"
itemwidth="20%";

Will spread it out evenly. Tested in Netsacpe 6, 7, Opera 6, 7, Firebird .07, IE5.5. I don't know what happens in a mac. I'm not sure why you have the top left put in there since it's relative positioned. I would remove that. And, in order to fix a problem in Mac ie, you need to put the calls for the menu files immediately after the body tag before anything else on the page, instead of in the head. Check the table menu sample and the Mac trouble Faq. Ruth

Poster: John
Dated: Saturday June 5 2004 - 20:53:00 BST

Tip - always check http://milonic.com/menuvinfo.php for what's changed in the new releases. There have been a lot of positioning problems fixed recently, and some of the old workarounds are no longer working because the menu is now performing properly.

Poster: scargin
Dated: Sunday June 6 2004 - 5:37:40 BST

Thanks but the item width value appears to have little or no effect. All though it looks better, the gap between the "home" and "contact" links are far greater than the other links. I have made all of your suggested changes (although I am not sure where you are seeing the "top left" position).

To simplify changes to the file I have added it as a txt file include.

How do I get each item evenly spaced from each other? The middle three items are appear to be evenly spaced but the two outside items have different gaps.

I have checked in IE 6.028, IE 5.5, Opera 7.11 and Firefox 0.8 (Win 2K).

John, I do check for what has changed in the http://milonic.com/menuvinfo.php page and find it very valuable.

Unfortunately it is not always clear, what fixes have been made previously and how they need to be changed. As a result, updating the menu is a balancing act between greater compatiblity and trying to get it displaying correctly. For most people it is a "if it aint broke don't fix it" situation.

Thanks again for all your help,

Stuart Cargin

Poster: Ruth
Dated: Sunday June 6 2004 - 16:45:26 BST

You have the table set at 765, so if the items total say 715, which is about what they do, the left over amount would be 50, what you seem to want the menu to do is to spread 100%, make each item its width, then take the 50 divide by 5 items and put an extra 10px into each item. The menu can't do that. What it can do is put the excess pixels split between the right and left sides, 25px right after Contact, and 25px left before Home. So, you could put menuwidth="100%"; menualign="center"; do not specify itemwidth, then any excess will be split as noted. Also, you have a subimage and subimagepadding. That seems to be some kind of spacer, but it will only add that image and padding to those items with submenus, so it's adding extra to other than Home and Contact. There are some other options.

Code:

1. Using that same coding in the txt file you have for the main menu but remove the itemwidth="10%"; in your menuStyle in the menu_dataStokes.js file use rawcss="padding:3px 6px 3px 6px;"  you'd have to play with it to get the padding you want on the right and left of each item, I set it at 6px to test. 

Code:

2. You can set menuwidth=765; which is the width of that table, not set an itemwidth then measure each item with a screen ruler, figure the total of the items, subtract it from the 765, then divide the result by 5 items and add the final amount to each itemwidth which you would then specify in each item. To figure the item width you would need to add an item after Contact, put in separatorsize=1;separatorcolor=#ffffff; in each item string so you can see the actual item to put the screen ruler against.

I actually have the code because I had to see if that would work.

Code:

with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
menuwidth=765;
menualign="center";
aI("text=Home;url=default.asp;status=Back To Home Page;image=menu_sq.gif;itemwidth=73;");
aI("text=About&nbsp;Stokes&nbsp;(Australasia)&nbsp;Limited;showmenu=about;image=menu_sq.gif;itemwidth=266;");
aI("text=Corporate&nbsp;Information;showmenu=corporate;image=menu_sq.gif;itemwidth=182;");
aI("text=Stokes&nbsp;Websites;showmenu=websites;image=menu_sq.gif;itemwidth=147;");
aI("text=Contact&nbsp;&nbsp;;url=content/anmviewer.asp?a=11&z=2;status=Contact Us;image=menu_sq.gif;itemwidth=93;");
}
drawMenus();

So, hope that helps.

Ruth

Poster: scargin
Dated: Sunday June 13 2004 - 11:53:40 BST

Thanks Ruth I really appreciate all of your help.

Your suggestions worked perfectly and I have learnt a few things too.

Sorry about the late thank you, I thought I posted it last week.

Thanks again for all of your help,

Stuart Cargin

Industrial Strength JavaScript and DHTML Menus

Menu alignment issues with version 5.21