Use of on- and offstyle property

[henrik@itide.dk]

One again I have tried to use the on- & offclass at the site

http://www.dynaudioacoustics.com/Default.asp?Id=2542

It works fine except in MAC IE 5.1.2

Here it looks very bad on mouseover.

My style sheet looks like this:

Code: Select all

td.MenuOff
{
font-size:10px;
font-weight:bold;
font-family:verdana, arial, sans-serif;
color:#316E98;
padding: 0 8px  1px 8px;
white-space: nowrap;
}
td.MenuOn
{
font-size:10px;
font-weight:bold;
font-family:verdana, arial, sans-serif;
color:#ffffff;
padding: 0 8px  1px 8px;
white-space: nowrap;
}

div.SubMenuOff, div.SubMenuON, div.SubSubMenuOff, div.SubSubMenuON
{ 
    border-top: 1px solid #6A717C; 
    border-right: 1px solid #6A717C; 
    border-left: 1px solid #6A717C; 
} 

td.SubMenuOff, td.SubMenuON,td.SubSubMenuOff, td.SubSubMenuON  
{ 
    font-size: 10px; 
    font-family:Verdana, Helvetica, Arial; 
    font-weight: bold; 
    padding:3px 5px 3px 10px; 
    border-bottom: 1px solid #6A717C; 
} 

td.SubMenuOff,td.SubSubMenuOff  
{ 
    color:#316e98;
    background-color: #959BA6;
} 

td.SubMenuON,td.SubSubMenuON  
{ 
    color:#ffffff;
    background-color: #A8AEBC;
} 

Can anybody help ?

A second question is the use of the subimage property together with on- and offclass. As you can see at

http://www.dynaudioacoustics.com/Default.asp?Id=2540

the style on the submenus is totally messed up at mouseover. I use the same stylesheet as before.

Any help on that ?

I have tried to fix the problem by using the style sheet by adding the following:

Code: Select all

#menu3 td.SubMenuOff,#menu3 td.SubSubMenuOff,#menu3 td.SubMenuON,#menu3 td.SubSubMenuON    
{ 
    background: #959BA6 url(http://www.dynaudioacoustics.com/AjrGfx/DYN_menu.gif) no-repeat right;
} 

But It only works if all the items in the submenus has submenus.

Any help on that ?

A last thing: It would be nice with an example at milonic.com of the use of on- and offclass

Thanks

Henrik

[Maz]

I'm probably more lost than you are, I did post a while back the placements of things like subimage and item, something like tr tr td or tr td td. Apparently there is something with Netscape that shows you the tree.

There are two border bottoms one for subimage and one for the line item to avoid getting 2 borders you have to use borderstyle for pixels, if you use pixels anywhere else you are giving border to both.

The problem then is how to get on and off, I'm on mac ie 5.1.7 and can't figure it out.

Please post if you solve it.

Thanks
maz

[henrik@itide.dk]

Hi maz

I will do that if that happens I hope that Andy soon will make an example at milonic.com with the use of on- / offclass and some explanation of the structure of the menu, so it is easier to style the menu with a stylesheet.

A last thing: I wrote that my first problem was an MAC IE 5.1.7. It was wrong It is MAC 5.2.3 OSX. Sorry !

Thanks

Henrik

[Maz]

I have another question just incase there is a better way to get my border bottom, how do you write a css style in style?

I remember seeing something like this, but this is incorrect:

anystyle=\"type:value;\";

Thanks,
maz

[Ruth]

I'm not sure why you have the DIV.[menu style codes] or TD.[menustyle codes] in the style sheet and why they are repeated? I notice they are .asp webpages and don't know if that would have something to do with it. But, it's almost as if you are mixing the page style you want for the td and div with the menu style code. Anyway, using the color coding and such you have in the stylesheet and then inlcuding the background image you wanted, here is a link to see if that is how you want it to be in the submenu to which I think you are referring [the one with thePassive Near-fields/Active Near-fields/Passive midfields & main monitors etc] and in the related subsubmenus. It will throw an error to do with your init script thing because I left out the cookies.js file and the ajrScriptToolBox.js.

