Adjusting left and right padding.

scargin · Post by **scargin** » Wed Apr 28, 2004 6:49 am

Is it possible to adjust the left and right padding of the menu (independent to the global "padding setting"?

I would like to keep the top and bottom padding to "3" and the left and right padding to "5" to space the menu items out a bit more.

If this is not possible does anyone have any suggestions on the best way to do it? I realise that I could increase the size of the menu image but was hoping for a more elegant solution.

Also is there any way to get the menu to adjust to fill the total width of a table cell. I am using version 5.14 of the table bound menu.

The page can be previewed at: http://d8199.i44.quadrahosting.com.au/default_blank.asp

Thanks,

Stuart Cargin

Maz · Post by **Maz** » Wed Apr 28, 2004 7:40 am

Yes,

padding="3px 5px 3px 5px";

maz

scargin · Post by **scargin** » Wed Apr 28, 2004 8:44 am

Thanks Maz.

This reaffirms why I think the Milonic menu is the best on the market.

It can't get any easier than that.

Thanks again,

Stuart

Maz · Post by **Maz** » Wed Apr 28, 2004 9:59 am

Good I got one right, its too late now to try the other problem again.

Someone may figure it out in the morning.

maz

scargin · Post by **scargin** » Thu Apr 29, 2004 1:49 am

Hi again.

I tried replacing the existing padding value in menu_data.js:

padding=3;

to

padding="3px 5px 3px 5px";

and it made no difference. Also tried changing it in the code of the web page itself and still no difference.

Any other ideas?

Thanks,

Stuart

Maz · Post by **Maz** » Thu Apr 29, 2004 3:31 am

I took a look and see this:

padding=3

you left off the ;

where you have 0 values, remove those lines comletely, you don't need them.

Also, your menustyles don't match up, you have MainMenuStyle but your main menu but main menu style is MenuStyle, so its reading the wrong style.

maz

scargin · Post by **scargin** » Thu Apr 29, 2004 4:17 am

Thanks Maz.

I corrected the error and removed any "0" values.

How do I designate which style is to be used for the main menu?

I added the padding code to menuStyle and referenced this style in the page but the changes still do not appear to be showing up.

Thanks again for all your help.

Stuart

Post by **Ruth** » Thu Apr 29, 2004 6:44 am

in each menu you have the term; style= whatever style you name after that is the style designated for that menu. As to the padding, what maz listed is correct and unless there's a conflict in your style sheet, I've not figured out yet why it's not working, unless it's to do with the images. But, if you put itemwidth="100%"; in the main menu in the table that will spread that out to fit across that table. I tested in ie 5.5, netscape 6, 7, opera 6, 7 and firebird .07 and it works fine. I can't test on a mac to see how it works.

Code: Select all

with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=155;
left=200;
alwaysvisible=1;
orientation="horizontal";
position="relative";
itemwidth="100%";

Ruth

scargin · Post by **scargin** » Thu Apr 29, 2004 9:13 am

Thanks for the explanation on how the Styles work. As far as I can tell I have followed the same format, but as you said the padding is not working.

Your suggestion of adding itemwidth= "100%" is a much better solution and exactly what I was after. I hope it works on a Mac will have to contact some Mac friends.

I have tested it on IE 6.1, Firefox 0.8 and Opera 7.1. on Win2K.

If anyone is able to figure out why the padding isn't working with this configuration (menu within table cell using rollover images) I would appreciate it.

Thanks alot.

Stuart

Maz · Post by **Maz** » Thu Apr 29, 2004 9:44 am

With the position relative to the table, now remove the absolute position from the top of the browser.

top=155;
left=200;

maz

scargin · Post by **scargin** » Thu Apr 29, 2004 10:56 am

I removed the references to the top and left positioning, but it does not appear to make any difference. The menu still does reflect the padding settings and still has submenu font size issues in Firefox and Opera.

If these settings are to be removed why are they visible in the table bound example on the milonic website?

<script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
top=155;
left=200;
alwaysvisible=1;
orientation="horizontal";
position="relative";
aI("text=Home;url=http://milonic.com/;status=Back To Home Page;");
aI("text=Menu Samples;showmenu=Samples;");
aI("text=Milonic;showmenu=Milonic;");
aI("text=Partners;showmenu=Partners;");
aI("text=Links;showmenu=Links;");
aI("text=My Milonic;showmenu=My Milonic;");
}
drawMenus();
</script>

Thanks,

Stuart

Post by **Ruth** » Thu Apr 29, 2004 3:26 pm

