'Text-decoration: none' not working in Bootstrap

Question

On hover, my text links have underlines. This is the default in Bootstrap.

I want to keep this, unless the link is within a certain div.

The code I have tried (and several variations) doesn't work.

The HTML:

        <div class="wall-entry span5">
            <a href="">
            <img src="http://www.placehold.it/290x163" />
            <div class="wall-address">
                <p>Burgundy Street</p>
                <p>New Orleans, LA</p>
                <p>USA</p>
            </div>
            </a>
        </div>

My CSS:

.wall-entry     {
                background-color: @black;
                position: relative;

            img {
                opacity:0.4;
                filter:alpha(opacity=40); /* For IE8 and earlier */
                }

            div {
                position: absolute;
                left: 10px;
                bottom: 10px;
                p   {
                    line-height: 18px;
                    margin: 0;
                    font-family: Neuzit Heavy;
                    font-size: 18px;
                    color: white;
                    text-decoration: none;
                    }
                }
            }


div.wall-entry:hover img    {
                            opacity:1;
                            filter:alpha(opacity=100); /* For IE8 and earlier */                    
                            }

a div.wall-entry {text-decoration: none;}

A quick note: I have tested a {text-decoration: none;}, this does work. However, I don't want to change everything. Just the links in this specific case.

Answer 1

put the font-family in quotes for fonts that involve multiple words, first of all:

font-family: "Neuzit Heavy", sans-serif;

then beneath a put .wall-entry a:hover { text-decoration: none; }

You have the order switched around. The item you're targeting should be to the right. For example,

.wrapper .header a in english means "Target all anchor links that are inside of .header, that are inside of .wrapper"

Answer 2

The problem is actually a caused by Twitter Bootstrap's CSS file, not your code.

Twitter Bootstrap's CSS file (bootstrap.min.css was the culprit on my project) gives links underlines multiple times. It gives them an underline when they're hovered over, when they're focused on, and it even makes them blue.

In my project, I specifically assigned my own colors to the text that was inside anchor tags, and the browser rendered their colors correctly, just as I assigned them, however, since the text was wrapped in an anchor tag, the blue underline from the Twitter Bootstrap stylesheet still appeared below all my styled text.

My solution: open bootstrap.min.css (or whatever your Bootstrap stylesheet is called) and search for the term 'underline', and whenever you find 'text-decoration: underline' inside an anchor tag selector, like this:

a:hover, a:focus {
  color: #2a6496;
  text-decoration: underline;
}

or this:

      a, a:visited {
    text-decoration: underline;
  }

you should go ahead and remove the color and text-decoration rules.

That solved my problem.

Answer 3

This won't work

a div.wall-entry {text-decoration: none;} // Inside 'a' div with class wall-entry

but this will work.

div.wall-entry a{text-decoration: none;} // Inside div with class wall-entry 'a'

because an a tag has text-decoration.

Answer 4

If your link is inside div tags, then you can select your link this way:

div > a:hover {
  text-decoration:none;
}

It works fine, even with boostrap used.