onclass/offclass issues. Please Help :(

Poster: nbarth
Dated: Thursday October 23 2003 - 2:47:13 BST

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


Here are the CSS classes...



If you need more information please let me know. I could even post screen shots.

Nicholas

Poster: Andy
Dated: Friday October 24 2003 - 10:13:14 BST



A URL of the problem would be better, get one over and I'll take a look.

Cheers
Andy

Thank you

Poster: nbarth
Dated: Friday October 24 2003 - 19:34:58 BST

Andy,

Here is a link to an example

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

Nicholas

Any Luck?

Poster: nbarth
Dated: Monday October 27 2003 - 19:23:21 GMT

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

Poster: Maz
Dated: Monday October 27 2003 - 23:05:29 GMT

<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

?

Poster: nbarth
Dated: Tuesday October 28 2003 - 0:32:44 GMT

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)



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

Figured it out

Poster: nbarth
Dated: Tuesday October 28 2003 - 2:26:57 GMT

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

Poster: Hergio
Dated: Wednesday October 29 2003 - 13:22:39 GMT

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?

Poster: Andy
Dated: Wednesday October 29 2003 - 13:38:41 GMT

Yeah, I want a copy of that too

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

Poster: 4viggo
Dated: Wednesday October 29 2003 - 14:42:35 GMT

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

regards
4viggo

Poster: Andy
Dated: Wednesday October 29 2003 - 16:19:47 GMT

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

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.

Poster: 4viggo
Dated: Wednesday October 29 2003 - 17:07:02 GMT

Thanks a lot Andy, I realy appreciate it.


regards
4viggo

Poster: Maz
Dated: Wednesday October 29 2003 - 21:39:06 GMT

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

div.tr or tbody?

Regards,
maz

Poster: nbarth
Dated: Wednesday October 29 2003 - 22:35:50 GMT

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

Poster: Maz
Dated: Thursday October 30 2003 - 15:11:00 GMT

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

Poster: nbarth
Dated: Thursday October 30 2003 - 20:32:49 GMT

maz,

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

Nicholas

Poster: Maz
Dated: Friday October 31 2003 - 2:43:54 GMT

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

Poster: nbarth
Dated: Friday October 31 2003 - 2:55:41 GMT

I will take a look.

Nicholas

Poster: Maz
Dated: Friday October 31 2003 - 16:28:56 GMT

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

Poster: Maz
Dated: Friday October 31 2003 - 17:21:25 GMT

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

Poster: nbarth
Dated: Friday October 31 2003 - 18:20:14 GMT

Great!

Sorry I wasn't quicker on my reply.

Nicholas

Poster: Maz
Dated: Friday October 31 2003 - 19:04:53 GMT

Still not over yet.

Border off works for 'home page' where there is no submenu but not where there is a submenu, there is no boder off until moused over then border on places lower, then border off comes on at this lower place where there is no submenu.

This is no treat

Poster: nbarth
Dated: Friday October 31 2003 - 19:16:20 GMT

Maz,

I will take a look at it, and see what I can do. Could you give me an example of a page with a third tier submenu. ( topmenu -> 2nd tier -> 3rd tier )

Nicholas

Poster: nbarth
Dated: Friday October 31 2003 - 19:26:44 GMT

Maz,

Would you mind coming up with a very simple example of your menus? This is just to save me a bit of time and help me diagnose your problem quicker. Make a page with one topmenu, one second tier menu, and a third tier menu stemming from the second tier. Also, include the css styles and proprietary javascript in the page itself, no imports other than the milonic files. Put the menu construction data (i.e menu_data.js) between script tags in the page as well.

Thanks,
Nicholas

Poster: Maz
Dated: Friday October 31 2003 - 21:12:49 GMT

Here are the styles:

div.xptopmainoff{
background: #ffffff;
border-bottom: 4px solid #c5c5c5;
}
div td.xptopmainoff{
font-size: 11px;
font-style: normal;
border-bottom: 4px solid #c5c5c5;
font-family: tahoma, verdana, sans-serif;
color: #6699ff;
padding-top: 1px;
}
div td td.xptopmainoff{
border: 0;
}
div.xtopmainon{
background: #ffffff;
border-bottom: 4px solid #c5c5c5;
}
div td.xptopmainon{
font-size: 11px;
font-style: normal;
border-bottom: 4px solid #ff0033;
font-family: tahoma, verdana, sans-serif;
color: #ff0033;
padding-top: 1px;
}
div td td.xptopmainon{
border: 0;
}

Here is the top part of the menu, one submenu, I took off submenu styles since it didn't make any difference.

