Removing underline from link

2
votes

I have the following code :

<html>
<head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <style>
        .nodecor 
        {
            text-decoration: none;
        }

        .strowb1 
        { 
            width: 150px; 
            height: 35px; 
            background-color: #1F375F; 
            text-align: center; 
            color: #999999; 
            font-family: calibri; 
            font-weight: bold; 
            font-size: 110%; 
            display: block; 
        }
        .fullcell 
        { 
            height: 100%; 
            width: 100%; 
            color: #999999;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td class="strowb1">
                <a class="nodecor" href="#">
                    <div class="fullcell">Watch</div>
                </a>
            </td>
        </tr>
    </table>
</body>
</html>

When executed, "Watch" has a very persistent underline on hover. Setting text-decoration: none does not seem to remove it.

I have tried setting text-decoration to none on the table, tr, td and div as well.

pwatch

Please suggest ideas to do so.

Note: Removing the link to bootstrap css does remove the underline, but I need it in other areas of the code.

7
htmlcsstwitter-bootstrap-3
Try this if it works for you: .nodecor { text-decoration: none !important; } - Deepak Biswal

7 Answers

5
votes

You should increase specificity of your rule because bootstrap targets a:hover and takes precedence. Another option is to put a same specific rule after bootstrap one. If two declarations have the same weight, origin and specificity, the latter specified wins.

.nodecor:hover {
  text-decoration: none;
}
.strowb1 {
  width: 150px;
  height: 35px;
  background-color: #1F375F;
  text-align: center;
  color: #999999;
  font-family: calibri;
  font-weight: bold;
  font-size: 110%;
  display: block;
}
.fullcell {
  height: 100%;
  width: 100%;
  color: #999999;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<table>
  <tr>
    <td class="strowb1">
      <a class="nodecor" href="#">
        <div class="fullcell">Watch</div>
      </a>
    </td>
  </tr>
</table>

Reference: MDN - Specificity - w3.org - Cascading order

3
votes

Try this:

<style>
a{
text-decoration:none;
}
a:hover 
{
   text-decoration: none;
}
<style>

Setting text-decoration to div, and other table specific tag is not useful. This property is specifically defined for anchor <a> tag.

See, if that helps.

1
votes

add also

.nodecor:hover 
{
    text-decoration: none;
}
1
votes

a:hover, a:active, a:focus use also this style if you check with Developer Tools(google chrome) you will see that.
Overwriting a:hover not enough.

.nodecor:hover, 
.nodecor:active, 
.nodecor:focus {
  text-decoration: none;
}
0
votes

It is probably not removing it because it is under fullcell. Try

.nodecor .fullcell {
    text-dcoration:none;
}
0
votes

It will remove line on hover:

a:hover
{
    text-decoration: none;
}
0
votes

Use this css

.strowb1 a:hover {
  text-decoration: none;
}