Having problem with CSS custom class?

Custom CSS class

[confusedxx]

I created a custom class for my main menu called "mainmenu" so I could make the links, hover and visited different from any links inside the main content of the page.

The problem I am having is on the a.mainmenu.link attribute. It seems to keep the hover propery correct but doesn't apply the font color to the text.

Here is a copy of the link:
<td background="../redblue2.gif" bgcolor="#EFEFEF" class="mainmenu"><a href="../links.php" class="mainmenu">Links</a></font></td>

The font is BLACK but this is what the CSS style has:
a.mainmenu {
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant: small-caps;

}
#FFFFFF is White

Can you help me find what I am missing?

[photon]

confusedxx--

Welcome to WebmasterWorld!

Try changing your CSS to use the pseudo class:

a:link.mainmenu

.

I can't test it at the moment. If that doesn't work, let us know and I'm sure someone else will be along shortly with the answer!

[BillPosters]

A pseudo-class a.mainmenu should work fine, but fwiw, the pseudo-class/classname combination should ideally be written:

a.mainmenu:link

i.e. not a:link.mainmenu

While photon's version may be acceptible to CSS2-compliant browsers, only the format shown in bold above is acceptible in both CSS1 and CSS2 and will validate in all CSS validators. So, you may as well play it safe and use the above 'most correct' method.

• The problem may alternatively be caused by the closing </font> tag that your using which appears not to have been opened. If it has, then the bad nesting may be throwing the browser.

• The final possibility (and most likely, imo) is that you are defining the a:link selector *after* the a.mainmenu selector in the css.
If so, it is likely that the a:link selector is overriding the a.mainmenu
Declare/move the a.mainmenu declaration to a position after the a:link and you should be ok.

[confusedxx]

Thank you for the welcome and responses. I will try the suggestions you gave!
The a.mainmenu is defined below the a.link class but I will look again at the order.
The CSS primer I read did not go into such details about pseudo and the order of the classes in the style sheet.

Is there a resource on the web you can point me to so I can begin to better understand these things?

Cheers

[mep00]

FWIW, you probibly should get rid of the <font> tag since it has been deprecated.

Also, for a menu, instead of a table, you could use the more logical <ul>.

There was an article at A List Apart [alistapart.com] called CSS Design: Taming Lists [alistapart.com] which I though was good.

Note: I'm not trying to start another argument on the "evils" of tables; I'm just pointing out an alternitive.

[IeuanJ]

Is it possible that you have declared a generic link later in the css, for example like this :

a.mainmenu {
color: #FFFFFF;
}

a {
color: #000000;
}

I have found in the past that as CSS assigns values sequentially, doing this could in fact cause CSS to ignore your first rule (mainmenu).

Try putting all generic definitions at the beginning of the document and then follow it with the more specific ones like this :

a {
color: #000000;
}

a.mainmenu {
color: #FFFFFF;
}

[confusedxx]

Thanks for the help guys. I read the articles suggested and modified the code. Here is what I have now for the link:

<td background="../redblue2.gif" bgcolor="#EFEFEF" class="mainmenu" ><a href="../index.htm">Home</a></td>

The problem I find now after testing it is, the link on the page displays the properties of
a:link in my CSS page.

It does not display the properties of "mainmenu"
I don't have just an a class defined.
Thanks again for the help.

Here is a sample of the stuff in the CSS page

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
color: #0000FF;
font-weight: bold;
text-transform: none;
font-variant: small-caps;
}
a:visited {
color: #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
font-variant: small-caps;
}

a:hover {
color: #000000;
font-size:12pt;
font-weight:bolder;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant: small-caps;
background-color: #FFFFFF;
}

a.mainmenu {
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant: small-caps;

}
a.mainmenu:link {
color: #FFFFFF;
text-decoration: none;
font-weight:bold;
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-variant: small-caps;
}
a.mainmenu:active {
color: #66FF00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-variant: small-caps;
}
a.mainmenu:hover{
color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
font-variant: small-caps;
background-color: ffc631;
}

[confusedxx]

correction to the above update. The mainmenu link takes the properties of a:link from the CSS but when i hover above it, it goes with the a.mainmenu:hover properties. This is really strange....

The a:link is defined before the a.mainmenu:link just like shown in the css sample above.

If you can shed light on my mistake, i would greatly appreciate it and be enlighted. I keep wondering where I am missing something.

Thanks.

[mep00]

Your applying the class to the cell, but not the anchor itself. You probibly need to apply the class to the anchor.

Additionally, always double and triple check spelling and semicolons. Typos have cost me untold hours in debugging.

[confusedxx]

Thanks everyone for your suggestions. It seems to work on the homepage now. I am still not sure what exactly was the root cause, but it probably was several errors combined.

Thanks again!

[g1smd]

Since you use the same family, size and variant in all entries you could compact your CSS by defining them under the generic:

a { ... }

instead. That would make the code a lot easier to follow.

That is, only quote for a:visited { ... } etc, stuff that is different to all of the other a:... selectors.

[g1smd]

Additionally, an ordering problem:

a.mainmenu:active { ... }
a.mainmenu:hover{ ... }

This should be:

a.mainmenu:hover{ ... }
a.mainmenu:active { ... }