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

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

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

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;
}

You're welcome!

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

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

Opps,

Looks like everyone answered at the same time lol.

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

Wayne Priestley
Wayne Priestley
19,579 Points

Yes, that could of been really embarrassing :)

And/or extremely confusing :-)