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

C. Vincent Plummer
C. Vincent Plummer
4,144 Points
Posted by C. Vincent Plummer
C. Vincent Plummer
4,144 Points

Phone icon repeats twice vertically. Mail Icon repeats twice vertically. Twitter is there only once.

I double checked the code... it looks the same. Not sure what I'm missing and why the images repeat. I'm using sublime text 2 so I don't think I can copy in code from work spaces.

*/CSS Code/*

.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 5px;
}

.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');
}   

*/HTML Code/*

  <section>
          <h3>Contact Details:</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:123-4567">123-4567<a/></li>
          <li class="mail"><a href="mailto:fucking@unicorns.com">fucking@unicorns.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=cvpmusic">@cvpmusic</a></li>
        </ul>
      </section>
Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey C,

I've edited your code so it appears correct in your post.

Here is a link to explain how to use Markdown to post your code How to post code

If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.

Hope this helps.

7 Answers

Richard Coleman
Richard Coleman
3,117 Points
Richard Coleman
Richard Coleman
3,117 Points

In your html code, in your first li, when you close your anchor you have < a / > instead of < / a >.

I just tried every trick posted here before I realized that I forgot to close my anchors at all! Once I did that, it worked fine as Nick shows in the video. Best of luck!

Davide Pugliese
Davide Pugliese
4,091 Points
Davide Pugliese
Davide Pugliese
4,091 Points

Hello, can you pls use Workspaces? I would like to help you, but not being able to see the images, etc.. I am like blind right now. :)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey C,

Add background-repeat: no-repeat; to after your background img.

.contact-info li.phone a {
    background-image: url('../img/phone.png');
    background-repeat: no-repeat;
}
C. Vincent Plummer
C. Vincent Plummer
4,144 Points
C. Vincent Plummer
C. Vincent Plummer
4,144 Points

Thanks Wayne,

Help me with the thinking please.

Shouldn't adding " background: no repeat; " take care of that issue when it's added to the .contact-info class? I was trying to do it the same way that Nick mentions it in the video. If I do it the way you mention isn't it redundant?

C. Vincent Plummer
C. Vincent Plummer
4,144 Points
C. Vincent Plummer
C. Vincent Plummer
4,144 Points

Also... when I do it that way, I still have 2 phone icons, 2 email icons, and one twitter icon in a list view. I wish there was a way to upload screen shots.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey C,

Here are the distractions for showing a screenshot, assuming you have a dropbox account.

Here is the link generated by dropbox for the image.

https://www.dropbox.com/s/i8eylka2yj5odp2/Lorem-img.png?dl=0

and here is the code edited so i can insert it (removed text from beginning and end)

dropbox.com/s/i8eylka2yj5odp2/Lorem-img.png

here is the code i wrapped it in.

![alt text](https://dl.YOUR IMAGE CODE GOES HERE "Title")

so the end result is

![alt text](https://dl.dropbox.com/s/i8eylka2yj5odp2/Lorem-img.png "Title")

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey C,

Here you go, it was the a at the end that was causing your problems.

.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 5px;
}

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

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

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

If this works for you then remove the background-repeat: no-repeat; and see how it looks.
I agree with you that it would be redundant having it in both places.

Hope this helps.

C. Vincent Plummer
C. Vincent Plummer
4,144 Points
C. Vincent Plummer
C. Vincent Plummer
4,144 Points

Interesting... yeah, that worked. However, if you watch the video... Nick has the 'a' in the code. :

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

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

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