Item width issue with vertical menus in tables (esp.Firefox)

[davidh]

Hi there,

I've run into a quirk with how vertical menu items set their width when the menu is in a table cell.

Basically, the TD containing the menu gets ends up being wider than the menu itself, because of the large contents of the TD above it. When that happens I'd like the menu to expand to fill the full width of the TD.

menuwidth="100%" handles making the menu the full width, but that doesn't make the items any bigger. The ways I've tried to make the items bigger all have flaws, at least in Firefox.

It's hard to explain so I made some examples.

http://www.divad.org/~davidh/menuprob/prob.html
http://www.divad.org/~davidh/menuprob/prob2.html
http://www.divad.org/~davidh/menuprob/prob3.html

So, by giving the items an extremely large itemwidth I can make it work in IE, but not in Firefox (well, at least I'm not willing to live with window resize creepage).

As always, any input would be appreciated.

[Ruth]

Using the vertical menu the itemwidth as a percentage will not expand when the menu is in a table. I don't know why it does that. There are some other things you can try, but not knowing your layout, colors etc, I dont' know how it would work with your design. You could use menuwidth="100%"; and then menualign="center";

Code: Select all

 <SCRIPT>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
position="relative";
menuwidth="100%";
menualign="center";
//itemwidth="300";
aI("text=Home;url=http://milonic.com/;status=Back To Home Page;itemwidth=100%;");
aI("text=Menu Samples;showmenu=Samples;itemwidth=100%;");
aI("text=Milonic;showmenu=Milonic;itemwidth=100%;");
}
drawMenus();</script>

This would put a border around the menu in the center of the table cell, but you could remove the border and instead define a border for the table cell instead. With this code the menu will shift center and seem to span the cell, but as you found out that's only filler, the menu itself will only be whatever size it renders and be in the center of that cell and the separators will be as wide as the widest item. In addition you could insert an align="center"; in the above code and then the text would center in each item instead of left align if you prefer that.

Those are just some ideas you might try to see if any work with your layout.

Ruth

[davidh]

Thanks for the ideas!

It turns out the menu needs to stick to the left margin, but the basic idea of hiding the fact that the items aren't stretching is a great one. I'll try that, probably by setting the containing TD's background to the regular menu background color, then fiddling with borders like you suggested. Definitely good enough for now.

Ideally, the itemwidth property would support 100%, but that won't be an issue for me for a few months.

Thanks again!
David

[Ruth]

Actually, it seems to only not support percentages in the table in the vertical menu. If it were a horizontal menu, you could set menuwidth=100% and then itemwidth= whatever the percentage would be for the number of items, i.e. 4 items, would use probably 24% leaving some space for padding and such and the items would then 'span' the 100% of the menu filling.

I don't know the layout, but does the menu have to be in the table? Can you use pop function instead of a regular menu, or perhaps the treemenu? Without seeing the layout, it's hard to make other suggestions.

Ruth

[smarte]

We are evaluating the Milonic navigator system at the moment and plan to make a purchase decision very soon. So far, the system has demonstrated great functionality and browser compatibility but we are puzzled by a problem that is a showstopper.

In essence, we are experiencing the same issue as outlined in this post when the itemwidth attribute is set to "100%" and the menu is located in a table cell inside of which it needs to span to 100% for both its menu items and the menu itself.

Currently only the menuwidth attribute can successfully span to 100% inside a cell, but not the itemwidth attribute. The suggestion made by the original poster to set the itemwidth attribute to a pixel number much higher than the cell's width not only causes the resizing problems in Firefox but does not even work if the main menu contains at least one sub-menu. If the latter is the case, then it force-stretches the whole cell to the number of pixels specified in the itemwidth attribute.

I would like to know if Milonic plans to resolve the itemwidth=100% problem anytime soon, and/or receive working suggestions on how this issue can be avoided in all browsers. This occurrence represents a fundamental flaw for relative vertical menus and would be of great importance to us if it is resolved sooner rather than later.

[smarte]

After about 2 hours of research and review of the Milonic code we found out what is causing this problem. It seems that there is a bug in the Milonic code in mmenudom.js

You must open this file and then perform a find operation in your text editor for

if(_M[17])_tWid=+_M[17]

Once you find it you must replace the string above with:

if(_M[17])_tWid=_M[17] //notice no plus (+) sign

Upon doing that your menuwidth property will start working as expected, i.e. it will force the all items within a menu to resize to 100% unless they are overridden by their own itemwidth property.

There is a side effect with the above fix and it only happens in FireFox and Netscape. The side effect happens only on resizing the browser: it make the width of the menu to keep growing every time a resize operation is performed. I believe that the original poster already reported the same problem. I believe that the resizing problem is inheritent in Mozilla's engine which both Netscape and Firefox use. Note that a resizing problem of different nature with menuwidth=100% when the menu is in a cell also exists on IE for Mac, but it is not as bad as the creeping menu width.

I hope someone else can report more information on this issue.

[Ruth]

if the main menu contains at least one sub-menu .... [and]latter is the case, then it force-stretches the whole cell to the number of pixels specified in the itemwidth attribute.

The fact that a table bound main menu has a submenu should not affect the width of the table cell at all. The only part of the menu that should be coded into the table cell is the main menu. It should either be in script tags or it can be called from its own separate file in that cell. The submenus are not coded in the cell with it. If the subs are called in a data file it should be immediately after the body tag [with the base Milonic files] If you are coding them on the page, they should be in script tags right after the body tag. They have to be built first before the main menu is built.

Ruth