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 trialKaren Rae Arnoco
1,362 Pointsbackground-repeat code not working
I added background-repeat: no-repeat; to class id contact-info but the phone and mail icons is appearing twice. twitter appears only once. How do I fix this?
4 Answers
M. Cotter
6,179 PointsHi Karen,
After reviewing your HTML code using Inspect Element, it looks to me like you have some extra anchor elements within both your Phone and Mail list elements. Please double-check your HTML code. I believe it looks like this:
<ul class="contact-info">
<li class="phone">
<a href="tel:63-32-4224048">Phone: 4224048</a>
<a></a>
</li>
<li class="mail">
<a href="mailto:sample@gmail.com"></a>
<a href="mailto:sample@gmail.com">sample@gmail.com</a>
</li>
<li class="twitter">
<a href="http://twitter.com/intent/tweet?screen_name=SaturatedBrain">@SaturatedBrain</a>
</li>
</ul>
You need to REMOVE those duplicate <a> elements from the Phone and Mail <li> elements... (continued below)
<ul class="contact-info">
<li class="phone">
<a href="tel:63-32-4224048">Phone: 4224048</a>
<a></a> [REMOVE]
</li>
<li class="mail">
<a href="mailto:sample@gmail.com"></a> [REMOVE]
<a href="mailto:sample@gmail.com">sample@gmail.com</a>
</li>
<li class="twitter">
<a href="http://twitter.com/intent/tweet?screen_name=SaturatedBrain">@SaturatedBrain</a>
</li>
</ul>
... so that it looks like this:
<ul class="contact-info">
<li class="phone">
<a href="tel:63-32-4224048">Phone: 4224048</a>
</li>
<li class="mail">
<a href="mailto:sample@gmail.com">sample@gmail.com</a>
</li>
<li class="twitter">
<a href="http://twitter.com/intent/tweet?screen_name=SaturatedBrain">@SaturatedBrain</a>
</li>
</ul>
If this solution helps solve your problem, please select my response as the Best Answer! :) If not, please let me know what happens when you follow my instructions, and I'll do my best to help sort it out.
Best,
M.
Karen Rae Arnoco
1,362 PointsThanks so much. It's really weird though because I don't see any duplicate at all in the html code. What I did is --I typed it again on a notepad and paste it on the workspace and it worked.
Falk Schwiefert
8,706 Points.contact-info li.phone a - make sure you have the ! a ! at the end. Otherwise it won't work.
Mayur Pande
Courses Plus Student 11,711 Pointsthank you this worked!
Karen Rae Arnoco
1,362 PointsHTML: <ul class="contact-info"> <li class="phone"><a href="tel:63-32-4224048">Phone: 4224048<a/></li> <li class="mail"><a href="mailto:sample@gmail.com">sample@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=SaturatedBrain">@SaturatedBrain</a></li> </ul>
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'); }
thanks!
Mayur Pande
Courses Plus Student 11,711 PointsHi I seem to be getting the same problem. Which code did you re-write in the notepad? As I have tried a few options but the images are still repeating.
Thanks
Tiffany McAllister
25,806 PointsTiffany McAllister
25,806 PointsCan you please provide us with your HTML and CSS code? This will help in determining what is going wrong.
Check out the Markdown Cheatsheet at the bottom of the page to properly format the code :)