some hyperlinks not affected by CSS

[banderberg]

Hello, I am having a problem. I have a CSS file defined as follows:

<style type="text/css">
.mainNav a:link {
/* Applies to unvisited links in class mainNav */
text-decoration: none;
font-weight: normal;
background-color: transparent;
color: white;
}
.mainNav a:visited {
/* Applies to visited links in class mainNav */
text-decoration: none;
font-weight: normal;
background-color: transparent;
color: white;
}
.mainNav a:hover {
/* Applies to links under the pointer in class mainNav */
text-decoration: underline;
font-weight: normal;
background-color: transparent;
color: white;
}
.mainNav a:active {
/* Applies to activated links in class mainNav */
text-decoration: underline;
font-weight: normal;
background-color: transparent;
color: white;
}
</style>


I have a table full of hyperlinks so I define the table with its class equal to "mainNav".

Most of the hyperlinks appear as white, but a few appear as regular blue underlined hyperlinks. They're all part of the same table, and there's no reason I can see in my html why they would not obey the CSS.

Is this common? What could be the problem?

Thanks!

[the tree]

Can we take a peek at the html just in case? A link would be nice.

[banderberg]

http://www.swoobs.org

It's a website I'm working on for a client, and the links on the lower left hand column you can see are mostly white but a few are in blue.

The HTML will be ugly because i'm using server side includes..

thanks :)

[the tree]

Urm yeh, you really need to clean up your html, with that many mistakes, it's no wonder that it's coming out buggy.

Also, less with the tables yeh?

[banderberg]

I don't know a better way to do layout.

[banderberg]

I fixed all the HTML up.

I'm still using tables, and I plan to replace them with CSS in the future..

but for now..

the little CSS I am using isn't working fully.. still, even after fixing all the HTML.

Most of the hyperlinks are white as they should be according to my CSS, but a few are blue.

The CSS file says all links should be white regardless of their visited, unvisited state, and should be underlined when user hovers.

Please help!

[Triumph]

...see below

[Triumph]

Two problems:

<link rel="stylesheet" href="/menuhyperlinkstyle.css" type="text/css" />

should most likely be:
<link rel="stylesheet" href="menuhyperlinkstyle.css" type="text/css" />


and

<style type="text/css">
.mainNav a:link {
/* Applies to unvisited links in class mainNav */
text-decoration: none;
font-weight: normal;
background-color: transparent;
color: white;
}
.mainNav a:visited {
/* Applies to visited links in class mainNav */
text-decoration: none;
font-weight: normal;
background-color: transparent;
color: white;
}
.mainNav a:hover {
/* Applies to links under the pointer in class mainNav */
text-decoration: underline;
font-weight: normal;
background-color: transparent;
color: white;
}
.mainNav a:active {
/* Applies to activated links in class mainNav */
text-decoration: underline;
font-weight: normal;
background-color: transparent;
color: white;
}
</style>
should be:

a:link {
/* Applies to unvisited links in class*/
text-decoration: none;
font-weight: normal;
background-color: transparent;
color: white;
}
a:visited {
/* Applies to visited links in class*/
text-decoration: none;
font-weight: normal;
background-color: transparent;
color: white;
}
a:hover {
/* Applies to links under the pointer in class*/
text-decoration: underline;
font-weight: normal;
background-color: transparent;
color: white;
}
a:active {
/* Applies to activated links in class*/
text-decoration: underline;
font-weight: normal;
background-color: transparent;
color: white;
}

[Triumph]

table.mainNav a:link, table.mainNav a:visited, table.mainNav a:hover and table.mainNav a:active will also work

[Triumph]

Also, here is a more efficient way to write your CSS:


a {
text-decoration: none;
font-weight: normal;
background-color: transparent;
color: white;
}

a:hover, a:active {
text-decoration: underline;
}

[banderberg]

Thanks a bunch Triumph, I will give those a try.

It looks like your revised CSS would affect the entire page, not just tables with class "mainNav".

Okay, will try.. thanks!

[Triumph]

Originally posted by banderberg
It looks like your revised CSS would affect the entire page, not just tables with class "mainNav". It will. I didn't see any other links so I didin't think it appropriate but just in case I did post this:
Originally posted by Triumph
table.mainNav a:link, table.mainNav a:visited, table.mainNav a:hover and table.mainNav a:active will also work :)