CODEWITHSUNDEEP
csscolorshyperlink
Dan
Dan

Reputation: 3367

Change link underline color & not font color (bottom-border is not working across all browsers)

Changing the border-bottom attribute along with removing text-decoration creates the colored underline in some browsers (I can vouch for FF 5 and 6 for sure). But other browsers (at least Safari & Chrome) don't display any line.

For example of the problem, see utsarotaract.org (there is a link in the bottom paragraph of the index page).

Since I've seen this work other places, I'm assuming that some of my CSS is clashing but I'm stumped as to where exactly the problem is.What the user is seeing (no underline on "this form" @ the bottom)

Upvotes: 1

Views: 2248

Answers (2)

tw16
tw16

Reputation: 29575

The issue is the size of your border. Change your 0.5px border to 1px instead and it will work. Live example: http://jsfiddle.net/tw16/WcrNA/

.content a {
    border-bottom: 1px solid #A80532; /* instead of 0.5px */
    color: #000022;
    text-decoration: none;
}

Upvotes: 2

Arnaud Leymet
Arnaud Leymet

Reputation: 6122

You may want to use:

<a><span>I'm a link</span></a>

with the following CSS:

a {
  color: blue;
}
span {
  color: green;
}

The alternative being using a border-bottom. It's also a cross-browser solution. You'll just have to set its padding/margin/line-height to make it consistent from a browser to another.

Upvotes: 0

Related Questions