Adjusting left and right padding.

Poster: scargin
Dated: Wednesday April 28 2004 - 6:49:00 BST

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

Poster: Maz
Dated: Wednesday April 28 2004 - 7:40:34 BST

Yes,

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

maz

Poster: scargin
Dated: Wednesday April 28 2004 - 8:44:26 BST

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

Poster: Maz
Dated: Wednesday April 28 2004 - 9:59:52 BST

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

Someone may figure it out in the morning.

maz

Poster: scargin
Dated: Thursday April 29 2004 - 1:49:28 BST

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

Poster: Maz
Dated: Thursday April 29 2004 - 3:31:14 BST

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

Poster: scargin
Dated: Thursday April 29 2004 - 4:17:00 BST

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

Poster: Ruth
Dated: Thursday April 29 2004 - 6:44:13 BST

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.


Ruth

Poster: scargin
Dated: Thursday April 29 2004 - 9:13:16 BST

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

Poster: Maz
Dated: Thursday April 29 2004 - 9:44:58 BST

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

top=155;
left=200;

maz

Poster: scargin
Dated: Thursday April 29 2004 - 10:56:18 BST

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://www.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

Poster: Ruth
Dated: Thursday April 29 2004 - 15:26:42 BST

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

Poster: scargin
Dated: Friday April 30 2004 - 1:17:08 BST

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/default_blankPx.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://www.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

Poster: John
Dated: Friday April 30 2004 - 1:48:10 BST


Glad we got something going for you.

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

Poster: Ruth
Dated: Friday April 30 2004 - 3:29:23 BST

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

Poster: scargin
Dated: Friday April 30 2004 - 9:07:07 BST

Thanks Ruth I will give it a try.

Stuart

Poster: kevin3442
Dated: Friday April 30 2004 - 21:02:32 BST

Hi Stuart,



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

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

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

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

Poster: machinas
Dated: Thursday May 13 2004 - 13:31:32 BST

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

Poster: Ruth
Dated: Thursday May 13 2004 - 16:38:32 BST

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

Poster: machinas
Dated: Friday May 14 2004 - 13:16:03 BST

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:



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

Richard

Poster: Ruth
Dated: Friday May 14 2004 - 18:22:00 BST

Remove the px, that is default and when I left that in Netscape ignored the padding but once that was gone it worked fine. Also, you should remove anything you're not using, so get rid of the stuff to do with border and separator. I think the "" for something not used was what we did in version 3, here just remove the whole item. One last thing, if a property is just a number with nothing else don't use quote marks. I didn't ask which browser you had but I tested in ie5.5 and netscape which worked.

Ruth

Poster: Kman
Dated: Friday May 14 2004 - 21:28:08 BST

I too am having problems with the padding values resulting in no effect on the menu's appearance.

Specifically, I'm using all images with overimages and would like to control the space between the top level menu items across a horizontal menu.

Any specific instructions on how to correctly implement the padding - in this case horizontal padding - would be greatly appreciated.

BTW,

Some of the "Helpful Links" mentioned in this topic's thread are of limited use as the Style Properties page mentions "imagepadding" but has NO descriptive text.

Where may I find a complete listing of properties etc. and an explanation of how/where to implement them?

Poster: Ruth
Dated: Friday May 14 2004 - 22:11:16 BST

Actually, styleproperties.php refers to the global style you create when you define a style i.e. offbgcolor/onbgcolor/oncolor/offcolor etc. menuproperties refers to the properties you set in the menu itself, top= left= orientation= and so on. itemproperties refers to properties you can list in the particular item. As to not having an expanation, it may be that imagepadding has not yet be implemented [programmed into the menu] However, it would function as does padding and subimagepadding and be implemented the same way IF it's an item that is functional at this time. There is a basic explanation of style under beginner's guide in this forum.

A link to your site so that we can see what's 'not' happening and check out the files would be helpful in answering your questions

Ruth

Poster: Kman
Dated: Friday May 14 2004 - 22:46:29 BST

Thanks for your reply.

I simply want to add space between top level menu items in a menu that uses images and overimages.



Thanks

