Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Toby Howell
Toby Howell
3,973 Points
Posted by Toby Howell
Toby Howell
3,973 Points

Bullets on my list

I have text-decoration set to none, but it's still showing bullets. Any ideas?

<nav>
        <ul>
          <li>
            <a href="index.html" class="selected">Portfolio</a>
          </li>
          <li>
            <a href="about.html">About</a>
          </li>
          <li>
            <a href="contact.html">Contact</a>
          </li>
        </ul>
      </nav>

a {
    text-decoration: none;
}

5 Answers

Jeff Busch
Jeff Busch
19,287 Points
Jeff Busch
Jeff Busch
19,287 Points

Hi Toby,

You have set text-decoration: none for the a elements. This just means the links will not be underlined. You need to select the list elements.

Jeff

Jennifer Rai
PLUS
Jennifer Rai
Courses Plus Student 13,164 Points
Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

Hi Toby -

The text-decoration property doesn't affect the bullets. It deals with text decoration like underlining.

If you are trying to remove the bullets you would need to target the list element:

ul {
list-style: none;
}
Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

You're welcome!

Dan Hedgecock
Dan Hedgecock
13,807 Points
Dan Hedgecock
Dan Hedgecock
13,807 Points

Setting text-decoration: none; to your anchor elements should remove the underline from the link, but won't affect the bullets of your list. Setting the list-style property for your <ul> should do the trick. Depending on the browser you might need to use list-style-type.

css: ul {list-style:none;}

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Text-decoration won't cover it for lists, you'll need to add

ul {
    list-style-type: none;
}

You may have to use this for IE, i can't remember for sure.

ul li {
    list-style-type: none;
}
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Opps,

Looks like everyone answered at the same time lol.

Jennifer Rai
PLUS
Jennifer Rai
Courses Plus Student 13,164 Points
Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

At least we all came up with the same answer ... lol

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Yes, that could of been really embarrassing :)

Jennifer Rai
Jennifer Rai
Courses Plus Student 13,164 Points

And/or extremely confusing :-)