2 replies [Last post]
trhaynes
Offline
newbie
Last seen: 17 years 15 weeks ago
Timezone: GMT-3.5
Joined: 2003-10-15
Posts: 5
Points: 0

http://trhaynes.commscentral.net:8000/cuba2/

The CSS is there on the site - link styles are defined towards the bottom. The navigation links (in a .navright td) should be dark grey on a:link, a:visited, and a:active and then light grey on a:hover. The .footer should be the exact same, but I put it as a separate entity because I didn't know how to link them together.

The body content (all in a .body td) should be light orange on a:link, a:visited, and a:active and then dark orange on a:hover.

Whats happening I think is that the a:link styles for the body are going onto the a:visited ones for .navright and .footer. Very wierd - can someone help me out?

*edit - and here is the CSS in the post - maybe it will be colored and easier to read?

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-image: url(images/bg.gif);
background-repeat: repeat;
margin: 0px;
}
td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
.topheader {
background-image: url(images/top_header.gif);
background-repeat: no-repeat;
}
.left {
background-image: url(images/left_sliver.gif);
background-repeat: repeat-y;
background-position: right;
}
.right {
background-image: url(images/right_sliver.gif);
background-repeat: repeat-y;
background-position: left;
}
.body {
background-color: #696969;
padding: 10px;
background-repeat: no-repeat;
background-position: center top;
line-height: 1.25em;
}
.navright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #202020;
background-image: url(images/nav_right.gif);
background-repeat: no-repeat;
}
.navleft {
background-image: url(images/nav_left.gif);
}
.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #333333;
background-image: url(images/footer.gif);
background-repeat: no-repeat;
}
.quicklinks {
border: 1px dotted #FFFFFF;
} 

/* LINK STYLES */

.navright a:link, a:visited, a:hover {
color: #373737; /* this value is not working - the light orange from .body is being used */
text-decoration: none;
}
.navright a:hover {
color: #f5f5f5; /* this v. light grey on hover is working ...? */
text-decoration: none;
}

.footer a:link, a:visited, a:hover {
color: #373737; /* v. dark grey */
text-decoration: none;
}
.footer a:hover {
color: #f5f5f5; /* v. light grey */
text-decoration: none;
}

.body a:link, a:visited, a:hover {
color: #FFBA61; /* light orange - making the .navright links light orange, too ??? */
text-decoration: none;
}
.body a:hover {
color: #FA6D14; /* dark orange, like header */
text-decoration: none;
}
 

tom

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 12 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

trouble with different link colors

Hi trhaynes,
You need to specify the class in front of all states.

Quote:
.navright a:link, a:visited, a:hover
if the link is within an element called navright it should be.navright a:link, .navright a:visited, .navright a:hover If you gave the link itself the class you should usea.navright:link, a.navright:visited, a.navright:hover
And of course change the others link classes Smile

Hope that helps

trhaynes
Offline
newbie
Last seen: 17 years 15 weeks ago
Timezone: GMT-3.5
Joined: 2003-10-15
Posts: 5
Points: 0

trouble with different link colors

OK and thanks.

I wasn't aware that you had to do that. My CSS is good but I don't understand the advanced syntax for defining long strings at once - any good links to tutorials?

tom