Question

I’ve been looking and looking and I can’t seem to change this really annoying thing!!!!
So please people you gently angels, help me remove underline from my links, but specific ones.
The severely messed up ones, thanks.

Some code:

    <div id = "cracker-container">

      <div class = "cracker-wrapper">
      <div id = "cracker1-button">
        <%= link_to "cracker", new_crack_path %>
      </div>
      </div>

      <div class = "cracker-wrapper">
    <div id = "cracker2-button">
        Cracker2
    </div>
     </div>

    <div class = "cracker-wrapper">
     <div id = "cracker3-button">
      Cracker3
    </div>
    </div>

    </div>

THE CSS:

#cracker1{
  color: #000;
}

#cracker2{
  color: #000;
}

#cracker3{
  color: #000;
}

#cracker1:active{
  color: #fff;
}

#cracker2:active{
  color: #fff;
}

#cracker3:active{
  color: #fff;
}

Answer 1

This will remove the text-decoration from any tags under the #cracker1-button div.

#cracker1-button a:link { 
    text-decoration:none; 
}

However, that code will only remove the underlines from “fresh”/un-visited links. A link has 4 different states:

• link: Fresh/un-visited links
• visited: Links the user has visited
• hover: When the user is hover over the link with the mouse
• active: When the link is the active element on the page (has keyboard focus)

If you want to remove underlining from the link in all 4 states, you will need to specify it in your CSS:

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

Here is a reference for more information on styling links with CSS.

http://www.w3schools.com/css/css_link.asp