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 trialC. Vincent Plummer
4,144 PointsPhone 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>
7 Answers
Richard Coleman
3,117 PointsIn 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
4,091 PointsHello, 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
19,579 PointsHey 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
4,144 PointsThanks 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
4,144 PointsAlso... 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
19,579 PointsHey 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
19,579 PointsHey 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
4,144 PointsInteresting... 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;
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsHey 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.