Use of CSS on- & off class

[henrik@itide.dk]

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: Select all

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

[nbarth]

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: Select all

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

[nbarth]

Take a look at my post:

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

This is the next problem you will probably encounter.

Nicholas

[henrik@itide.dk]

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

[nbarth]

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: Select all

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

[Maz]

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

[nbarth]

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

[Maz]

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

maz

[henrik@itide.dk]

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