css hyperlink overpowering onclass offclass of menu

[stuartharden]

We have a site where the menu items are onclass offclass as follows:

.mmenuOff1
{
background: #660000;
color: #ffffff;
font-style: normal;
font-weight: normal;
font-family: arial,tahoma,serif;
font-size: 13px;
margin: 0px;
padding: 3px;
text-decoration: none;
}

.mmenuOn1
{
background: #660000;
color: #ffffff;
font-style: normal;
font-weight: normal;
font-family: arial,tahoma,serif;
font-size: 13px;
margin: 0px;
padding: 3px;
text-decoration: underline;
}

which works well, until I add the desired default hyperlink information:

A:link {
color: #660000;
text-decoration: none;
}

A:visited {
color: #660000;
text-decoration: none;
}

A:active {
color: #660000;
text-decoration: none;
}

A:hover {
color: #660000;
text-decoration: underline;
}

When I add the latter, the text color and decoration overpowers the former, thus making the menu have same color background as text.

I have tried to return the text color and decoration to the milonic menu (have to keep the size in css as otherwise it is always too large), but the concept of "link" appears to still be overwriten by the css "link" instructions.

http://www.ciclt.net/sn/clt/gmc/home.aspx
http://www.ciclt.net/sn/clt/gmc/home2.aspx

What am I missing!!

Thanks-
Stuart

[Ruth]

Hi,

I don't know since I can't get to either of those links, I just get

Code: Select all

Server Error in '/sn' Application.
--------------------------------------------------------------------------------

Object reference not set to an instance of an object. 

And a lot more error explanation lines.

Ruth

[stuartharden]

Sorry, after I logged out and tried the link, I saw a mistake in the code which led to the errors

Should be ok now. -S

[Ruth]

Hi,

Try putting everything back in the menu file and use rawcss for the fontsize.

Code: Select all

with(menuStyle=new mm_style()){
offbgcolor="#660000";
offcolor="#ffffff";
onbgcolor="#660000";
oncolor="#ffffff";
padding=3;
fontweight="normal"; 
fontfamily="arial,tahoma,serif";
align="center";
subimage="arrow-white.gif";
overfilter="Fade(duration=0.2);Alpha(opacity=100);Shadow(color='#777777', Direction=135, Strength=5)";
outfilter="randomdissolve(duration=0.3)";
rawcss="fontsize:13px";
}

Then put the a: link codes in the css. They shouldn't affect the menu this way.

Two things to note.

1.Things such as a: link, if you style the menu in css and then use those generic codes they will overwrite your class in the menu. If you set them up as classes instead for your pages, then the menu classes are not affected by them. Or if you set up the style in the menu itself instead of css they do not affect the menu.

2. You can do whatever you want, even in css, to set font sizes but only IE, and I'm not sure on the newer versions, only IE doesn't allow a user to over ride the author's css styling unless the user has it set in accessibility to allow those that need larger fonts to set their browser font size to be dominant. In the other browsers the generic View/text/fontsize buttons over ride the author's set ups.

One final thing, fontstyle in the menu is either bold or italic. If you don't want either of those then just leave it out, though I guess putting in fontstyle="normal"; won't do anything since in css if you don't list a font style the default is normal. Hope this helps. Sorry I don't know how to over ride the generic a: link codes from the style sheet except by styling the menu in the data file or if you must style it in css, then you need to do the a: links as classes or ids for your pages.

Ruth