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

Posted by Robert Spatz
Robert Spatz
5,673 Points

CSS Text-Decoration Issue

Hello,

I'm having a minor issue with my CSS- I'm on Stage 5 of the Font-End Web Development track, "Customizing Colors and Fonts" Here's the link: http://bit.ly/1vsdnG9

The CSS is:

a {
    text-decoration: none;
}

#wrapper {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}

#logo {
    text-align: center;
    margin: 0;
}

a {
    color: #6ab47b;
}

header {
    background: #6ab47b;
    border-color: #599a68;
}

h1, h2 {
    color: #fff;
}

nav {
    background: #599a68;
}

The problem is, the navigation still shows bullet points before each link, while the underlines are invisible, as they should be. On the video, the bullet points are invisible as well. I'm not sure why they're invisible on the video, but not on my project. I appreciate any suggestions, Thank you!

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

You need to target the li and use a property called list style type like so 

nav li {
       list-style-type: none;
}

This will remove any bullet points also you can move the a {colour} at the top where you change the text decoration to shorten you code

Robert Spatz
Robert Spatz
5,673 Points

Thank You! That worked! Now, my only question is why the video didn't have that code in the CSS, and yet the bullet points were invisible. I appreciate your help!

6 Answers

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

No problem dude i'm not too sure been a long time since i've watched it myself haha

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Robert,

Normalize.css is responsible for removing the bullet points in the navigation Those bullet points should have been removed back when you added normalize.css to your page.

Are you sure normalize.css is linked properly? Did you by chance use the newest version of normalize and not the one that came with the project?

The newest version of normalize does not contain any css to remove bullet points.

Robert Spatz
Robert Spatz
5,673 Points
Robert Spatz
Robert Spatz
5,673 Points

Thank you Jason. I'm wondering if I even downloaded normalize.css originally- I downloaded the original zip file. I'm in Stage 5- Do you know if I can still download the file? Thank you for your help!

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The last I checked it was included in the zip file.

Do you know at this point whether you even have normalize.css linked in your project? Do you see it in your css folder? If you have it in your project then you can open it and it should have the version number at the top.

This is the newest version (3.0): https://github.com/necolas/normalize.css/blob/master/normalize.css which doesn't remove any bullets from lists.

Here's the older version (1.1) that this project is using: https://github.com/necolas/normalize.css/blob/v1/normalize.css

If you check line 316 you will see the css that removes bullets from lists that are within the nav element. This css has been dropped in the 3.0 version.

My guess is that you either don't have normalize linked in your project or you somehow have the new version linked in. But you would have had to go to that site to get it though.

Keep in mind that the 1.1 version is no longer maintained and only exists for legacy support. I would recommend that you get the 1.1 version working for this project so that you don't have any visual inconsistencies from what Nick has but you would probably want to use the newest version of normalize when working on any new projects.

I'm curios now, back when Nick added normalize.css in an earlier video I think he made a point to show that the navigation links no longer had bullets. Did you notice if you still had them back then?

Robert Spatz
Robert Spatz
5,673 Points
Robert Spatz
Robert Spatz
5,673 Points

Hi Jason, Yes, I believe I did have bullets back then, so maybe I didn't link it properly.

In the comments above, Tunde Adegoroye suggested I use

nav li {
  list-style-type: none;
}

It worked beautifully, and I've been using it on a portfolio site that I'm working on alongside the example for the Front-End Web Development track. It continues to work perfectly. I wonder if I'll have to continue using that, in the future, since normalize.css 3.0 won't remove bullets? I also wonder if Eric Meyer's Normalizr would remove bullets? I haven't used Normalizr much, so excuse me if that's a dumb question!

Thank you very much for your explanation and all the links you provided- They were very helpful!

Tunde Adegoroye
Tunde Adegoroye
20,597 Points
Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Hi robert normalize css is a file you can edit don't think its untouchable i add my own styles as well as remove some that dont use to reduce the file size add that rule at the bottom of normalize.css and add a css comment for referencing and dont be afraid to freestyle a bit in our field there is no right answer

Robert Spatz
Robert Spatz
5,673 Points
Robert Spatz
Robert Spatz
5,673 Points

Hi Tunde, Thanks for that information- I was wondering if I could add that style to the new normalize 3.0.

Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Yes just add it to the bottom