Can'r remove text decoration for anchors RSS

• • Reply
  

  newbie2C#

  Member

  694 Points

  1179 Posts

  Can'r remove text decoration for anchors

  Feb 18, 2012 11:08 AM|LINK

  I'm having trouble styling the anchors with in this list.  I've tried several variations of the css below to remove the text decoration dot infront of the anchors in the UL.   I must not be referencing the elements correctly in the style sheet.  Does anyone see what I'm missing?

  <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  
  <div class="left_column">....</div>
  
  <div class="right_column">
  
      <h2>header</h2>
  
          <ul class="blog_links">
  
          <li><a href="http://link/" target="_blank">link text</a></li>
          <li><a href="http://link/" target="_blank">link text</a></li>
          <li><a href="http://link/" target="_blank">link text</a></li>
          
  
          </ul>
  
  </div>
  </asp:Content>

  div.right_column ul li 
  {
      text-decoration: none;
  
  div.right_column ul.blog_links li a
  
  {
      text-decoration: none;
  }

  Gaining competency by discovering my incompetencies.
• • Reply
  

  Ruchira

  All-Star

  42975 Points

  7025 Posts

  MVP

  Re: Can'r remove text decoration for anchors

  Feb 18, 2012 11:23 AM|LINK

  newbie2C#

  div.right_column ul.blog_links li a { text-decoration: none; }

  That should work. I've tested a sample web page and it works fine in firefox and chrome. May be another style is overriding it? Please debug with the browser developer tools and see what are the styles applied for the links (press F12 on keyboard to invoke those in IE and Chrome. Install firebug extention for firefox). In that case, you can use !important like below.

  div.right_column ul.blog_links li a
  
  {
      text-decoration: none !important;
  }

  So now this style will take priority over others and apply for the links.

  Please 'Mark as Answer' if this post helps you.

  My Tech blog | My YouTube Channel
  • Edited by Ruchira on Feb 18, 2012 11:25 AM
  • Edited by Ruchira on Feb 18, 2012 11:26 AM
  • Edited by Ruchira on Feb 18, 2012 11:26 AM
• • Reply
  

  srinanthuram

  Contributor

  6800 Points

  1549 Posts

  Re: Can'r remove text decoration for anchors

  Feb 18, 2012 12:43 PM|LINK

  hi

  remove link text

  <li><a href="http://link/" target="_blank">link text</a></li>

  change it

  <li><a href="http://link/" target="_blank"></a></li>

  or

  try it

  div.right_column ul.blog_links li a
  
  {
      text-decoration: none !important;
  }

  thank u
  

  • Edited by srinanthuram on Feb 18, 2012 12:44 PM
• • Reply
  

  Ruchira

  All-Star

  42975 Points

  7025 Posts

  MVP

  Re: Can'r remove text decoration for anchors

  Feb 18, 2012 12:48 PM|LINK

  srinanthuram

  remove link text

  <li><a href="http://link/" target="_blank">link text</a></li>

  change it

  <li><a href="http://link/" target="_blank"></a></li>

  Hi,

  If he remove the text inside the link he will not be able to even view the link.

  Please 'Mark as Answer' if this post helps you.

  My Tech blog | My YouTube Channel
• • Reply
  

  MetalAsp.Net

  All-Star

  112158 Points

  18249 Posts

  Moderator

  Re: Can'r remove text decoration for anchors

  Feb 18, 2012 12:51 PM|LINK

  srinanthuram

  hi

  remove link text

  <li><a href="http://link/" target="_blank">link text</a></li>

  change it

  <li><a href="http://link/" target="_blank"></a></li>

  or

  try it

  div.right_column ul.blog_links li a
  
  {
      text-decoration: none !important;
  }

  thank u
  

  Besides copying Ruchira's answer (which you seem to be quite good at), what does link text have to do with this?

  C# <--> VB.Net Translator  |  jQuery Widgets
• • Reply
  

  roopeshreddy

  All-Star

  20155 Points

  3328 Posts

  Re: Can'r remove text decoration for anchors

  Feb 18, 2012 01:05 PM|LINK

  Hi,

  To achieve that you need to add list-style:none; style!

  Check the below code!

  <style type="text/css">
          div.right_column ul li
          {
              text-decoration: none;
              list-style:none;
          }
          div.right_column ul.blog_links li a
          {
              text-decoration: none;
          }
      </style>

   

  Hope it helps u...

  Thanks & Regards
  Roopesh Reddy C
  Roopesh's Space
  
• • Reply
  

  newbie2C#

  Member

  694 Points

  1179 Posts

  Re: Can'r remove text decoration for anchors

  Feb 21, 2012 12:47 AM|LINK

  Thanks for the responses.  Link Text is a generic replacement for the actual link text.  There will be text with in the anchor so the user can see the link. 

  I hope to get a chance to try your proposed solutions tomorrow night.  Thanks again.  

  Gaining competency by discovering my incompetencies.
• • Reply
  

  Smith Peter

  Member

  142 Points

  52 Posts

  Re: Can'r remove text decoration for anchors

  Feb 22, 2012 05:02 AM|LINK

  newbie2C#

  div.right_column ul li { text-decoration: none; div.right_column ul.blog_links li a { text-decoration: none; }

  Try this:

  div.right_column ul li
  {
      text-decoration: none !important;
  
  div.right_column ul.blog_links li a
  
  {
      text-decoration: none !important;
  }

  • Marked as answer by Song-Tian - MSFT on Feb 24, 2012 07:53 AM