Question

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.

Answer 1

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