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!

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 Adding Pages to a Website Add Iconography

I have the code exactly as Nick has it, yet I cannot get either the bullet points to go away or the pictures to show up.

For the contact-info class on the contact.html page, I have the code exactly as Nick has it, yet the bullet points won't go away and the pictures won't show up. I have double and triple checked the code, retyping it in as he is typing it. I can get the bullet points to go away by going up to the "general" section of my main.css file and addressing the li selector there to give the property 'list-style' the 'none' value, like this: li { list-style: none;}, but that's the only way that the bullet points are going away on the contact.html page. However, this does not address the pictures and I cannot get any of the pictures to even show up -at all. I don't know what's going on here. Also, just to confirm, yes I have all the correct files in the correct directories with the correct names.

Logan R
Logan R
22,989 Points

What browser are you using?

10 Answers

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Hi Matthew, can you copy your paste so we can take a look at what the issue might be?

Copy and paste the code, then wrap everything in three backticks.

For example

<h1>Hi Matthew </h1>

Watch the Tips for asking questions if you are stuck on the specific keyboard key I mean, it's to the right -------->

Sure. Here is the entire main.css:

/************************************ General /************************************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px;
margin: 0 auto;
padding: 0 5%;

}

/li { list-style:none;/ }

a { text-decoration: none; }

img { max-width: 100%;
}

h3 { margin: 0 0 1em 0; }

/************************************ Heading /************************************/

header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center;
margin: 0;

}

h1 { font-family: 'PT Sans Narrow', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }

/************************************ Navigation /************************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

nav ul { list-style:none; margin: 0 10px; padding: 0;

}

nav li { display: inline-block; }

nav a { font-weight:700; padding: 15px 10px; }

/************************************ Footer /************************************/

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

.social-icons { width: 20px; height: 20px; margin: 0 5px; }

/************************************ Page: Portfolio /************************************/

gallery {

margin: 0;
padding: 0;
list-style: none;

}

gallery li {

float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;

}

gallery li a p {

margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;

}

/************************************ Page: ABOUT /************************************/

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/************************************ Page: CONTACT /************************************/

.contact-info { list-style-type:none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display:block; min-height: 20px; background-repeat:no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; }

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png');

}

/************************************ Colors /************************************/

/* site body */ body { background-color: #fff; color: #999; }

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

/* nav background on mobile devices */ nav { background: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* color for a nav link */

nav a, nav a:visited { color: #fff; }

/* selected navigation link */ nav a.selected, nav a:hover { color: #32673f; }

I'm using the Chrome browser and firefox on both mac and windows. Also, I don't know if that paste came out correctly. I meant to comment out the li selector in the general section.

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

Try this:

.contact-info li a { 

    display:block; 
    min-height: 20px; 
    background-repeat:no-repeat; 
    background-size: 20px 20px; 
    padding: 0 0 0 30px; 

}

I just tried it with no change.

Darren Healy
seal-mask
.a{fill-rule:evenodd;}techdegree
Darren Healy
Front End Web Development Techdegree Student 23,565 Points

I went back and got the code from my workspace for you from when I did this course. This worked for me, it might help you find the exact issue.

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

Thank you so much, but that didn't work either. I'm thinking there must be some overriding default in a parent container or something. But my code is exactly like Nick's so I don't understand how it could work for him -and you- but not me. I know it's not my computer, platform or browser (unless a different version) because I've tried on two different computers, one a mac and one a windows, with two different browsers. I've also tested by trying to add color to the text in the "Page CONTACT" section of my main.css and the text won't change colors either.

Brendan Albert
Brendan Albert
32,954 Points

Hello folks. I'm here to say that I have the same issue. Everything was hunky-dory until it came time to display the little pictures next to the telephone number, email and twitter contact links. I have the same issue that the bullet points are stubbornly refusing to become pictures.

Carlos Crespo
Carlos Crespo
1,508 Points

I just had the same problem and I got to make it work. It would be important to add as a comment in the video section for students that may do the same mistake. I watch the videos and take annotations in a notebook, thus trying to memorize most of what Nick says and then work on the code by myself.

When I wrote the code in the correct order as how the final CSS code should look like, I had the same problem. So I thought a little bit about what may have happened. First, I just wrote:

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

But as nothing happened I erased the contact info styling:

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

And left:

.contact-info {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.contact-info li.phone a {
  background-image: url('../img/phone.png');
}

.contact-info li.mail a {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter a {
  background-image: url('../img/twitter.png');
}

At that point I saved my main.css file and checked the website to see the changes. The images were uploaded but there was no formatting. I'm guessing that due to CSS's cascading nature, one must first specify and upload the images and then apply the styling but only before our list item's background image lines of code are written in workspaces.

When I added the final styling lines of code, everything ran perfectly. Hope this helped.

Sirous Soltanolketabi
Sirous Soltanolketabi
4,853 Points

Using google chrome , I couldnt get the bullet points to dissapear nor the pictures to appear. Using internet explorer however,fixed the issue.