Poster: Ruth
Dated: Friday May 14 2004 - 23:38:52 BST

Use imagepadding= in the global style and put in the padding you wish to have between the items. So, if you put imagepadding="0 2 0 2"; you would get a 2px padding on the right and left of each image. which means you would get 4 px between the middle images and two pixels to the left of the first and the right of the last. I tested in ie5.5, netscape 7.1, opera 7.1, firefox .07 and it worked in all.

Ruth

Poster: Kman
Dated: Saturday May 15 2004 - 1:03:01 BST

I'm using the following code with no success. Thanks again for any direction/suggestions: BTW, I've previewed on IE6 and NN7.1




As an alternative, is there a way to use transparent image as a 'spacer' that does not act or appear as a link ?

Poster: kevin3442
Dated: Saturday May 15 2004 - 1:58:48 BST

Hi Kman,


I just tried your code locally. It works exactly as it is coded to, in both IE6 and NS7.1 in Win2k. I'm a little confused, however, about wha you want. In an earlier post, you said:

But the code you posted is for a vertical menu.

The padding instructions Ruth provided are specific to horizontal padding (left and right sides), as you requested, and would work well to place space between menu items in a horizontal menu, but would not place space between items in a vertical menu, like the one you posted code for. In your code, the padding simply results in extra spaces to the left and right of the images in your vertical menu. If you really want a vertical menu, with padding between items, then the padding would go at the top and bottom of the item, like this:

In general, padding works like this... padding="top right bottom left".

Hope that helps,

Kevin

Poster: Kman
Dated: Saturday May 15 2004 - 3:40:08 BST

Sorry about that. I was using a vertical menu in one case and horizontal in another.

For this instance, I want to apply padding to a vertical menu with padding of 20 pixels for the bottom of each menu heading, 0px for left/right/top.

I have now changed the code to read:


But still no effect.

BTW, I get correct padding if I replace images with text and use "padding" instead of "imagepadding". Unfortunately I need to use images for the design.

Thanks again for your suggestions - and patience:)

Poster: Maz
Dated: Saturday May 15 2004 - 4:28:24 BST

Did padding not work with images either?

Could it be specific to your browser? I've been using 0px 0px 20px 0px after hearing feedback on browsers.

maz

Poster: kevin3442
Dated: Saturday May 15 2004 - 4:50:22 BST

I don't know what to tell you Kman... I tried your latest code again (locally) and the imagepadding worked fine (IE6, NS7.1 / Win2k). What build of the menu are you using? The current release is v5.18. If you're using an older version, might be worth an update.

Cheers,

Kevin

Poster: Ruth
Dated: Saturday May 15 2004 - 5:13:06 BST

It's difficult without a page to check to see if you have some other conflict going on. If you have a style sheet, remove it from the page and test the padding again. Do you have the menu in a table and if so did you put it there according to instructions? Not following those causes nn to do funny things sometimes. If at all possible it would be easiest to have you put up a test page with at least the menu and any style sheet you are using.

Ruth

Poster: Kman
Dated: Monday May 17 2004 - 16:52:13 BST

Thanks to all.
The problem was that I was using v5 and when I updated to v5.18 all works fine.

Poster: machinas
Dated: Tuesday May 18 2004 - 12:34:32 BST

Hello all - followed all advice on this subject, and have narrowed the trouble down a little, but still have a padding problem persisting. A stripped-out dummy of what I am working on is here: http://www.dxm.bz/milonic/

There are two menus on that page - I have padding="5 2 5 50"; on the top 'alwaysvisible' menu, for both (so there should be lots of padding on the left side of the menu) - the only difference between the two examples is that the second one has subimage set empty...

This is what I have found - when you have a subimage at the root of an 'alwaysvisible' menu, the padding ceases to work. Go figure. The dummy uses v5.18 menu code, and I get the same result in IE6.0 and NS7.0. It used to work fine with v5.0rc7...

Perhaps I am being too obsessive about nice padding, especially since the style properties documentation doesn't even claim to support "top right left bottom" padding...

Richard

Poster: John
Dated: Tuesday May 18 2004 - 14:43:01 BST


