Bottom border color is using text color

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

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

I'm not seeing the issue in that version of Chrome - the bottom border under all headers is black. Maybe you need to clear your cache? (Preferences > Show Advanced Settings > Clear Browsing Data > "Empty the Cache)? — Scott S, Nov 30 '12 at 14:38
I just updated my chrome to the version he showed above, and the problem is reproduced. — xiaoyi, Nov 30 '12 at 14:40
@ScottS No luck I'm afraid. I am also testing on a local copy where I would assume caching wouldn't take place. — AquaGeneral, Nov 30 '12 at 14:44
it should be a new bug, you should call it in: menu - tool - report an issue. — xiaoyi, Nov 30 '12 at 14:47
What OS are you using? I've just updated to that version on Windows 8 and cannot replicate the issue. Does the `!important` suffix help? — James South, Nov 30 '12 at 14:48

score 4 · Accepted Answer · answered Nov 30 '12 at 14:49

4

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.

answered Nov 30 '12 at 14:49

Scott S

2,696
16
20

Well spotted. I see the same effect. – Matt Sach Nov 30 '12 at 14:50
Looks like this is the best workaround for now. Thanks for the eagle-eyed answer. – AquaGeneral Nov 30 '12 at 14:52

score 1 · Answer 2 · answered Nov 30 '12 at 14:49

1

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)

answered Nov 30 '12 at 14:49

marcias

236
4
13

I will do so in the future - however this doesn't fix the issue. Even with `textdecoration: none;` – AquaGeneral Nov 30 '12 at 14:54

score 0 · Answer 3 · answered Nov 30 '12 at 14:42

0

make text decoration none on hyper link just add this

a{
  text-decoration:none;}

answered Nov 30 '12 at 14:42

Abdul Malik

2,632
1
18
31

That doesn't fix it I'm afraid. – AquaGeneral Nov 30 '12 at 14:46
If that had worked, it would mean something very strange was up with Chrome! – Matt Sach Nov 30 '12 at 14:48

Bottom border color is using text color

3 Answers3