CODEWITHSUNDEEP
htmlcssgoogle-chromeborder
JimmyBanks
JimmyBanks

Reputation: 4718

Border appearing the text color of an anchor on Google Chrome

On Google chrome, if I have a div within an anchor, randomly the border will change to the text colour. If I inspect the element, the colour switches back instantly to the proper colour. Is there a way I can get around this error?

This is the html: (it doesn't happen every time, spontaneously it will be the wrong colour)

<a href="/about"><div class="navc">
    <div class="navt"><?php echo $lang['0']; ?></div>
</div>
</a>

this is the css:

#nav
{
float:left;
width:100%;
height:30px;
background:url('../images/nav.png') repeat-x;
border:1px solid #C2C1C1;
text-shadow:0 1px 0 white
}

#nav a
{
color:black;
text-decoration:none
}

.navc
{
padding:0 10px;
border-left:1px solid #C2C1C1;
border-right:1px solid #EEE;
float:left;
height:100%
}

.navt
{
padding-top:6px
}

As can be seen on the following image,the border of the About navigation button is wrong

border error

Upvotes: 0

Views: 1353

Answers (3)

MVarrieur
MVarrieur

Reputation: 533

I just ran into this with some markup like this:

<a href="http://www.google.com" class="outer-link">
    <img src="http://google.com/gif.png" />
</a>

My styles looked like this:

img { border: 2px solid gray; }

The gray border was getting turned into the blue link color, here is how I fixed it:

.outer-link { color: gray; }

So even when the img is getting the wrong border, it's defaulting to the gray border color that I specified. I know it's a bit hacky but it works.

Upvotes: 0

Ev Haus
Ev Haus

Reputation: 1654

Only took me 3 hours to solve this bug (on days like this I feel like Webkit is just as bad as Trident)... but here's the answer:

It only occurs when you have an inline elements inside an anchor (<a>) with a "href" value that has been visited. Such as:

<a href="http://www.google.com"><span>Button</span></a>

To fix the issue, I added the following CSS:

a {color: blue}

a span,
a:visited span /* Webkit will render a blue border unless this is explicitly specified */
{
    border: 1px solid red;
}

Upvotes: 1

JimmyBanks
JimmyBanks

Reputation: 4718

I found a solution,

if I use a span instead of a div, the issue doesnt seem to occur.

edit - it occurred once since its been a span, refreshed and it hasn't occurred since.

Upvotes: 0

Related Questions