Not at all. It should look the way you want. Actually, Andy has confirmed in the Forum what the gang has been telling you about the multi-padding - it's legal!

Also, add the drawMenus(); at the bottom of your _data file.

Poster: machinas
Dated: Wednesday May 19 2004 - 16:09:39 BST

Hi John,

Thanks for confirming that multi-side padding is supported.



I put the drawMenus(); in, but presume that was an unrelated recommendation since it made no difference.

So I did some further testing, and used your original sample files, with the only change being padding="5 10 5 80"; instead of padding=5; in the menuStyle:
http://www.dxm.bz/milonic/menu.htm

As you can see, the crazy 80px left side padding is only applied to menu items that have no child (i.e. no subimage) - I presume this is not the intended behaviour? So - is this a bug?

Poster: Maz
Dated: Wednesday May 19 2004 - 17:04:59 BST

I just tested padding and subimage padding neither moved left, I'd only been using top and bottom, so hadn't noticed that, although I might have worked around it with image using align.

maz

Poster: kevin3442
Dated: Wednesday May 19 2004 - 19:19:49 BST

Hi Richard,

I would have to say yes... I believe it's a bug. I had been working on a new menu layout quite a while ago, making heavy use of padding. I haven't essed with it for a long time... I was using v5.03 of the menu then. With v5.18 of the menu, the layout is changed quite a bit.

After some experimenting, it seems that there's more to it than just the presence or absence of a subimage. The inclusion of any image in the menu item will affect whether padding works correctly or not. E.g., if the item does not have a subimage, but you use the image property in the aI() string to insert any other image in the item, then you get the same padding oddities. Also, you get the "padding oddities" whether you use padding as a style property or as a menu item property.

The oddities themselves are also not consistent. If you set padding="20 0 0 0" then you get 20px of padding all the way around, just like if you set padding=20 (keep in mind that these effects only occur when the item includes an image or subimage). If you place a positive value in either the left or right padding positions, or both, like padding="0 20 0 20", then there is no effect (no padding) at all. If you place a positive value in the bottom padding position, like padding="0 0 20 0", then it works as expected, whether the menu item includes an image or not.

I'm sure Andy will read this, but I'll report it just the same.

Kevin

Poster: machinas
Dated: Thursday May 20 2004 - 9:03:17 BST

Hi Kevin,

Thanks for your comments. As an obsessive pixel pusher, it was the presentation 'customisability' of Milonic Menus that attracted me to switch from HierMenus (besides their laughable licensing model), and similarly, what is attractive with CSS. CSS 'style' syntax supported in Milonic has to be a winner for creative control over menus.

Richard

Poster: Andy
Dated: Thursday May 20 2004 - 9:44:57 BST

Hi,

Just looked and I'm not sure it is a bug, but I could be wrong.

In reality padding has only ever allowed an Integer value. If using something like "10 20 30 40" worked it was luck rather than by design.

Anyway, you can get around this by adding the following to your style:



This might fail on the older browsers though but I've tested it and it works quite well so it should allow you to work as before.

Please let me know if you still think the code needs looking at.

Cheers
Andy

Poster: machinas
Dated: Thursday May 20 2004 - 15:29:42 BST

Hi Andy,

Excellent, the rawcss style works a treat in this case, for IE6 and NS7 (http://www.dxm.bz/milonic/menu_rawcss.htm). I gather that rawcss is a new style property since it's mentioned, but not documented on the "Style Properties" page? Presumably, rawcss only applies to the text container of menu items?



Well, if the padding property is not supposed to support non-integer values, then everything is fine. But if it is to support CSS style padding, then the code would appear to handle that inconsistently at the moment.

Personally, I would like to have the flexibility of using CSS syntax in Style Properties, or to create my own style classes (like with onclass, offclass and pageclass) - the latter of which would be nice to expand on, or at least have some documentation that exposes id's and classes used by the menu.

Cheers,
Richard

Poster: Maz
Dated: Thursday May 20 2004 - 16:25:38 BST

Now I understand the problem, I realize how I've got around it, is that since it always involves the width of an image, I used the size of the image to make up the difference. This was how padding was originally applied on subimages and images.

maz