Bgimage not showing when submenu is present

[Buccaneer]

First of all thanks for the great menu.
But now I run into a problem I can't solve somehow.

I have the following code:

Code: Select all

with(miniStyle=new mm_style()){
oncolor="#009c92";
offcolor="#80fff7";
padding="6";
fontfamily="Arial";
fontsize="12px";
fontweight="bold";
bgimage="/media/images/main_button.jpg";
itemheight="34";
itemwidth="249";
overbgimage="/media/images/sub_image.jpg";
subimage="/media/images/arrow.jpg";
subimagepadding="5";
borderstyle="solid";
}

Code: Select all

with(milonic=new menuname("Main menu")){
style=miniStyle;
alwaysvisible="1";
static="1";
button="but_1";
aI("text=Home;url=http://www.heartforbrazil.com/modules/content/content.php?id=1;");
aI("text=Laatste Nieuws;url=http://www.heartforbrazil.com/tinka/blog.php?fake=130;");
aI("text=Wie zijn wij;url=http://www.heartforbrazil.com/modules/content/content.php?id=73;");
aI("text=Ons team;url=http://www.heartforbrazil.com/modules/content/content.php?id=121;");
aI("text=Wat doen wij;url=http://www.heartforbrazil.com/modules/content/content.php?id=89;");
aI("text=Een hart voor Brazilië;url=http://www.heartforbrazil.com/modules/content/content.php?id=90;");
aI("text=Een toekomst opbouwen;url=http://www.heartforbrazil.com/modules/content/content.php?id=91;");
aI("text=Hoe kan ik helpen?;url=http://www.heartforbrazil.com/modules/content/content.php?id=92;");
aI("text=Kinderen voor Pedreira;url=http://www.heartforbrazil.com/modules/content/content.php?id=101;");
aI("text=Kijk zelf maar;url=http://www.heartforbrazil.com/modules/content/content.php?id=102;");
aI("text=Wij zijn er geweest...;url=http://www.heartforbrazil.com/modules/content/content.php?id=104;");
aI("text=Sponsor een kind;url=http://www.heartforbrazil.com/modules/content/content.php?id=99;");
aI("text=Onze sponsors;url=http://www.heartforbrazil.com/modules/content/content.php?id=100;");
aI("text=Contact;url=http://www.heartforbrazil.com/modules/content/content.php?id=93;");
aI("text=Gastenboek;url=http://www.heartforbrazil.com/modules/content/content.php?id=97;");
aI("text=Nieuwsbrief;url=http://www.heartforbrazil.com/modules/content/content.php?id=94;");
aI("text=Links;url=http://www.heartforbrazil.com/modules/content/content.php?id=96;");
aI("text=test menu;showmenu=testmenu;");

All works great except for the last item. When showmenu is present, the subimage should also be visible. Well the subimage is visible, but the bgimage is not shown anymore. And I don't understand why?

I hope some does know what I'm doing wrong.

My test script can be found at : http://www.heartforbrazil.com/test.htm

[John]

Ruth has passed this up to Milonic directly.

[Andy]

Hi,

The problem is related to your CSS, you have this:

Code: Select all

TR {
	FONT-SIZE: 12px; BORDER-LEFT-COLOR: #b34300; BORDER-BOTTOM-COLOR: #b34300; COLOR: #000000; BORDER-TOP-COLOR: #b34300; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffd7be; BORDER-RIGHT-COLOR: #b34300
}
TD {
	FONT-SIZE: 12px; BORDER-LEFT-COLOR: #b34300; BORDER-BOTTOM-COLOR: #b34300; COLOR: #000000; BORDER-TOP-COLOR: #b34300; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffd7be; BORDER-RIGHT-COLOR: #b34300
}
TABLE {
	FONT-SIZE: 12px; BORDER-LEFT-COLOR: #b34300; BORDER-BOTTOM-COLOR: #b34300; COLOR: #000000; BORDER-TOP-COLOR: #b34300; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffd7be; BORDER-RIGHT-COLOR: #b34300
}

and it is setting the background color to #ffd7be for all table cells. The menu uses table cells and is overwriting the background for the menu items that contain sub menus. if you remove the global properties the menu will start to work as expected.

[Buccaneer]

Thanks Andy I works perfectly.

But what puzzels me is the fact that it only happens when a submenu is present. On a single link it doesn't.

[Andy]

Thanks Andy I works perfectly.

But what puzzels me is the fact that it only happens when a submenu is present. On a single link it doesn't.

When an image is added to the menu it inserts a table that surrounds the whole menu item. Therefore the underlying HTML is quite different for a menuitem that contains an image to one that does not. That's why you see a big difference.