As a guess, the position may have been just an oversight since the same menu is used in however many samples, or another guess, a kind of safety for some obscure browser that doesn't do something with tables so the position is there to put it more or less where it should be in that case...again those are just guesses.
As to the padding problem.... you are padding the item, plus the subimage, but also you have image/overimage in the items so insert imagepadding= and the padding numbers you want up in the styles just like the other padding. Also, remove the quote marks from items like fontsize=12 where the declared value is only a number. As to the other problem, I tested the menu in Firebird .07 [that's the firefox before it got it's name change] and I"m not seeing any fontsize problems in that version. What exactly is happening? Are you referring to the actual menu width and the fact that it doesn't seem to have any space to the right? One way to fix that is to declare an itemwidth that will make the submenu that width. So, say in the about menu you declare itemwidth="110px"; or whatever works. Try that. There is some problem with padding, it seems that if the image/overimage and the subimage is also there, the regular padding doesn't seem to be working.

Ruth

scargin · Post by **scargin** » Fri Apr 30, 2004 1:17 am

Ruth,

Thanks again for your reply.

Tried your suggestions but still no luck.

Refer to :http://d8199.i44.quadrahosting.com.au/default_blank.asp for padding = 3:

and

http://d8199.i44.quadrahosting.com.au/d ... lankPx.asp for padding="5px,7px,5px,7px";

Although the second version is thinner than the first the padding does not change when I increase the padding values.

It has reached a point where I probably need to move on. The "itemwidth="100%";" seems to be the best solution.

In regards to the display in firefox and Opera refer to :

http://milonic.com/forum/viewtopic.php?t=4105 to view a screen shot on what I was talking about. John suggested that the problem could be solved by changing the font value to px. This fixed the issue.

Thanks for all your help,

Stuart

Post by **John** » Fri Apr 30, 2004 1:48 am

scargin wrote:John suggested that the problem could be solved by changing the font value to px. This fixed the issue.

Glad we got something going for you.

But don't give up. These gals are good!

Post by **Ruth** » Fri Apr 30, 2004 3:29 am

I think I wasn't really clear about the padding. There are 3 padding properties....

1. padding
2. subimage padding
3. imagepadding

because you are using both text and image/overimage you need to use the imagepadding, it's not the same as subimage padding. However, if you are trying to use that to expand the menu, it's really better to use the itemwidth for that, that way you can more control it, and only use the various padding to put some space between the borders and the item.

Ruth

scargin · Post by **scargin** » Fri Apr 30, 2004 9:07 am

Thanks Ruth I will give it a try.

Stuart

kevin3442 · Post by **kevin3442** » Fri Apr 30, 2004 9:02 pm

Hi Stuart,

scargin wrote:....http://d8199.i44.quadrahosting.com.au/d ... lankPx.asp for padding="5px,7px,5px,7px";

The problem you're having with multiple padding values comes down to commas. You are using

Code: Select all

padding="5px,7px,5px,7px";

Try it using a space to separate one value from the next, rather than a comma... like so:

Code: Select all

padding="5px 7px 5px 7px";

In fact, px is the default measure, so you could also do

Code: Select all

padding="5 7 5 7";

and get the same result. Just tried it with local copies of your test page and test menu_dataRapidMapPx.js file and it worked.

Hope that helps,

Kevin

machinas · Post by **machinas** » Thu May 13, 2004 1:31 pm

I wonder if this sheds any light on the padding issue:

I was successfully using CSS style padding (e.g. padding="5px 2px 5px 20px";) with v5.0 Release Candidate 7.0 (although it never worked on Netscape browsers).

However, after recently changing to the v5.16 codebase, the four seperate padding values stopped working - instead it takes the first of the four values and applies it to all sides of the box.

Does anybody have something like padding="5px 2px 5px 20px"; working with v5.16+?

Richard

Post by **Ruth** » Thu May 13, 2004 4:38 pm

I just copied and pasted your codes into the downloaded sample for 5.16 and it works. Do you have a link to your site so we can check and see what's happening?

Ruth

machinas · Post by **machinas** » Fri May 14, 2004 1:16 pm

Hi Ruth,

Can't give a link to the site at the moment, but the style definition with non-working CSS padding is as follows:

Code: Select all

with(topMenuStyle=new mm_style()){
onbgcolor="#CCCCCC";
oncolor="#000000";
offbgcolor="#BBBBBB";
offcolor="#000000";
bordercolor="";
borderstyle="solid";
borderwidth=0;
separatorcolor="";
separatorsize="0";
padding="5px 2px 5px 20px";
fontsize="11px";
fontstyle="normal";
fontfamily="Tahoma, Arial, Helvetica, sans-serif";
pagecolor="#000000";
pagebgcolor="#BBBBBB";
subimage="arrow_dropdown.gif";
subimagepadding="0 13px 0 0";
}

Oddly enough, the subimagepadding is working as expected...

Richard