Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:49

onclass & text color problems


Poster: austink
Dated: Wednesday March 30 2005 - 17:59:19 BST

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:
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:
onclass="mainmenuon";
offclass="mainmenuoff";


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

Code:
/* 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/fflnetdynamic2004/79090.css


Poster: austink
Dated: Wednesday March 30 2005 - 18:27:01 BST

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


Poster: austink
Dated: Thursday March 31 2005 - 16:18:03 BST

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?


Poster: Ruth
Dated: Thursday March 31 2005 - 18:12:51 BST

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


Poster: austink
Dated: Thursday March 31 2005 - 18:47:26 BST

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!


Poster: Ruth
Dated: Thursday March 31 2005 - 21:10:43 BST

I believe for the most part the order is from general to specific. So, let's say you set
Code:
<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