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 trialBecky Hirsch
14,069 PointsContact Icons Repeating
I am able to set the small icons next to the different contact options but each image is also repeating in front of everything (within that block). It is happening to each icon because when I remove one, the other shows up and is repeated as well. Thanks!
Here is my css:
.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');
}
Here is my html:
</section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-6425">555-6425</a></li>
<li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet? screen_name=nickrp">@nickrp</a></li>
</ul>
<section>
2 Answers
mikes02
Courses Plus Student 16,968 PointsYou're applying the background image multiple times to the .contact-info ul and also the anchors within each list item, have you tried this:
.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; }
li.phone a { background-image: url('../img/phone.png'); }
li.mail a { background-image: url('../img/mail.png'); }
li.twitter a { background-image: url('../img/twitter.png'); }
Wayne Priestley
19,579 PointsHi Rebekah,
Try this,
.contact-info, li.phone a {
background-image: url('../img/phone.png');
background-repeat: no-repeat;
}
Hope this helps.
Becky Hirsch
14,069 PointsBecky Hirsch
14,069 PointsThat worked! I see now that it was the comma I added in .contact-info, li.twitter a {}. I did your suggestion and it worked and then removed the comma and tried .contact-info li.twitter a {} and it worked as well. Thanks so much!
Wayne Priestley
19,579 PointsWayne Priestley
19,579 PointsNice find Mike, I never noticed the comma.