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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Diego DeSouz
Diego DeSouz
2,379 Points
Posted by Diego DeSouz
Diego DeSouz
2,379 Points

Iconography has doubled

  1. 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
Jason Anello
Courses Plus Student 94,610 Points

Hi Diego,

Post your css that you have for the contact section.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

this 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
Jason Anello
Courses Plus Student 94,610 Points

Ok, 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
Diego DeSouz
2,379 Points
Diego DeSouz
Diego DeSouz
2,379 Points

If i remove the phone the mail doubles and if i remove the mail the twitter doubles

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

What 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
Diego DeSouz
2,379 Points
Diego DeSouz
Diego DeSouz
2,379 Points

i 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
Demian Latus
777 Points
Demian Latus
Demian Latus
777 Points

I should close /a in nav, now it works

Diego DeSouz
Diego DeSouz
2,379 Points
Diego DeSouz
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
Jason Anello
Courses Plus Student 94,610 Points

It would help if you can get your css into a code block like you've done with your html.

Diego DeSouz
Diego DeSouz
2,379 Points
Diego DeSouz
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
Simon Woodard
6,545 Points
Simon Woodard
Simon Woodard
6,545 Points

Try adding this to your css

.contact-info li a {
  background-repeat: no-repeat;
}
Diego DeSouz
Diego DeSouz
2,379 Points
Diego DeSouz
Diego DeSouz
2,379 Points

I 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
Diego DeSouz
2,379 Points
Diego DeSouz
Diego DeSouz
2,379 Points

If there was a way for me to take a pic of the page and post it here

Simon Woodard
Simon Woodard
6,545 Points
Simon Woodard
Simon Woodard
6,545 Points

So 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
Diego DeSouz
2,379 Points
Diego DeSouz
Diego DeSouz
2,379 Points

aahhh 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. =)