LINK REMOVED

Here's another webpage, based on the fix you showed which doesn't show any change in bgcolor or fontcolor between the on and off menus. LINK REMOVED

I've tested it on Netscape6,7 and Opera 6,7 and IE5.0 but I'm on a PC so I don't know what happens on a mac. [it won't work in netscape 4 level browsers which don't read on/off class

You'll need to look at the style sheets for each page for the changes from the div and td to specified classes which should render across the pages as long as the coding you have in the menu coding that shows on the page you gave is on all the pages.

Code: Select all

.AllSubMenusOff, .AllSubMenusOn, .specialsubmenuOff, .specialsubmenuOn, . specialsubsubmenuOff, .specialsubsubmenuOn 

and on the webpages on which I had to make some additions to the upper section where you define the styles for different menus, and then in the submenu and subsubmenus to which those changes referred. I'm not sure this is what you want, mainly because I don't know the why for the repeating of the DIV and TD with the menu on/off class codes. Hope this helps.

Ruth

[henrik@itide.dk]

Hi Ruth

I gave up using the on- & offclass. As you can see at

http://www.dynaudioacoustics.com

I only use the style properties and gif-images to get the wanted padding. I couldn't get the padding style property to work in some browsers.

I also use RC9 because RC30 is too slow in some Mac Browsers.

Thanks for your help

Henrik

[henrik@itide.dk]

Hi Maz

Do you have an example, where you want/have tried to use the inline css style ?

Henrik

[Maz]

No, I gave up, someone told me the css with the menu was sending Netscape into quirks mode.

As yet, I still haven't got a bottom-border on and off on the main menu with a subimage.

Warm regards,
maz

my link is always -www- below.

[Maz]

I'll take another look to see what we have:

bordercolor Sets the Border Color for any global Style. All valid HTML colornames or hex values can be used here. Note that the hash is needed for all hex value definitions.

bordercolor="#c5c5c5";

borderstyle Sets the Border Style for any global Menu Style. All valid CSS 1 and CSS 2 values can be declared for stylename.borderstyle. Examples are: solid, dashed & dotted.

borderstyle="solid"; (all valid css? css border-bottom 4px will work, anything else I get an error)

borderwidth Sets the Border Width for any global menu style. Values are declared as pixels unless otherwise specified. Any valid measurement types can be defined, examples are px, pt & em.

borderwidth="4px";

offborder Sets the Mouse Off Border Style for any global menu style. The offborder property is used to declare the border width, style and color for each menu item in the mouse off state. Valid CSS parameters for setting borders must be used for this property. An example of a valid CSS border declaration is offborder="1px solid #aaaaaa";. This will enable a 1 pixel, solid gray border for each menu item in the mouse off state. This parameter can also be declared in each menuitem.

I can replace all of the above with:

offborder="4px solid #c5c5c5";

onborder="4px solid #ff0033";

but borderstyle is the only one that will allow me to define border-bottom

then off and onborder don't work.

Regards,
maz

[Hergio]

Can I see a copy of the code you had before you abandoned your onclass and offclass? Because as you said, looking at your code now there is no sign of onclass and offclass.

So you know, you should be setting classes by td.subMenuXX because that may not be the way the menu uses your classes. Just make your styles like .myCssStyle{ ... } and then in the menu have it say onClass=myCssStyle and leave it at that. Dont get the td's all into the mix. I have been away from the menu for awhile and I dont know if thats the way its supposed to go now, but last time I checked, it wasnt.

[Maz]

onclass offclass gives me 2 border bottoms, one under the subimage and one under subimage and menuitem. Only by using borderstyle do I get one border-bottom, but onclass won't work with it.

borderstyle="miloborder";

.miloborder{
border-bottom: 4px and/or solid

is how I got one bottom border.

This would be nice
onborderstyle="border-bottom: 4px solid #c5c5c5"

In this example there is a style:
aI("text=`<form style=\"prop:val;\"><input name=txt></form>`;");

Why can't I do something like this within the menu style?
I've tried only to get an error.

maz