Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:09
My turn to ask for help: Menu alignment in Firefox
Poster: vikenk
Dated: Saturday April 1 2006 - 22:35:07 BST
Hello,
I'm designing a site for a friend. I want to use the menu in the site. I have the menu implemented the way I want in a table, but Firefox is not rendering the menu as I want. However, my settings seem as if they should work.
The menu is in a table, which is in a fixed-width div. I *can* get the menu to work in FF using fixed pixel sizes, but I think it should work the way I had it.
Here's the site (unfinished): http://home.comcast.net/~vikenk/maple/
Here's the code for the table-menu:
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;
menuwidth="100%";
itemwidth="20%";
//menuwidth="700px";
//itemwidth="140px";
menualign="center";
aI("status=Back To Home Page;text=Home;url=index.htm;");
aI("showmenu=Highlights;text=Highlights;");
aI("text=Specifications;url=specs.htm;");
aI("showmenu=Location;text=Location;");
aI("text=Contact Info;url=contact.htm;");
}
drawMenus();
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;
menuwidth="100%";
itemwidth="20%";
//menuwidth="700px";
//itemwidth="140px";
menualign="center";
aI("status=Back To Home Page;text=Home;url=index.htm;");
aI("showmenu=Highlights;text=Highlights;");
aI("text=Specifications;url=specs.htm;");
aI("showmenu=Location;text=Location;");
aI("text=Contact Info;url=contact.htm;");
}
drawMenus();
As you can see, if I set the menu width to 700 and itemwidth to 140, it works great in both browsers. But, setting menuwidth to 100% and itemwidth to 20% works in IE, but not FF. USing percentages is much more universal, since it will expand with the containing table/div. I don't want to have to recalulate pixel sizes when/if I change the width of the containing table and div.
In Firefox, the menu items clump in the middle and the last item wraps, so it causes the menu to be much taller than in IE.
Why is this? any ideas? 100% and 20% should work, no?
Poster: Ruth
Dated: Sunday April 2 2006 - 6:20:32 BST
Hi again,
I spoke too soon. I can get it to work. I do not know why it won't work with the 20% perhaps something to do with padding and subimage padding in the style.
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;
menuwidth="100%";
itemwidth="100%";
//menuwidth="700px";
//itemwidth="140px";
menualign="center";
aI("status=Back To Home Page;text=Home;url=index.htm;itemwidth=18%;");
aI("showmenu=Highlights;text=Highlights;itemwidth=20%;");
aI("text=Specifications;url=specs.htm;itemwidth=20%;");
aI("showmenu=Location;text=Location;itemwidth=20%;");
aI("text=Contact Info;url=contact.htm;itemwidth=21%;");
}
drawMenus();
alwaysvisible=1;
position="relative";
orientation="horizontal";
style=menuStyle;
menuwidth="100%";
itemwidth="100%";
//menuwidth="700px";
//itemwidth="140px";
menualign="center";
aI("status=Back To Home Page;text=Home;url=index.htm;itemwidth=18%;");
aI("showmenu=Highlights;text=Highlights;itemwidth=20%;");
aI("text=Specifications;url=specs.htm;itemwidth=20%;");
aI("showmenu=Location;text=Location;itemwidth=20%;");
aI("text=Contact Info;url=contact.htm;itemwidth=21%;");
}
drawMenus();
I tried making the Home item 19% and it went back to being in the middle in FF, but at 18% and with the last item at 21% because it seems the longest, then it spreads out and seems to work. Almost as if it needs the 1% for the other spacing?
Ruth
Poster: vikenk
Dated: Sunday April 2 2006 - 12:41:34 BST
Thanks Ruth,
I didn't play around with the custom widths for each menu item - I'm too stubborn.
5 x 20% = 100%, so the menu items should be distributed evenly. It *should* work that way.
The menu seems to have had this type problem for a long time - not being able to center and distriute evenly according to the menuitem size. There have been many posts about it in the past.
This seems to partly be a FF problem, though. Even though IE gets a bad rap, it seems to be able to do basic math! (in this case anyway).
Poster: Ruth
Dated: Sunday April 2 2006 - 19:25:27 BST
Hi Vikenk,
I didn't do much playing yesterday, but I was testing some more today and found you can put itemwidth="19%"; in the menu def, along with the menuwidth="100%"; and that will also work in FF. I do think it's a FF problem or rather mozilla I guess it is. Isn't that what NN uses, because it also happens in NN. I don't know what happens in other browsers like Safari and such.
Ruth