CODEWITHSUNDEEP
htmlcsstwitter-bootstraptext-decorations
Olly F
Olly F

Reputation: 2869

'Text-decoration: none' not working in Bootstrap

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.

Upvotes: 8

Views: 34653

Answers (4)

Genia
Genia

Reputation: 80

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.

Upvotes: 0

Cameron Newland
Cameron Newland

Reputation: 21

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.

Upvotes: 2

Tallboy
Tallboy

Reputation: 13467

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"

Upvotes: 9

The Alpha
The Alpha

Reputation: 146219

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.

Upvotes: 0

Related Questions