Menu Item Width Mystery...extra spacing to the right!

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

Menu Item Width Mystery...extra spacing to the right!

Poster: pinchio
Dated: Thursday April 1 2004 - 19:12:33 BST

I've been playing with the menu and I can't seem to figure out why there is spacing to the right of menu items. Here is my code and a picture.

Code:

_menuCloseDelay=500           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=50            // The time delay before menus open on mouse over
_subOffsetTop=0             // Sub menu top offset
_subOffsetLeft=1            // Sub menu left offset

with(menuStyle=new mm_style()){
onbgcolor="#000000";
oncolor="#99CCFF";
offbgcolor="#000000";
offcolor="#ffffff";
bordercolor="#ffffff";
borderstyle="solid";
borderwidth=1;
separatorcolor="#ffffff";
separatorsize=1;
separatorwidth=1;
padding=2;
fontsize="70%";
fontstyle="normal";
fontweight="bold";
fontfamily="verdana,arial,sans-serif";
pagecolor="#99CCFF";
pagebgcolor="#000000";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="";
subimagepadding="0";
}
//*****************************************************************
with(milonic=new menuname("Main Menu")){
style=menuStyle;
//menuwidth=488;
top=25;
left=260;
alwaysvisible=1;
orientation="horizontal";
aI("text=Home;url=/default.asp;status=Home;");
aI("text=Download Library;url=/downloads.asp;status=Download Library;");
aI("text=Forums;url=/forums.asp;status=Discussion Forums;");
aI("text=Support FAQ;url=#;status=Support FAQ;");
aI("text=Contact Us;url=/content.asp?contentID=346;status=Contact US");
}
//*****************************************************************
drawMenus();

Poster: Maz
Dated: Thursday April 1 2004 - 21:01:59 BST

It looks fine to me, maybe you are trying to center the text, then to add to your styles
align="center";

?

maz

Poster: John
Dated: Thursday April 1 2004 - 21:36:39 BST

Try removing subimage=""; and subimagepadding="0";.

Poster: pinchio
Dated: Thursday April 1 2004 - 21:43:16 BST

Still no good, it still places padding to the right.

What I really would like is to not specify the width of the menu or menu items but have them size as necessary to fit the text. I've set the placement of the menubar absolute with top and left properties so I know exactly where the menubar appears and that works fine. Now all I need is the darn menu items to behave. :evil:

Thanks for any help, keep em coming I'll solve this sometime.

Poster: Maz
Dated: Thursday April 1 2004 - 22:01:15 BST

In that case, completely remove all // and all those stars****

Don't leave anything extra in there first,and make sure you have version 5.1 then I'll take another look.

maz

Poster: pinchio
Dated: Thursday April 1 2004 - 22:08:30 BST

I've done as you mentioned but still the same. I have version 5.1 installed. Here is the code so far including edits.

Code:

_menuCloseDelay=500
_menuOpenDelay=50
_subOffsetTop=0
_subOffsetLeft=1 
with(menuStyle=new mm_style()){
onbgcolor="#000000";
oncolor="#99CCFF";
offbgcolor="#000000";
offcolor="#ffffff";
padding=2;
fontsize="70%";
fontstyle="normal";
fontweight="bold";
fontfamily="verdana,arial,sans-serif";
pagecolor="#99CCFF";
pagebgcolor="#000000";
headercolor="#000000";
headerbgcolor="#ffffff";
}
with(milonic=new menuname("Main Menu")){
style=menuStyle;
menuwidth=450;
top=25;
left=260;
alwaysvisible=1;
orientation="horizontal";
aI("text=Home;url=/default.asp;status=Home;");
aI("text=Download Library;url=/downloads.asp;status=Download Library;");
aI("text=Forums;url=/forums.asp;status=Discussion Forums;");
aI("text=Support FAQ;url=javascript:xlaAFMlaunch();status=Support FAQ;");
aI("text=Contact Us;url=/content.asp?contentID=346;status=Contact US");
}
drawMenus();

Poster: Ruth
Dated: Friday April 2 2004 - 3:30:15 BST

I'm not seeing a problem. I used the last one you gave and 5.1, then put it up on the web. It looks fine in ie5.5, netscape 6, 7, firebird.07. It is up above the black line in opera 6, 7, and netscape 4.79. But, doesn't look funny, as if it had been designed to be up a little higher than the black line. I believe that has to do with the browsers and their margins.

LINKS REMOVED

Then I went and took what you said and eliminated the menuwidth, and put back in the border and separator. It also works fine in those mentioned browsers.

Hope this helps.

Ruth

Poster: John
Dated: Friday April 2 2004 - 18:47:35 BST

Interesting, Ruth. I downloaded his files and posted them and couldn't get the menu to show at all! Maybe another nap will help.

Poster: Ruth
Dated: Friday April 2 2004 - 19:30:02 BST

Lord, don't say nap... I need one. I never thought to actually go and find the site and get the files, I just used what he put here which has different text. So, I just went and downloaded his files and they work fine. Well, at first I thought it was frozen because nothing happened when you moused over, but as soon as the little scroller started below it, then the menu worked.

Ruth

Poster: John
Dated: Sunday April 4 2004 - 7:09:50 BST

That's definitely strange. All I brought down were the menu-specific files. No workee...

Poster: pinchio
Dated: Monday April 5 2004 - 15:28:32 BST

Ruth, your test site looks like the way I want it, no padding occuring to the right of the menu items. I'll download your test script to see how it behaves on mine.

let you know how it works out.

Poster: John
Dated: Monday April 5 2004 - 16:16:20 BST

If it works OK for you, please do a code comparison and see if you can find what the exact problem was. Good teaching tool for all of us.

Poster: pinchio
Dated: Monday April 5 2004 - 19:03:45 BST

Sorry guys, still no luck. If you like I've put together a small screen capture movie (.avi) which shows you what I'm up against. In the first example you'll see my original code and in the second example you'll see Ruth's code and how it renders. As you'll see it's not like Ruth's and I still see padding to the right of the menu items.

Any help would be appreciated.

BTW: I'm using 5.1 version of milonic menu.

View the video: http://www.marchnetworks.com/menuitem-padding-issue.avi

Poster: Ruth
Dated: Monday April 5 2004 - 21:07:34 BST

Is there some way you can put up the actual page. The video shows what you are seeing, and I was pretty sure that was it, but I can't see the code on the page itself or get the css files and such, and work with it to try and find the problem. I went back and actually downloaded your main page, removed the company, products, markets etc. images, subsituted a plain black one equal to their width and put my menu data file with the corrections I did onto the page, uploaded it to my site with your other menu files and all the images and stuff, and it doesnt do what the video shows, so unless I can see the actual page you are getting this result on, I can't figure out what's up. So, check the url and see if it still looks like that for you, or if it is correct. If it isn't correct, then perhaps the issue is someplace in the css style files in combination with the browser you are using.

http://www.poems2u.com/help/march/sitepage.htm

Ruth

Poster: czer9621
Dated: Tuesday April 6 2004 - 22:23:03 BST

could it be a separate style sheet interfering? maybe you've set padding or something for tables in general?

Poster: Ruth
Dated: Wednesday April 7 2004 - 0:26:43 BST

I did think of that but since I dont' see the problem I can't really test the style sheet.

When I take that main site page and put the menu on it, it works fine with no extra space on any of the browsers I've tried, but of course I don't know if the style sheet is different for the one about which he's asking. That's a good suggestion to have them check to see if there's been a change there.

Ruth

Industrial Strength JavaScript and DHTML Menus

Menu Item Width Mystery...extra spacing to the right!