Use of CSS on- & off class

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

Use of CSS on- & off class

Poster: henrik __at__ itide.dk
Dated: Monday October 27 2003 - 8:25:38 GMT

Hi

I am working on the site

http://recommended.itide.dk/?Id=4

On the above link I have not used CSS on- & offclass, but menu properties and DIV tags around the submenu items.

At

http://recommended.itide.dk/?Id=29

I have used CSS on-off classes but something goes wrong. My CCS styles looks like this

Code:

.MenuOffStyle
{
font-size: 10px;
font-family:Verdana, Helvetica, Arial;
font-weight: bold;
color:#ffffff;
TEXT-TRANSFORM: UPPERCASE;
background-color: #66761D;
text-align:center;
}

.MenuONStyle
{
font-size: 10px;
font-family:Verdana, Helvetica, Arial;
font-weight: bold;
color:#ffffff;
TEXT-TRANSFORM: UPPERCASE;
background-color: #66761D;
text-align:center;
}

.SubMenuOffStyle
{
font-size: 10px;
font-family:Verdana, Helvetica, Arial;
font-weight: bold;
color:#4b4b4b;
background-color: #b3bb8e;
border: 1px solid #66761d ;
padding-left:10px;
}

.SubMenuONStyle
{
font-size: 10px;
font-family:Verdana, Helvetica, Arial;
font-weight: bold;
color:#66761d;
background-color: #ffffff;
border: 1px solid #66761d ;
padding-left:10px;
}

In Safari and WIN IE6 the menu have a double padding-left and border is placed wrong to the left. In Mac IE5.2 the oncolor and border is wrong.

In the first example the borders are OK but with cssclass they get too thick.

What is wrong ?

Thanks

Henrik [/code]

Try this

Poster: nbarth
Dated: Monday October 27 2003 - 22:32:14 GMT

I have been working with onclass/offclass as well. I also am having some issues, however I know how to take care of this problem. The css classes need to be tied to the TD tag. So for example, the following should work...

Code:

td.MenuOffStyle
{
font-size: 10px;
font-family:Verdana, Helvetica, Arial;
font-weight: bold;
color:#ffffff;
TEXT-TRANSFORM: UPPERCASE;
background-color: #66761D;
text-align:center;
}

td.MenuONStyle
{
font-size: 10px;
font-family:Verdana, Helvetica, Arial;
font-weight: bold;
color:#ffffff;
TEXT-TRANSFORM: UPPERCASE;
background-color: #66761D;
text-align:center;
}

td.SubMenuOffStyle
{
font-size: 10px;
font-family:Verdana, Helvetica, Arial;
font-weight: bold;
color:#4b4b4b;
background-color: #b3bb8e;
border: 1px solid #66761d ;
padding-left:10px;
}

td.SubMenuONStyle
{
font-size: 10px;
font-family:Verdana, Helvetica, Arial;
font-weight: bold;
color:#66761d;
background-color: #ffffff;
border: 1px solid #66761d ;
padding-left:10px;
}

The reason this is happening is because the same style is applied both to the TR and TD tags when you use onclass/offclass, so the padding is doubled. Try this and let me know if it works.

Nicholas

The next problem

Poster: nbarth
Dated: Monday October 27 2003 - 22:35:08 GMT

Take a look at my post:

http://www.milonic.com/forum/viewtopic.php?t=2923

This is the next problem you will probably encounter.

Nicholas

Borders

Poster: henrik __at__ itide.dk
Dated: Tuesday October 28 2003 - 8:10:14 GMT

Hi Nicholas

Thanks for your help. It fixed the doubled padding problem and on background color in MAC IE 5.2.

Still problems with the borders. The borders are too thick between cells. I have tried to use border-collapse:collapse, but it didn't help.

Can you solve that too :?:

Thanks

Henrik

Hmm..

Poster: nbarth
Dated: Tuesday October 28 2003 - 21:57:47 GMT

What you should probably do is break the styles down even further and put a border on the DIV top/right/left and then put a border on the menu option or TD only on the bottom. Hope this works.

Nicholas

Example:

Code:

td.MenuOffStyle, td.MenuONStyle
{
    font-size: 10px;
    font-family:Verdana, Helvetica, Arial;
    font-weight: bold;
    color:#ffffff;
    TEXT-TRANSFORM: UPPERCASE;
    background-color: #66761D;
    text-align:center;
}

div.SubMenuOffStyle, div.SubMenuONStyle
{
    border-top: 1px solid #66761d;
    border-right: 1px solid #66761d;
    border-left: 1px solid #66761d;
}

td.SubMenuOffStyle, td.SubMenuONStyle
{
    font-size: 10px;
    font-family:Verdana, Helvetica, Arial;
    font-weight: bold;
    padding-left:10px;
    border-bottom: 1px solid #66761d;
}

td.SubMenuOffStyle
{
    color:#4b4b4b;
    background-color: #b3bb8e;
}

td.SubMenuONStyle
{
    color:#66761d;
    background-color: #ffffff;
}

Poster: Maz
Dated: Wednesday October 29 2003 - 2:57:48 GMT

I don't understand what you are doing, I tried

http://mercuryexposure.org/index.php?m=show_doc&pid=1

the horizontal menu should look like the single one on the left.

maz

Poster: nbarth
Dated: Wednesday October 29 2003 - 5:49:31 GMT

Maz,

What I have accomplished by doing the above is, create menus with only CSS properties from a style sheet by using the on/offclass property. It does work check out my link to the example menu I have made in the following post:

http://www.milonic.com/forum/viewtopic.php?t=2923

This makes the menus configurible by simply changing a style sheet rather than having to alter javascript. If you need more help let me know. This may not be for everyone, your menus may be too complicated to simply use a style sheet, however for people who would like to theme thier site this is perfect.

Nicholas

Poster: Maz
Dated: Wednesday October 29 2003 - 10:41:19 GMT

I get one 4px border-bottom underlining the text, in the on state I get another underlining text and the onsubimage.

maz

Dashed border

Poster: henrik __at__ itide.dk
Dated: Wednesday October 29 2003 - 15:08:27 GMT

Hi Nicholas

It worked ! Thanks a lot

If someone have a good idea to make the seperators dashed please let me know.

I tried to set the borderstyle to dashed, but color from the window behind can be seen. Is it possible with img ?

It should look like this.

Thanks

Henrik

Industrial Strength JavaScript and DHTML Menus

Use of CSS on- & off class

Try this

The next problem

Borders

Hmm..

Dashed border