onclass & text color problems

[austink]

I'm currently using version 5.719.

When I embed these commands into my JavaScript, I'm easily able to switch background and text colors when mousing over a menu item:

Code: Select all

onbgcolor="#000000";
oncolor="#D2B48C";
offbgcolor="#D2B48C";
offcolor="#000000";

When doing this, the menu and sub-menu items appear as I'd like them to, with a tan background and black text, and those colors get inverted when i mouse over a menu item.

However, I need to migrate all colors to my stylesheet, so I replace the above four lines with these two lines when creating a menu style:

Code: Select all

onclass="mainmenuon";
offclass="mainmenuoff";

and inside my CSS file, I have the following declaration:

Code: Select all

/* When someone does a mouse-over an item on the "new" menu. */
.mainmenuon {
   color: #D2B48C;
   background-color: #000000;
   font-size: 8pt;
   font-family: Arial;
   text-decoration: none;
}

/* When someone does a mouse-out an item on the "new" menu. */
.mainmenuoff {
   color: #000000;
   background-color: #D2B48C;
   font-size: 8pt;
   font-family: Arial;
   text-decoration: none;
}

With this, the main menu items appear as I'd like them to (tan background, black text when not active, and inverted colors when mousing over them), however, the actual menu items do not. The problems are:

1. when an actual link is not highlighted (mouse-over), the text appears red and not black.

2. when i mouse-over the menu item, the background color changes to black, but the link text remains red.

I've tried what seems like a million combinations and permutations of stylesheet and menu creation changes, all to no avail.

Anyone have any suggestions?

For what it's worth, you can see this in action here - http://football17.myfantasyleague.com/2004/home/79090 and the relevant stylesheet is here - http://www17.myfantasyleague.com/fflnet ... /79090.css

[austink]

looking into this a bit further, i can get the desired behavior in the menu by commenting out the following colors from my CSS file:

Code: Select all

/* Hyperlinks */
A:link {
/*
   color: #556B2F;
*/
}

/* Visited Hyperlinks */
A:visited {
/*
   color: #B22222;
*/
}

however, that's not an acceptable solution to me, as I need to make the link colors different on the other parts of the page. is anyone able to shed some additional light on what changes I might need to make to my CSS file to explicitly force the colors of the links inside the menus to be a certain color?

[austink]

to summarize my question into it's most basic form:

What CSS do I need to use to give all non-mouse-over links (visited, unvisited, hover, active) in my menu black text/tan background (and inverted when mousing over them), yet links on all other parts of my page a different color?

[Ruth]

I'm not much of a css user but... as you have it set now, the a:link etc is a 'general' css class so it seems to be applying to all links. I think there is a way to put the links codes into the various classes you are using. I got this from the php css stylesheet

/* Admin & Moderator Colours MODification */

.admin,a.admin,a.admin:visited{color:#ffa34f}
.mod,a.mod,a.mod:visited{color:#006600}
a.admin:hover,a.mod:hover{color:#dd6900}

Isn't that putting in link colors that are specific to those classes? Again, I do not use much css so take it for what it's worth...which may not be much

Sorry I couldn't be more help.

Ruth

[austink]

that was it! thanks so much.

lesson learned:

the ".mainmenuon" and ".mainmenuoff" rules have less specificity than the "A:link" and "A:visited" rules. which I find non-intuitive, but hey, it works now, with the more-specific rules:

.mainmenuon, A.mainmenuon:hover, A.mainmenuon:link, A.mainmenuon:visited, A.mainmenuon:active {
and
.mainmenuoff, A.mainmenuoff:hover, A.mainmenuoff:link, A.mainmenuoff:visited, A.mainmenuoff:active {


thanks again!

[Ruth]

I believe for the most part the order is from general to specific. So, let's say you set

Code: Select all

<style type="text/css">
	body{font-size:16px;font-style:normal;font-weight:bold;line-height:18px;color:#FFCC66}
	.test{font-size: 12px;color:#6633FF}
	</style>

Anything you use the test class in, say <p class="test"> it will take the font-size and color you have listed but it will also take the style and line-height and font-weight you have in the body.

Ruth