Removing underline from specific anchor tag

I cant yet leave comments and I respect this is an old question but be extremely careful when using !important in your declarations:

text-decoration: none !important;

You'll probably get away with it in smaller projects but with any non-trivial project that involves collaboration from multiple sources this sort of thing can be incredibly annoying when it over-rides a property I need to set further down the line. Not only do I have to change this to make my fix stick but I also have to check that changing it does not break anything else, which it probably will.

Better is to refactor your declaration or restructure your code so that you dont need to use !important and only fall back to !important when you cant.


use text-decoration:none for a in your styles

Ex: 

<head>  
 <style>

  .pagerLink
   {
     background-color: #E4F5F8;
     border:1px solid #C0DEED; 
   }
  .pagerLink a
  {
    text-decoration:none !important;
  }
 </style>
</head>

<body>
  <div class="pagerLink">
    <a href="somepage.aspx">test</a>
  </div>
</body>

You can use firebug(a firefox plugin) to findout which style is being used for the element now and whether its being overwritten by some other style definition

http://getfirebug.com/


Probably because another style block has better precedence than your pagerLink class. Try:

.pagerLink {
    background-color: #E4F5F8;
    border: 1px solid #C0DEED; 
    text-decoration: none !important;
}

Tags:

Css

Recent Posts