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

alan heath
alan heath
5,188 Points
Posted by alan heath
alan heath
5,188 Points

My bullet points still appear and phone icon and mail icon do not appear.

Here is my css:

/************************************
PAGE: CONTACT
*************************************/

.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');
}
Aaron Lafleur
Aaron Lafleur
10,474 Points
Aaron Lafleur
Aaron Lafleur
10,474 Points 
.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;
}

Your padding is missing a colon.

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi alan,

One of your problems is with this line: <ul class="Contact-info">

class and id names are case sensitive so you need to make it a lowercase 'c' so the styles in the css will be applied.

In your footer you have:

<a href="http://twitter.com/username"><img src="img/twitter-wrap.png" alt"Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/alanaheath1"><img src="img/facebook-wrap.png" alt"Facebook Logo" class="social-icon"></a>

You're missing the equal sign for the alt attribute.

Also, you have some kind of greek? character near the end here:

<a href="index.html" id="logo"ß>
alan heath
alan heath
5,188 Points
alan heath
alan heath
5,188 Points

Wow..okay that did take care of the bullet points and the icons now appear. Now just have to adjust the padding that the icons are to the left of the wording. Thankyou very much for your help.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

The missing colon that Aaron pointed out should take care of the padding problem. The 30px of left padding is meant to create space for the icons.

Are you still seeing the icons under the text?

alan heath
alan heath
5,188 Points
alan heath
alan heath
5,188 Points

Yes...the icons are still showing underneath the text.

alan heath
alan heath
5,188 Points
alan heath
alan heath
5,188 Points

huh...now it is working. wierd. Thanks alot guys.

Aurelian Spodarec
Aurelian Spodarec
7,369 Points
Aurelian Spodarec
Aurelian Spodarec
7,369 Points

Hey there. Not completely 100% sure but, shoudnt you write phone . li a or other way round? could you paste your html code aswell so we can have a look?

alan heath
alan heath
5,188 Points
alan heath
alan heath
5,188 Points

here is my html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Alan Heath | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One:400,400italic|Open+Sans:400,600,700,800,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo"ß>
        <h1>Alan Heath</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"class="selected">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <h3>General Information</h3>
        <p>I am available for new website designs and or consultation on existing sites. If you have any questions feel free to contact me.</p>
        <p>I can be reached by phone and email.</p>
      </section>
      <section>
       <h3>Contact Details</h3> 
        <ul class="Contact-info">
          <li class="phone"><a href="tel:510-724-2363">510-724-2363</a></li>
          <li class="mail"><a href="mailto:alanh2723@aol.com">alanh2723@aol.com</a></li>

        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/username"><img src="img/twitter-wrap.png" alt"Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/alanaheath1"><img src="img/facebook-wrap.png" alt"Facebook Logo" class="social-icon"></a>

        <p>&copy; 2014 Alan Heath</p>
      </footer>
    </div>
  </body>
</html>
alan heath
alan heath
5,188 Points
alan heath
alan heath
5,188 Points

It seems..other than the colon mistake...that i have written the css verbatim. When i took the code challenge it worked fine. So i am wondering it is something with my puter? when i went to view the page from my workspace a window popped up with a list of ports. Port 800 was the default so i selected that one. the page index page loaded so i selected the contact page and then refreshed. That is when i noticed it did not work.