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

HTML How to Make a Website Creating HTML Content Include External CSS

Donald Hobson
Donald Hobson
691 Points

Why are bullets still appearing after adding normalize.css?

Hi,

I have added the normalize.css as instructed in the Include External Css module. Unlike Nick mentions in the video and in his example, my bullets are still appearing.

Have I done something wrong?

This is my first time using this help forum, hopefully you can see my code.

We cant see your code. Also, see Markdown Cheatsheet while adding the code.

7 Answers

Jason Welsh
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jason Welsh
Treehouse Project Reviewer

I always add list-style: none; in my base styles just in case. Also remove left padding because that can be a layout issue.

ul,
ol {
    margin: 0;
    padding: 0; /*or just padding-left depending on design*/
    list-style: none;
}

Dear Donald,

Normalize wont remove the bullet points from a ul or il. You can try css property text-decoration. Give it a try.

Donald Hobson
Donald Hobson
691 Points

That makes sense to me that normalize will not remove it. But that is what Nick said it would do in the video. I am just beginning css, so I do not think I am ready to start adding decoration. Thank you for the suggestion!

Donald Hobson
Donald Hobson
691 Points

Thank you Renato, I was not far along in the course to actually understand what you were talking about. Got it now!

Jason Welsh
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jason Welsh
Treehouse Project Reviewer

You are missing the ending bracket on the a tag in the header is what I mean. There is a closing tag for it, but in the opening tag there is no closing bracket.

Donald Hobson
Donald Hobson
691 Points

Here is my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Don H | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
   </head>
   <body>
    <header>
      <a href="index.html"
     <h1>Don</h1>
      <h2>Designer</h2>
      <a/>
      <nav>
        <ul>
          <li><a href ="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section>
      <ul>
       <li>
         <a href="img/numbers-01.jpg">
           <img src="img/numbers-01.jpg"alt="">
           <p>Experimentation with color and texture</p>
         </a>
       </li>
        <li>
         <a href="img/numbers-02.jpg">
           <img src="img/numbers-02.jpg"alt="">
           <p>Playing With Blending Modes and Photoshop</p>
         </a>
       </li>
         <li>
         <a href="img/numbers-06.jpg">
           <img src="img/numbers-06.jpg"alt="">
           <p>Trying to Create an 80's Stlye of Glows</p>
         </a>
       </li>
       <li>
         <a href="img/numbers-09.jpg">
           <img src="img/numbers-09.jpg"alt="">
           <p>Drips Created Using Photoshop Brushes</p>
         </a>
       </li>
        <li>
         <a href="img/numbers-12.jpg">
           <img src="img/numbers-12.jpg"alt="">
           <p>Creating Shapes Using Repetition</p>
         </a>
       </li>   
      </ul>
    </section>
    <footer>
      <a href="http://twitter.com"><img src="img/twitter-wrap.png"alt="Twitter Logo"></a>
     <a href="http://facebook.com"><img src="img/facebook-wrap.png"alt="Facebook Logo"></a>
     <p>&copy; 2017 Don H.</p>
    </footer>    
  </body> 
</html>

Thank you for all the responses thus far!

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

We still need to see the CSS but try first of all closing the anchor in the header element correctly. See if that makes a difference. :-)

<header>
      <a href="index.html">
     <h1>Don</h1>
      <h2>Designer</h2>
      <a/>
      <nav>
        <ul>
          <li><a href ="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

Did you made a new folder "css" in current directory and added normalize.css file inside "css" directory? (frequently, missing the directory structure causes such problems".

Also, normalize.css contains

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

so we must be having some problem from our side. Also make sure you have not over-written the styling by adding other css file or using style tag.

Also, make note to Jonathan's comment and complete the anchor tag.

Donald Hobson
Donald Hobson
691 Points

Krinshna I believe I added the file correctly, I have included a link to my flickr account screenshot of it. (https://www.flickr.com/photos/149865579@N04/shares/K8Ry1c) As far as closing the anchor tag as both you and Jonathan have suggested. I'm not sure what you mean. I believe I have "closed" it if that is what Nick has done in the video. I have checked that my <a> </a> tags are in the same places as his. Sorry for all the Noob confusion I have! Thank you all.

Donald Hobson
Donald Hobson
691 Points

I see it now, missing the > on <a href="index.html". I need to be more careful. I did change it and save it, bullets are still there though.

Thanks for the help so far!

Audra Ogilvy
Audra Ogilvy
3,142 Points

I have the same issue. I'm using a text editor instead of Workspaces, and I'm pretty sure my files are written the same as the one's in Nick's tutorial, and he says the normalize.css file should get rid of the bullets, but they're still there.

Donald Hobson
Donald Hobson
691 Points

Audra don't worry about it. It will be gone when you add your main.css file later in the course and add this:

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}
Martynas Burbulis
Martynas Burbulis
1,113 Points

If your CSS folders name is written in capital letters, make sure you type ...href="CSS/normalize.css,