Question

This is a problem that I’ve been having for quite some time now. For some reason, the CSS rules for my links aren’t working properly. As far as I can tell, when using Chrome’s Inspect Element tools or FireBug, the links appear to be styled correctly, but are displayed improperly. I’ve added separate classes to make separate styles of links, and even tried separating a:visited, and this fixed the basic issue for each class, but the normal a tag still displays visited links the wrong color. the CSS for my links has been below.

    a:link, a:hover, a:active
    {
        text-decoration: none;
        color: #FF8C00;
        background-color: transparent;
    }
    a:visited
    {
        text-decoration: none;
        color: #FF8C00;
        background-color: transparent !important;
    }
    a.search:link, a.search:visited, a.search:hover, a.search:active
    {
        font-family: helvetica-light;
        font-size: 19px;
        color: #999;
        text-decoration: none;
        background-color: transparent;
    }
    a.nav:link, a.nav:visited,  a.nav:active, a.nav:hover
    {
        text-decoration: none;
        color: #E3E3E3;
        font-family: helvetica-light;
        font-size: 20px;
        background-color: transparent;
    }

For some reason, even though a:link/etc have “color: #FF8C00” they show up as black or dark gray when visited. Active, link and hover all work normally. All HTML is written as <a href="url">stuff</a>

Answer 1

I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an “a:visted” declaration had ended up inline with an ID declaration and didn’t break the CSS, but caused the links to not appear properly.