CODEWITHSUNDEEP
htmlcssgoogle-chrome
AquaGeneral
AquaGeneral

Reputation: 155

Bottom border color is using text color

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:

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;
}

Showing the orange bottom border, notice only this project box has this issue since it has an a tag

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

Upvotes: 1

Views: 248

Answers (3)

marcias
marcias

Reputation: 236

I recommend to place the hyperlink inside the div. This makes a better behavior as I experienced.
(in this case the link will be applied for the children of the div and the outer wont get additional a:link color)

Upvotes: 1

Scott S
Scott S

Reputation: 2746

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.

Upvotes: 4

Abdul Malik
Abdul Malik

Reputation: 2642

make text decoration none on hyper link just add this

a{
  text-decoration:none;}

Upvotes: 0

Related Questions