CODEWITHSUNDEEP
cssgoogle-chrome
PHP
PHP

Reputation: 443

How to remove blue underline under text in google chrome?

This only happens in Google chrome ,I am using chrome 17.0.928 version. This works fine in firefox , but blue underline in google chrome .

.thumbnail:hover{z-index: 50;text-decoration: none;position:relative;}
.thumbnail span{  position: absolute;background:#000;padding: 5px;left: -1000px;
 border: 0px solid #ddd;visibility: hidden;color: #fff;width:388px;height:190px;text-decoration: none;}
.thumbnail:hover span{ text-align:left;visibility: visible;top: 0;left: 110px;text- decoration:none; 
 top:-120px;-webkit-box-shadow: 0 8px 6px -6px #aaa; -moz-box-shadow: 0 8px 6px -6px   #aaa;box-shadow: 0 8px 6px -6px #aaa;}
.hoverbold {
text-decoration: none;
font-family: verdana;
font-size: 11px;
color: #B09F6E;
} ​

http://jsfiddle.net/NW8Nw/3/

Upvotes: 0

Views: 4037

Answers (4)

Sim Reaper
Sim Reaper

Reputation: 69

Well I had the same problem and since I couldn't find a possible solution I did this. 

div {
      text-decoration:underline;
      text-decoration-color:white;
    }

Here your text-decoration-color and background-color should be same thereby hiding the blue underline. Hope this helps

Upvotes: 0

11684
11684

Reputation: 7507

Very simple, actually. You have to style the link apart, I got rid of it with

.thumbnail a:link {
    text-decoration: none;       
}

you should do the same for a:hover, a:visited and a:active.

Edit:
And a whole lot later, I realized you could do it with only one selector: 

.thumbnail a { text-decoration: none; }

Upvotes: 3

Turnip
Turnip

Reputation: 36672

Simply:

.thumbnail a {
    text-decoration: none;
}

On a side note, you have multiple <div>s within your <a> tag. <a> tags should only ever contain inline elements.

Upvotes: 2

QueueHammer
QueueHammer

Reputation: 10824

Remove the decoration for each state of the link

a:link, a:visited, a:hover, a:active
{text-decoration:none;}

Upvotes: 2

Related Questions