_menuCloseDelay=500;
_menuOpenDelay=30;
_followSpeed=5;
_followRate=40;
_subOffsetTop=4;
_subOffsetLeft=0;
_scrollAmount=3;
_scrollDelay=20;

with(xptopmain=new mm_style()){
onclass="xptopmainon";
offclass="xptopmainoff";
pagecolor="#ff0033";
pagebgcolor="transparent";
subimageposition="left";
subimage="/template/main/images/xarrowdn.gif";
onsubimage="/template/main/images/xarrowdnon.gif";
subimagepadding="3px";
}

with(xptopsub=new mm_style()){
image="/template/main/images/xsubblank.gif";
headercolor="#ffffff";
headerbgcolor="#6666ff";
separatorcolor="#ffffff";
separatorsize="1";
high3dcolor="#f4f4f4";
low3dcolor="#c0c0c0";
pagecolor="#ff0033";
pagebgcolor="transparent";
pageimage="/template/main/images/xsubarrow.gif";
}

with(milonic=new menuname("xtopmenu")){
style=xptopmain;
alwaysvisible=1;
orientation="horizontal";
top=51;
left=130;
aI("itemwidth=75;itemwidth=1;url=#;image=/template/main/images/xpixel.gif;imagealt=skip menu;");
aI("itemwidth=75;text=Home Page;url=/index.php?m=show_doc&pid=1;status=home;");
aI("itemwidth=75;text=About Us;showmenu=aboutus;status=submenu about us;");
aI("itemwidth=75;text=Knowledge;showmenu=knowledge;status=submenu knowledge;");
aI("itemwidth=75;text=Legislation;showmenu=legislation;status=submenu legislation;");
aI("itemwidth=75;text=Research;showmenu=research;status=submenu research;");
aI("itemwidth=75;text=Resource;showmenu=resource;status=submenu resource;");
}

with(milonic=new menuname("aboutus")){
style=xptopsub;
bgimage="/template/main/images/xsubback.gif";
aI("text=GuestBook;url=/guestbook.php;status=link our GuestBook;overimage=/template/main/images/xsubarrow.gif;");
aI("text=About Mercury Exposure;url=/index.php?m=show_doc&pid=3;status=link our organization;overimage=/template/main/images/xsubarrow.gif;");
aI("text=Canary Production;url=/index.php?m=show_doc&pid=30;status=link canary production;overimage=/template/main/images/xsubarrow.gif;");
aI("text=Donors;url=/index.php?m=show_doc&pid=8;status=link our donors;overimage=/template/main/images/xsubarrow.gif;");
aI("text=Sponsors;url=/index.php?m=show_doc&pid=10;status=link our sponsors;overimage=/template/main/images/xsubarrow.gif;");
aI("text=Volunteers;url=/index.php?m=show_doc&pid=27;status=link our volunteers;overimage=/template/main/images/xsubarrow.gif;");
aI("text=Policy and Disclaimer;url=/index.php?m=show_doc&pid=7;status=link policy and disclaimer;overimage=/template/main/images/xsubarrow.gif;");
aI("text=Support Us;url=/index.php?m=show_doc&pid=43;status=link support us;overimage=/template/main/images/xsubarrow.gif;");
aI("text=Email Us;url=help __at__ mercuryexposure.org?Subject=Mercury%20Exposure%20Website;status=opens email;overimage=/template/main/images/xsubarrow.gif;");
}

The link is at the bottom.

Poster: nbarth
Dated: Friday October 31 2003 - 22:01:25 GMT



maz,

When you say "the bottom", the bottom of what? I looked at the bottom of the post and there wasn't a link to a simple example. I really need to play around with a simple example. The problem is not obvious to me as of yet, however if I try a couple of things I may be able to help.

Nicholas

Poster: nbarth
Dated: Friday October 31 2003 - 22:06:59 GMT

maz,

I am sorry, the -www- link is working, however I really would like to look at a more scaled down page. A page as I described in an earlier post.



That way I don't have to sift through everything to get at what is important.

Nicholas

Poster: Maz
Dated: Sunday November 2 2003 - 9:42:57 GMT

Sorry its too much to set up another menu, I gave up.

To set it up simply draw a 4px line then match a menu with and without a submenu with a 4px bottom border.

I can tell you that to hide the subimage border its div tr td td
Also to stop the difference between a menu without a submenu border being higher than those with submenu is div tr td and div tr tr td

But trying to get an off border to switch with an on border won't work.

The off border will only show up after the on border. Unless the border is moved to the tr position, then the row jumps down with td on.

The only other thing I could think of, was to use a:active tags on the borders, something like a.topmenuoff:active a.topmenuon:hover

My graphic borders are too heavy and often run down the page because of height, I'll have to come up with something else.

Regards
maz