Problem with background image menu

Poster: bluecrane
Dated: Monday August 14 2006 - 2:39:23 BST

Greetings all,
Been a user for some years now and have just upgraded to the new version and am playing around with the example: Background Item Images.

This works fine on the site until I use my own background images for the properties: bgimage and bgoverimage

My lame attempt can be found here: http://www.ltmailstop.com

What I see is that the base menu looks good however when I get to a submenu it no longer acts like the undoctored example that I am basing this off of. Since the example works fine this has to be some bone-headed thing that I'm doing wrong.

Excerpt below of my menu_data file.
TIA,
-Troy

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=2;

with(background=new mm_style()){
bgimage="/images/menu-up.gif";
borderstyle="solid";
fontfamily="Helvetica";
fontsize="75%";
fontstyle="italic";
fontweight="bold";
image="transparent.gif";
imagepadding=4;
itemheight=25;
itemwidth=167;
offcolor="#333300";
oncolor="#ffffff";
overbgimage="/images/menu-down.gif";
separatorcolor="transparent";
separatorsize=2;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
itemheight=25;
itemwidth=167;
left=10;
style=background;
top=130;
aI("bgimage=/images/menu-up.gif;image=/images/xp_on.gif;overbgimage=/images/menu-down.gif;text=Home;url=http://www.milonic.com/;");
aI("bgimage=/images/menu-up.gif;image=/images/xp_eject.gif;overbgimage=/images/menu-down.gif;showmenu=Milonic;text=Milonic;");
aI("bgimage=/images/menu-up.gif;image=/images/xp_rl.gif;overbgimage=/images/menu-down.gif;showmenu=Partners;text=Partners;");
aI("bgimage=/images/menu-up.gif;image=/images/xp_rl.gif;overbgimage=/images/menu-down.gif;showmenu=Links;text=Links;");
aI("bgimage=/images/menu-up.gif;image=/images/xp_locked.gif;overbgimage=/images/menu-down.gif;showmenu=My Milonic;text=My Milonic;");
}

with(milonic=new menuname("Milonic")){
style=background;
aI("text=Product Purchasing Page;url=http://www.milonic.com/cbuy.php;");
aI("text=Contact Us;url=http://www.milonic.com/contactus.php;");
aI("text=Newsletter Subscription;url=http://www.milonic.com/newsletter.php;");
aI("text=FAQ;url=http://www.milonic.com/menufaq.php;");
aI("text=Discussion Forum;url=http://www.milonic.com/forum/;");
aI("text=License Agreement;url=http://www.milonic.com/license.php;");
aI("text=Privacy Policy;url=http://www.milonic.com/privacy.php;");
}
<clip> all else like the example file

Poster: Ruth
Dated: Monday August 14 2006 - 3:05:10 BST

Hi,

The good thing about having item bgimages is you can type on them, the bad thing is you can type on them and if the text is higher/wider than the original bgimage, then the bgimage acts like a bgimage and repeats vertically and/or horizontally. This means that in any browser, and in IE if the person has accessbility set, when the user changes the font size and makes it larger than the item will get larger and the bg will repeat.

It can be fixed using some slicing of images and css to create the style. If you're interested I can try and make the images and set it up so you can see how it's done and use that to make the menu.

It is an involved process depending on the image and on the menu orientation since it also requires the use of divides, but the menus can be real nice and also let the viewer increase fonts about 400% and still have the menu look as it does.

Ruth

Problem with background image menu

Poster: bluecrane
Dated: Monday August 14 2006 - 3:57:25 BST

Evening Ruth,
Thanks for the reply. The text size (font size or length) doesn't appear to be the issue. What I fine strange is that on the sub-menu the menu property "image" appears to be used even though I am not utilizing it in the with the "aI" tag. You see the big red "X" where it can't find the image. Again, I'm basing this on the example here: http://www.milonic.com/menusample20.php...and, as far as the sub-menu's go, the code was unchanged.

For grins I changed the fontsize to 50%...same behavior, then changed the sub-menu's to explicitly use the "bgimage" and "overbgimage" properties (note: no use of the "image" property). Same behavior. See new excerpt of changes below the sig.

Thanks again for the help!
-Troy

<clip>
with(milonic=new menuname("Milonic")){
style=background;
aI("bgimage=/images/menu-up.gif;overbgimage=/images/menu-down.gif;text=Product Purchasing Page;url=http://www.milonic.com/cbuy.php;");
aI("bgimage=/images/menu-up.gif;overbgimage=/images/menu-down.gif;text=Contact Us;url=http://www.milonic.com/contactus.php;");
aI("bgimage=/images/menu-up.gif;overbgimage=/images/menu-down.gif;text=Newsletter Subscription;url=http://www.milonic.com/newsletter.php;");
aI("bgimage=/images/menu-up.gif;overbgimage=/images/menu-down.gif;text=FAQ;url=http://www.milonic.com/menufaq.php;");
aI("bgimage=/images/menu-up.gif;overbgimage=/images/menu-down.gif;text=Discussion Forum;url=http://www.milonic.com/forum/;");
aI("bgimage=/images/menu-up.gif;overbgimage=/images/menu-down.gif;text=License Agreement;url=http://www.milonic.com/license.php;");
aI("bgimage=/images/menu-up.gif;overbgimage=/images/menu-down.gif;text=Privacy Policy;url=http://www.milonic.com/privacy.php;");
}
<clip>

I think I got it.

Poster: bluecrane
Dated: Monday August 14 2006 - 4:05:02 BST

I think I figured out what is going on.

Looks like the sub-menus inherit their behavior from the main menu (makes sense). So, I set the "image" property to null and it appears to work.

The strange thing is that the example menu didn't have to do that. Oh well, works now.

Thanks again for the help!
-Troy

Poster: Ruth
Dated: Monday August 14 2006 - 6:12:35 BST

Hi,

Actually, just so you understand, the submenus don't get their behaviour as to images and such from the main menu, they get it from whatever menu style you use for them. So, if you are using the same menu style in main and subs they would be the same.

Your problem is not the images in the main menu, it is that you have coding in the menuStyle image="transparent.gif"; and there is no transparent gif any place. Since in the main menu the aI strings have image= and whatever image you are using you don't have the problem, the aI string image code is taking precedence over the menuStyle image="transparent.gif"; but since the submenus have no images they are looking for that transparent.gif

Once you either make a new style for the submenus, or remove that image="transparent.gif"; from the menuStyle, or upload the image, that problem with it repeating the bg image will stop until someone changes the fontsize in their own browser settings. You could do a simple workaround for that though. Set the bgimage and overbgimage using css and positioning, and make the bgcolor to be as close to the image as possible so that if a person has to have a large font, the image will not repeat and will remain at the top left and the rest of the item will more or less match the color.

There's a basic Css Styling Demo at http://support.milonic.com/beginners/css_styling/

Go about 1/2 way down the page and you'll see a link to some simple examples.
Ruth

Yup, you're correct...

Poster: bluecrane
Dated: Monday August 14 2006 - 13:45:24 BST

Hey Ruth,
Yup, it was a bone-headed miss on my part. As you said my copy of "transparent.gif" wasn't on the path that I specified.

Works like a champ now...thanks again!
-Troy