subimage and css problem

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:40

subimage and css problem

Poster: gzip
Dated: Thursday June 30 2005 - 22:41:30 BST

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:

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;
}

Poster: Ruth
Dated: Friday July 1 2005 - 0:25:59 BST

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

Code:

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

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

external css subimage bug?

Poster: gzip
Dated: Tuesday July 5 2005 - 20:12:12 BST

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:

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; }

Poster: Ruth
Dated: Wednesday July 6 2005 - 5:03:08 BST

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

Industrial Strength JavaScript and DHTML Menus

subimage and css problem

external css subimage bug?