CODEWITHSUNDEEP
htmltwitter-bootstrap
Timothy Shields
Timothy Shields

Reputation: 79461

Hyperlink Underline

I have the following Twitter Bootstrap "Stacked Pills" list, mimicking the example shown at http://twitter.github.io/bootstrap/components.html#navs

<div class="navbar-inner">
    <ul class="nav nav-pills nav-stacked">
        <li class="nav-header">noun</li>
        <li class="active"><a href="#">a soft partly suppressed laugh</a></li>
        <li class="nav-header">verb</li>
        <li><a href="#">laugh quietly or with restraint</a></li>
        <li><a href="#">this isn't really a definition; it's just an example of a long one</a></li>
    </ul>
</div>

When it renders (in Google Chrome) I get this:

Incorrect

Compare this to the example shown on the Twitter Bootstrap website:

<ul class="nav nav-pills nav-stacked">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li><a href="#">Messages</a></li>
</ul>

Correct

Why do the <a> links have underlines in my version but not on the Twitter Bootstrap example? I'm sure it's 'something obvious' but I'm new to web UI development. :)

Upvotes: 0

Views: 435

Answers (2)

BLaZuRE
BLaZuRE

Reputation: 2406

There is probably CSS that eliminates the underline for the underline in <a> tags. You can do that by adding 

a{
    text-decoration: none;
}

to your CSS. This will remove underlines for all links. To specify for a specific id or class, just specify your id or class before a{ as you normally would.

Upvotes: 2

Chris Rockwell
Chris Rockwell

Reputation: 1842

Add .nav a { text-decoration:none} to your stylesheet.

Upvotes: 2

Related Questions