Blue lines under links on my site even though I've disabled all related CSS?

Question

I've tried disabled text-decoration, outlines, borders, and everything else I can think of. Using the inspect tool I cannot find anything that would cause these blue lines.

This issue does not affect Firefox.

The text with the blue underline is a span inside of an anchor tag.

Solution 1

You seem to have this problem: http://www.google.com/support/forum/p/Chrome/thread?tid=44100701f93d5951&hl=en

When you press F12 and inspect the elements affected, you should notice this:

a:-webkit-any-link{
...
text-decoration: underline;
}

So maybe adding a stylesheet like this:

a:-webkit-any-link{
text-decoration:none !important;
}

UPDATE : I reproduced it and the above stylesheet, added to your main.css file worked. No need of two ":", it was a typo probably.

Anyway it solved the problem on my PC, try to add it to your main.css and it should work. Thanks!

Solution 2

Chirs Felstead solution resolve your issue with the first link you shared. (http://imgur.com/81MLR)

For removing the blue underline here (http://akoostix.titanlabs.ca/?service=customers#home_page_news_section)

introduce text-decoration to the below line

#front_page_services #service_operators {
  text-decoration: none;
}

in line no. 51 on front-page-services.css

Solution 3

The standard way is:

a {
    text-decoration: none;
}

Please explain more about the span inside an anchor as that sounds backwards. should be anchor inside span.

Solution 4

Define style like this:

#front_page_services a {
    text-decoration: none;
}

Solution 5

Use the text-decoration attribute on you anchor element, not span.

<a id="service_managers" href="http://akoostix.titanlabs.ca/services/managers" style="
text-decoration: none">

Tested on your page and it works.

View more solutions

Comments

[Wayne Austin]

the a:-webkit-any-link is chrome showing the default style being applied to this link therefore the OP will only need to put 'a { text-decoration:none; }' in their stylesheet to overwrite default styles, and really should avoid using the !important override

[Brandon Wamboldt]

Text decoration is off, and text decoration doesn't cause an underline in a different color.

[Brandon Wamboldt]

Thanks, this fixed it :)

[Michael Durrant]

-1 -1 -1 -1 ow that is poor my friend - everyone is wrong ??? don't think so.

[Brandon Wamboldt]

This was ages ago, but since I have the ability to edit comments now, I edited yours so I could change my vote.

[Brandon Wamboldt]

This was ages ago, but since I have the ability to edit comments now, I edited yours so I could change my vote.

[Brandon Wamboldt]

This was ages ago, but since I have the ability to edit comments now, I edited yours so I could change my vote.

[Michael Durrant]

I've returned the favor. Good Karma spreads :)

[Denis]

Although this approach work the true cause of this is that you have defined several rules for "a" and some of those rules miss the colour attribute. So the browser sets the default colour settings. That is why it is displayed as a:-webkit-any-link. Look for the broken anchor rule in your css.

[Wouter Vanherck]

I've noticed the a:-webkit-any-link too but I couldn't override it using text-decoration:none !important;. @Denis I've searched for my 'broken anchor too', modified all a-tags which didn't have a color and still didn't work