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 trialDiego DeSouz
2,379 PointsIconography has doubled
- Hey I'm having difficulties figuring the double picture thing. The phone image or the mail on the contact page is doubled even after using the background-repeat: no-repeat; feature. If I delete the phone then the mail image doubles and so forth.
Jason Anello
Courses Plus Student 94,610 Pointsthis will help with posting code: https://teamtreehouse.com/forum/posting-code-to-the-forum
Try to fix the html code that you've posted but also post the css for the contact styles.
Jason Anello
Courses Plus Student 94,610 PointsOk, with the html and css that you have posted here are you seeing 2 of both phone and mail images but twitter is ok?
Diego DeSouz
2,379 PointsIf i remove the phone the mail doubles and if i remove the mail the twitter doubles
Jason Anello
Courses Plus Student 94,610 PointsWhat are you doing when you "remove the phone"? In the html or the css?
What's it looking like when you don't remove anything?
Diego DeSouz
2,379 Pointsi comment it out with /* */
so the way it is now it looks like the example he's teaching on the videos but with an extra phone pic on top of another.
6 Answers
Demian Latus
777 PointsI should close /a in nav, now it works
Diego DeSouz
2,379 Points/******************************************************************
PAGE CONTACT
******************************************************************/
.contact-info { /*class*/
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em
}
.contact-info a { /*this will push the links to fit the imgs*/
display: block; /*will place it in block*/
min-height: 28px;
background-repeat: no-repeat; /*by default back ground repeats*/
background-size: 20px 20px; /*set the b-g size to square*/
padding: 0 0 0 30px; /* will push the text to the right due to the padding on the left */
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('/Users/diegodesouza/Documents/WebDeveloperPage /img/phone.png');
}
.contact-info li.mail a { /*class mail*/
background-image: url('/Users/diegodesouza/Documents/WebDeveloperPage /img/mail.png');
}
.contact-info li.twitter a {
background-image: url('/Users/diegodesouza/Documents/WebDeveloperPage /img/twitter.png');
}
Jason Anello
Courses Plus Student 94,610 PointsIt would help if you can get your css into a code block like you've done with your html.
Diego DeSouz
2,379 Points<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"> <a href="tel:333-3333">Phone</a></li>
<li class="mail"> <a href="mailto:mail@sample.com">mail@sample.com</a></li>
<li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=twitter">@twitter</a></li>
</ul>
</section>
Simon Woodard
6,545 PointsTry adding this to your css
.contact-info li a {
background-repeat: no-repeat;
}
Diego DeSouz
2,379 PointsI have that code and I did use yours again and i even repeated the code but still no luck. i even tried another browser and nothing. I closed everything and opened again and still there.
Diego DeSouz
2,379 PointsIf there was a way for me to take a pic of the page and post it here
Simon Woodard
6,545 PointsSo you will actually need to declare background-repeat: no-repeat after each of the background images are declared, since they are actually taking precedence and defaulting to a repeating background
Diego DeSouz
2,379 Pointsnop still there =(
Diego DeSouz
2,379 Pointsaahhh after 2 hours i figured out what the bug was.... i had a couple of tags closed like this... <a/> instead of </a> ... thanks guys for taking the time to trying to help me here. =)
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Diego,
Post your css that you have for the contact section.