a:link rule won't work on a link tag

[mdisch]

How come a:link and a:visited rule isn't applying on <a> tag (www.dischmedia.com/daw/events/kick-off.php) where the link with white text says National Institute Technical for the Deaf just above the street address and name of building? You can also view same problem for each events pop-up window from www.dischmedia.com/daw/calendar.php.

Other links in the pages are displaying correctly in maroon text color just as I wanted them to be, not white.

Website: www.dischmedia.com/daw
CSS: www.dischmedia.com/daw/style.css

[mdisch]

I just figured out that a:link, a:visited rule needed to be added which wasn't there except for a:hover rule.

Thanks in advance if you have any of your input/tip or feedback.

[rangana]

For future preference and for the possible readers of this thread, you should lay off your styles in "link-visited-hover-active" order.
LoVeHAte.


a:link
a:visited
a:hover
a:active


For further reading
http://meyerweb.com/eric/css/link-specificity.html

[mdisch]

a:hover rule still doesn't work the way I wanted it to turn into white text color with maroon background color while cursor hovers over the link.

The problem occurs only for visited links. Help?!

[rangana]

You set it explicitly:


.calendar a:link, a:visited {
color: maroon;
text-decoration: none;
}

.calendar a:hover {
text-decoration: underline;
background-color: #CCFFFF;
cursor: pointer;
color: maroon;
}

[mdisch]

I apologize for not making myself clear. I was referring to www.dischmedia.com/daw/events/kick-off.php after you click one of the events from the calendar. In the page where text says 'National Technical Institute for the Deaf' with link. It turned into maroon text color with same color background when hovering over the link. The problem only occurs when the link has been visited. I wanted it to be into white text same as for a:link rule which I set under general styles rules, a:link, a:visited, a:hover.

CSS: www.dischmedia.com/daw/style.css


/* general styles */
a:link {
color: maroon;
text-decoration: none;
}

a:visited {
color: maroon;
text-decoration: none;
}

a:hover {
cursor: pointer;
background-color: maroon;
color: white;
}

[rangana]

As I said, you stated the rule:


.calendar a:link, a:visited {
color: maroon;
text-decoration: none;
}


You include a:visited there (style.css). Try to remove it, or better have a different rule where the color property is not maroon.

Hope that makes sense.

[Nile]

.calendar a:link, a:visited {
color: maroon;
text-decoration: none;
}

Should be.


.calendar a:link, .calendar a:visited {
color: maroon;
text-decoration: none;
}

[mdisch]

Thanks, Nile that's what I'm looking for.