Adjusting left and right padding.

[Ruth]

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.

Code: Select all

borderwidth=1;  is correct, but  
borderwidth="1";  is incorrect.

I didn't ask which browser you had but I tested in ie5.5 and netscape which worked.

Ruth

[Kman]

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?

[Ruth]

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

[Kman]

Thanks for your reply.

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



Thanks

[Ruth]

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

[Kman]

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

Code: Select all

with(SideMenuStyle=new mm_style()){
onbgcolor="#ff00ff";                  
oncolor="#0000ff";                    
offbgcolor="#00ffff";                  
offcolor="#000000";                    
imagepadding="0 20 0 20";                
fontsize="10";
fontstyle="bold";
fontfamily="Verdana,Arial,Helvetica,sans-serif";
}


with(milonic=new menuname("Side Menu")){
style=SideMenuStyle;
top=100;
left=20;
followscroll=100;
alwaysvisible=1;
orientation="vertical";
aI("url=dates.html;image=images/dates.gif;overimage=images/dates-o.gif;");
aI("url=theme.html;image=images/theme.gif;overimage=images/theme-o.gif;");
aI("url=image.html;image=images/image.gif;overimage=images/image-o.gif;");
}

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

[kevin3442]

Hi Kman,

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

Code: Select all

with(SideMenuStyle=new mm_style()){
onbgcolor="#ff00ff";                  
oncolor="#0000ff";                    
offbgcolor="#00ffff";                  
offcolor="#000000";                    
imagepadding="0 20 0 20";                
fontsize="10";
fontstyle="bold";
fontfamily="Verdana,Arial,Helvetica,sans-serif";
}


with(milonic=new menuname("Side Menu")){
style=SideMenuStyle;
top=100;
left=20;
followscroll=100;
alwaysvisible=1;
orientation="vertical";
aI("url=dates.html;image=images/dates.gif;overimage=images/dates-o.gif;");
aI("url=theme.html;image=images/theme.gif;overimage=images/theme-o.gif;");
aI("url=image.html;image=images/image.gif;overimage=images/image-o.gif;");
}

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:

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.

But the code you posted is for a vertical menu.

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

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:

Code: Select all

padding="20 0 20 0";

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

Hope that helps,

Kevin

[Kman]

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:

Code: Select all

with(SideMenuStyle=new mm_style()){
onbgcolor="#ff00ff";                  
oncolor="#0000ff";                    
offbgcolor="#00ffff";                 
offcolor="#000000";                   
imagepadding="0 0 20 0";                
fontsize="10";
fontstyle="bold";
fontfamily="Verdana,Arial,Helvetica,sans-serif";
}






with(milonic=new menuname("Side Menu")){
style=SideMenuStyle;
top=100;
left=20;
followscroll=100;
alwaysvisible=1;
orientation="vertical";
aI("url=dates.html;image=images/dates.gif;overimage=images/dates-o.gif;");
aI("url=theme.html;image=images/theme.gif;overimage=images/theme-o.gif;");
aI("url=image.html;image=images/image.gif;overimage=images/image-o.gif;");
}

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:)

[Maz]

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

[kevin3442]

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

[Ruth]

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

[Kman]

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

[machinas]

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

[John]

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...

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.

[machinas]

Hi John,

Thanks for confirming that multi-side padding is supported.

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

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?

[Maz]

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

[kevin3442]

Hi Richard,

...So - is this a bug?

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

[machinas]

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

[Andy]

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:

Code: Select all

rawcss="padding:10px 20px 30px 40px;"

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

[machinas]

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?

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

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