subimage and css problem

[gzip]

My styles are in an external style sheet. I'm having a problem where the padding collapses when the subimage option is present, but is fine otherwise. How do I fix it?

see: http://beta.geog.ucsb.edu/ (under Academics)

Relevant JS & CSS Follows:

Code: Select all

with(subStyle=new mm_style()){
	offclass="submenu";
	onclass="submenuover";
	pageclass="submenupage";
	separatorcolor="#F6F7F9";
	separatorsize=1;
	subimage="/images/arrow.gif";
	subimagepadding=3;
}


.submenu,.submenuover,.submenupage{
	font-family:Verdana, Tahoma, Arial, helvetica, sans-serif;
	font-size:.9em;
	font-weight:normal;
	text-decoration:none;
	color:#4C65A8;
	padding:2px 4px;
	background-color:white;
}
.submenuover{
	background-color:#DEE4F1;
	color:#2A4386;
}
.submenupage{
	background-color:#F0F3F9;
}

[Ruth]

Since you are using css, you can put in a class

Code: Select all

.nosubimage{PADDING-RIGHT: 4px; PADDING-LEFT: 2px; FONT-WEIGHT: normal; FONT-SIZE: 0.9em; PADDING-BOTTOM: 2px; COLOR: #4c65a8; PADDING-TOP: 2px; FONT-FAMILY: Verdana, Tahoma, Arial, helvetica, sans-serif; BACKGROUND-COLOR: white; TEXT-DECORATION: none
}

and then in the item which doesn't have a subimage, in a vertical menu that has other items with submenus and images, you would code

Code: Select all

aI("text=Publications;onclass=nosubimage;offclass=nosubimage;");

Of course, you can name it what you want, I just use names that remind me what they are when I'm testing pages.

I don't know why that happens, but until it's fixed, this will work in IE, Netscape, Opera and Firefox.

EDIT: note that when I tried reversing it, that is putting a class for an item with a subimage when only one item in the menu had a subimage that would not work. I couldn't make the padding higher and get the text to shift over to match the non-subimage items.

Ruth

[gzip]

Thanks, that steered me in the right direction. I didn't realize I could apply classes to indivdual items. Rather than applying a class to the item with no subimage, I applied a class to the items *with* subimages so that they match the rest of the menu.

If I double the intended padding for the subimage items then it works fine. Is this just a bug in the code? If so it seems like an easy bug to squash!

Here's what I went with:

Code: Select all

with(milonic=new menuname("Academics")){
	style=subStyle;
	aI("text=Undergraduates;showmenu=undergrad;offclass=subimage;onclass=subimageover;");
	aI("text=Graduates;showmenu=grad;offclass=subimage;onclass=subimageover;");
	aI("text=Admissions;showmenu=admissions;offclass=subimage;onclass=subimageover;");
	aI("text=Research;showmenu=research;offclass=subimage;onclass=subimageover;");
	aI("text=Publications;");
}


.submenu,.submenuover,.submenupage,.subimage,.subimageover{
	font-family:Verdana, Tahoma, Arial, helvetica, sans-serif;
	font-size:.9em;
	font-weight:normal;
	text-decoration:none;
	color:#4C65A8;
	padding:2 4;
	background-color:white;
}
.submenuover,.subimageover{
	background-color:#DEE4F1;
	color:#2A4386;
}
.submenupage{
	background-color:#F0F3F9;
}

/*** Added these two classes to compensate the padding ***/
.subimage{ padding:4px 8px; }
.subimageover{ padding:4px 8px; }

[Ruth]

Hi,

To be real direct...I don't know if it's easy. I don't know what links to what, what affects what when something in the menu is changed. I've made a report so, if it's fixable I'm sure in the newer version it will get fixed.

Ruth