Question

I want to wrap an <a> around a div. When I add that, the border’s colour remains the same orange the text is colored.

The orange turns to black when I toggle color rule in Chrome’s developer tools, however I obviously don’t want the viewer to be required to do the same.

Notice that only the Block Fuse project box has this issue, none of the other boxes do because they do not have an <a> tag.

I have reproduced this issue in:

• Chrome Version 23.0.1271.95
• Chrome Canary Version 25.0.1342.0

Here is the relavent html:

<a href="projects/blockfuse.html">
<div class="project">
    <div class="projectTitle">Block Fuse</div>
    <div class="projectDescription">Block Fuse is a game about knocking as many blocks onto the floor as possible.
        <div class="projectImage"><img class="projectImage" src="images/BlockFuse.png"></img></div>
    </div>
</div>
</a>

Here is the relavant css:

div.projectTitle {
    text-align: center;
    font-size: 20pt;
    color: #F90;
    padding: 20px 0px 15px 0px;
    font-family: "Arial", "Helvetica", Sans-Serif;
    border-radius: 20px 20px 0px 0px;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
    border-color: black;
    background-color: #444;
}

div.projectDescription {
    height: 310px;
    font-family: "Arial", "Helvetica", Sans-Serif;
    font-size: 12pt;
    color: #EEE;
    text-shadow: 1px 1px 1px #000;
    background-color: #777;
    padding: 17px;
    border-radius: 0px 0px 20px 20px;
}

Try it live on my website: http://www.rollingkinetics.com/index.html

Answer 1

I think the issue here is that you need to set the color for the a:visited selector. I did not see the issue initially, but i did after I clicked on the link.