onclass/offclass issues. Please Help :(

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
User avatar
nbarth
Super Advanced
Super Advanced
Posts: 41
Joined: Tue Jul 29, 2003 11:03 am
Location: Minnesota
Contact:

onclass/offclass issues. Please Help :(

Post by nbarth »

Well, I think I have read enough posts to be fairly sure this question has not been asked before.

My question is this...

I am using the onclass/offclass properties in my menu styles. I have a specific look and feel I would like to atain with the menus. Including varying margins on the top, bottom, left, and right sides. I felt only CSS could give the flexibility I needed. Currently, I am using the onclass/offclass, bordercolor, and subimage properties in the menustyles (see below). I am completely happy with the look of the menus, until a submenu occurs. The submenu option looks fine at first, however after the cursor is dragged over the menu option, the margins/padding I have defined are doubled and the menu option is out of place. I believe I have tried everything, short of editing code, to fix the problem I am having. Could anyone help me to discover a way to fix this issue? After researching the problem, I found that the menu options are in a table inside a div. If a submenu image is defined another table is place in the cell and divided into two cells one for the text, the other for the image. When the code applies the onclass/offclass after initally generating the menus, it applies the class to the cells in the subordinate table as well. Is this a bug? Could it be fixed? CSS capabilities give the milonic menus a distinct advantage over every other javascript menuing system.

Here are my defined styles...

Code: Select all

with(TopMenuStyle=new mm_style()){
       onclass = "topmenustyleon";
      offclass = "topmenustyleoff";
}

with(TopSubMenuStyle=new mm_style()){
       onclass = "topsubmenustyleon";
      offclass = "topsubmenustyleoff";
   bordercolor = "#444444";
      subimage = "/art/default/indicator.submenu.gif";
}
Here are the CSS classes...

Code: Select all

.topmenustyleoff {
    font-size: 11px;
    font-style: normal;
    color: #ffffff;
    padding: 3px 7px 4px 7px;
}
.topmenustyleon {
    font-size: 11px;
    font-style: normal;
    color: #f6df99;
    padding: 3px 7px 4px 7px;
}
.topsubmenustyleon {
    font-size: 11px;
    font-style: normal;
    color: #f6df99;
    padding: 2px 10px 2px 10px;
    background-color:#5b5b5b;
}
.topsubmenustyleoff {
    font-size: 11px;
    font-style: normal;
    color: #ffffff;
    padding: 2px 10px 2px 10px;
    background-color:#5b5b5b;
}
If you need more information please let me know. I could even post screen shots.

Nicholas :|
User avatar
Andy
Milonic
Milonic
Posts: 3308
Joined: Sun May 19, 2002 8:23 pm
Location: Menu Developer
Contact:

Post by Andy »

If you need more information please let me know. I could even post screen shots
A URL of the problem would be better, get one over and I'll take a look.

Cheers
Andy
User avatar
nbarth
Super Advanced
Super Advanced
Posts: 41
Joined: Tue Jul 29, 2003 11:03 am
Location: Minnesota
Contact:

Thank you

Post by nbarth »

Andy,

Here is a link to an example

http://login2.call-scheduler.com/menu/example.html

Nicholas
User avatar
nbarth
Super Advanced
Super Advanced
Posts: 41
Joined: Tue Jul 29, 2003 11:03 am
Location: Minnesota
Contact:

Any Luck?

Post by nbarth »

Andy,

I realize you are very busy. I was just wondering if you had a chance to look at the url I posted? I really appreciate the help. I will be able to convince our staff to convert to this menu system and purchase a license, if I can just get this to work.

Thanks,
Nicholas
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

<div style="position:fixed;top:0px;left:0px;height:100%;width:100%;">
<table width="100%" height="20" cellpadding="0" cellspacing="0" border="0">
<tr style="background-color:#5b5b5b;">
<td width="100%" height="20">&nbsp;</td>
</tr>
</table>
<div>

Nothing is showing, you havn't closed your div. The menu is not in the table as per your other post I was reading. Then you couldn't place the menu in a table and a div as far as I know.

However, I did try doing what you are doing unsuccessfully. I got double borders, since I was using borders in the table underneath I assumed that it was impossible to place a border on top of a css border without one being offset, but I could be wrong.

Some browsers have inline borders and outline borders, my browser does not, maybe its introduced in js, I don't know.

I'm using a background image for my thick border underline and a table border to make it look 100%.

I took off css borders because it looked so bad.

maz
User avatar
nbarth
Super Advanced
Super Advanced
Posts: 41
Joined: Tue Jul 29, 2003 11:03 am
Location: Minnesota
Contact:

?

Post by nbarth »

maz,

Thanks for the help I changed that so now it is a closing DIV tag rather than an opening DIV tag.

I have included a screen shot of the DOM inspector to better demonstrate my issue. See below... (More after screen shot)

Image

What is happening is that the offclass is being applied to the internal TD (id = tr4) element on load, but when the onclass is applied it is being applied to the parent TD (id = el4). Since CSS is hierarchial it then applies the class and padding defined by that class to both TD elements ( el4 and tr4 ) respectively. Hope this helps to understand the issue more clearly. Any suggestion would be greatly appreciated.

Nicholas
User avatar
nbarth
Super Advanced
Super Advanced
Posts: 41
Joined: Tue Jul 29, 2003 11:03 am
Location: Minnesota
Contact:

Figured it out

Post by nbarth »

Well folks,

I figured it out. Here is an example...

http://login2.call-scheduler.com/menu/example.html

If anyone needs help figuring this out let me know by posting a reply. I will watch this thread for a couple days.

Have fun with this,
Nicholas :D
User avatar
Hergio
Milonic God
Milonic God
Posts: 1123
Joined: Wed Jun 12, 2002 7:46 pm
Location: Rochester, NY

Post by Hergio »

nbarth, if you don't mind my asking, what operating system are you using? Also, that DOM inspector, that looks mighty neat to have for troubleshooting and for just wanting to know how something is working. Where'd you get it?
Dave Hergert
Software Engineer
"Helping to make the menu better, one :?: at a time."
User avatar
Andy
Milonic
Milonic
Posts: 3308
Joined: Sun May 19, 2002 8:23 pm
Location: Menu Developer
Contact:

Post by Andy »

Yeah, I want a copy of that too :D

I know that Konquerer has something like that built in, but it would be good to have in on Windoze too.

I'd personally like to switch to Unix as my main desktop but I unfortunately I have to go with the masses.

Cheers
Andy
User avatar
4viggo
Super Advanced
Super Advanced
Posts: 56
Joined: Wed Jun 12, 2002 12:03 pm
Location: Norway

Post by 4viggo »

The DOM inspector is built in tool of Mozilla.
Mozilla now runs on several platforms including windoze

regards
4viggo
User avatar
Andy
Milonic
Milonic
Posts: 3308
Joined: Sun May 19, 2002 8:23 pm
Location: Menu Developer
Contact:

Post by Andy »

Oh yeah, so it is - I always normally remove stuff like that from the install process. Probably why I never found it before :oops:

Oh BTW 4viggo, I got your email and I'll get a reply over as soon as I get a minute. I'll also have a scout round for some info that might help.

I'm maybe not the best person to ask though as I personally dropped out.

Cheers
Andy.
User avatar
4viggo
Super Advanced
Super Advanced
Posts: 56
Joined: Wed Jun 12, 2002 12:03 pm
Location: Norway

Post by 4viggo »

Thanks a lot Andy, I realy appreciate it.
:D

regards
4viggo
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

So how do I grab the border for the main menu to get behind the subimage?

div.tr or tbody?

Regards,
maz
User avatar
nbarth
Super Advanced
Super Advanced
Posts: 41
Joined: Tue Jul 29, 2003 11:03 am
Location: Minnesota
Contact:

Post by nbarth »

maz,

Not sure what you mean by that, but I am assuming you are refering to background colors, or something. The subimage is stored in a table inside the standard menu table TD so I would suggest using the TR tag. The key is to only put CSS padding or margin properties on the DIV. and nothing else. Use the menu properties to do that.

BTW I am using linux with Mozilla 1.4 installed, the Netscape 7.1 equivalent.

Nicholas
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Nicholas,

thank you for figuring this all out, I'm going to give it another try follwoing your instructions... when I catch up later today.

Regards
maz
User avatar
nbarth
Super Advanced
Super Advanced
Posts: 41
Joined: Tue Jul 29, 2003 11:03 am
Location: Minnesota
Contact:

Post by nbarth »

maz,

Hope it works for you, if not let me know.

Nicholas
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Can't do it, tried every variety of possibility, I still get 2 border-bottom: 4px solid #ff0033;

If you look at -www- below, the grey line is a css menu under the js menu.

The tools menu is what it should look like, the tools menu uses bgimage.

The rest of the menu without the grey underline is where I removed the images and left off grey border (because it gets confusing) to see what is taking effect. If you mouse over it will turn red. But I get 2 underlines.

I took off all padding and margins just to see what is happening.

I get the same double or triple underline every time.

Any suggestions?

TIA

maz
User avatar
nbarth
Super Advanced
Super Advanced
Posts: 41
Joined: Tue Jul 29, 2003 11:03 am
Location: Minnesota
Contact:

Post by nbarth »

I will take a look.

Nicholas
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Does anyone know how to define or separate border-bottom from 'text border' and 'text and subimage border'?

Either I get no border or double border, one with subimage and one without.

TIA
maz
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

OKAY!

I think I have it, now I have to see if I can get it all working together.

div.on
div.off
div td.on: border 4px solid #
div td td.on: border 0

Regards
maz
Post Reply