Very slight CSS issue

[I, Brian]

I've just changed the design of my 2 larger (non-commerical) sites.

However, from the navigation menu I created, I'm getting a clash with the CSS of vBulletin - it's causing left-hand nav links to be underlined when I've tried to stipulate against that in their class description.

I don't know enough about this to sort it out. Essentially, I'm running the following code:

A.leftLink 
{ BACKGROUND-COLOR: #ffffff; 
BORDER-BOTTOM: #333333 1px solid; 
BORDER-LEFT: #ededed 1px solid; 
BORDER-RIGHT: #999999 1px solid; 
BORDER-TOP: #ededed 1px solid; display:block; 
COLOR: #000000; 
FONT-FAMILY: Arial, Helvetica, sans-serif;
display:block;
FONT-SIZE: 9px; PADDING-LEFT: 10px; 
TEXT-DECORATION: none } 

A.leftLink:hover 
{ BACKGROUND-COLOR: #dbdbdb; 
BORDER-BOTTOM: #ededed 1px solid; 
BORDER-LEFT: #999999 1px solid; 
BORDER-RIGHT: #ededed 1px solid; 
BORDER-TOP: #999999 1px solid; 
COLOR: #000000; 
TEXT-DECORATION: none } 

which is interfered with by the vBulletin CSS - I think this:

BODY A:link {
COLOR: #666666; TEXT-DECORATION: underline
}
BODY A:visited {
COLOR: #000000; TEXT-DECORATION: underline
}
BODY A:hover {
COLOR: #666666; TEXT-DECORATION: underline
}
BODY A:active {
COLOR: #666666; TEXT-DECORATION: underline
}

How can I ensure that my left-hand navigation links in the forum are not underlined?

You can see an example of how the left-hand nav menu normally looks here:

http://www.comparative-religion.com

compared to here:

http://www.comparative-religion.com/forum/index.php

which should illustrate the underline issue.

Apologies - I'm very much the trial and error person.

[DiDoKa]

A.leftLink {
BACKGROUND-COLOR: #ffffff;
BORDER-BOTTOM: #333333 1px solid;
BORDER-LEFT: #ededed 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ededed 1px solid; display:block;
COLOR: #000000;
FONT-FAMILY: Arial, Helvetica, sans-serif;
FONT-SIZE: 9px;
PADDING-LEFT: 10px;
TEXT-DECORATION: none <---- i think the problem is here, see it you forgot the ";"
}

also kick out:

BODY in front of all those BODY links and never forget the ";" at the end.

Should work.

[I, Brian]

Thanks for that - hm, still showing as underlined, though.

[DiDoKa]

mmhh funny, i tried it on my compu and it worked just fine, but i think i got the code right from your website and there it looks like this:

body a:link {
color: #666666;
text-decoration: underline;
}
body a:visited {
color: #000000;
text-decoration: underline;
}
body a:hover, body a:active {
color: #666666;
text-decoration: underline;
}


I kicked out all those bodies and seperated this:

body a:link {
color: #666666;
text-decoration: underline;
}
body a:visited {
color: #000000;
text-decoration: underline;
}
body a:hover, body a:active {
color: #666666;
text-decoration: underline;
}

Then i jumped to:
A.leftLink { BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #333333 1px solid; BORDER-LEFT: #ededed 1px solid; BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #ededed 1px solid; display:block; COLOR: #000000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 9px; PADDING-LEFT: 10px; TEXT-DECORATION: none }

A.leftLink:hover { BACKGROUND-COLOR: #dbdbdb; BORDER-BOTTOM: #ededed 1px solid; BORDER-LEFT: #999999 1px solid; BORDER-RIGHT: #ededed 1px solid; BORDER-TOP: #999999 1px solid; COLOR: #000000; TEXT-DECORATION: none }

and saw that the ";" was missing so i inserted that.

and right above that you got this:

.leftLinkHD {
BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; PADDING-LEFT: 12px; FONT-SIZE: 9px; BORDER-LEFT: #999999 1px solid; WIDTH: 100%; COLOR: #ffffff; BORDER-BOTTOM: #333333 1px solid; FONT-FAMILY: Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #808080; TEXT-DECORATION: none
}

also missing ";".

and then, i worked.

[BenANFA]

The missing ";" is not a problem if that is the last attribute in the style, however it is nad form to leave it out and does make it harder to maintain and add new attributes so you should put it in.

I notice that the main styles are set on the selector

A.leftLink 
{
 ...
}

I think vB style on a:link may be over riding this try changing the selector to

A.leftLink, A.leftLink:link
{
 ...
}

[I, Brian]

Thanks for the replies - though it does seem so far that it's a simple conflict that will be unresolved unless I'm able to modify the vB template CSS - and how it is applied - directly. I guess for the moment, underline it is.

Sincere thanks fot the replies, though.

[BenANFA]

You should have to settle for that, it is simply a matter of understanding how CSS prioritises the selectors and making sure it picks the one you want it too.

It was late last night but I will have another look at this now that I am awake and I have the cafine levels in my blood streem back to optimal levels

[BenANFA]

OK I've looked, what I said was more or less right. In your styles replace

A.leftLink { 
 BACKGROUND-COLOR: #ffffff; 
 BORDER-BOTTOM: #333333 1px solid; 
 BORDER-LEFT: #ededed 1px solid; 
 BORDER-RIGHT: #999999 1px solid; 
 BORDER-TOP: #ededed 1px solid; display:block; 
 COLOR: #000000; 
 FONT-FAMILY: Arial, Helvetica, sans-serif;
 display:block;
 FONT-SIZE: 9px; PADDING-LEFT: 10px; 
 TEXT-DECORATION: none;
}

with

A.leftLink, A.leftLink:link, A.leftLink:visited, A.leftLink:active { 
 BACKGROUND-COLOR: #ffffff; 
 BORDER-BOTTOM: #333333 1px solid; 
 BORDER-LEFT: #ededed 1px solid; 
 BORDER-RIGHT: #999999 1px solid; 
 BORDER-TOP: #ededed 1px solid; display:block; 
 COLOR: #000000; 
 FONT-FAMILY: Arial, Helvetica, sans-serif;
 display:block;
 FONT-SIZE: 9px; PADDING-LEFT: 10px; 
 TEXT-DECORATION: none;
}

All that is happening is that the vB styles are taking presidence where you have not supplied the extra pseudo classes for links link, :visited, :active). My change just specifically implements those classes (making them the same as the normal link) so that the vB classes no longer take effect because there is a more specific class available (which is how CSS is meant to work).