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 Build the Contact Page

Edward Pirone
Edward Pirone
1,629 Points
Posted by Edward Pirone
Edward Pirone
1,629 Points

Under "contact details" my listed items show an extra phone icon on the page, code looks right. How do I trouble shoot?

It doesn't look like the code would indicate that there should be an extra phone icon displayed on the page. Am I missing something?

  • html -

<section>
<h3>General Information</h3> <p> I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me!</p> <p>Please only use my phone number for urgent inquiries. Otherwise, email is the best way to reach me.</p> </section>

<section> <h3>Contact Details</h3> <ul class= "contact-info"> <li class="phone"><a href="tel:201-956-1287">201-956-1287</a></li> <li class="mail"><a href="mailto:kennedym103@gmail.com">kennedym103@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=@MartinKennedy">@MartinKennedy</a></li>

         </ul>

</section>

  • 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'); }

kellyhayes4
kellyhayes4
1,602 Points
kellyhayes4
kellyhayes4
1,602 Points

I'm not sure of this but it looks like you may have forgotten to add the alt="" before your second phone number addition. This is what I mean---

<li class="phone"><a href="tel: 201-956-1287" alt="201-956-1287"</a.</li>

I haven't gotten this far yet so I am just taking a wild guess, hope it helps and let me know if I screwed up. :)

Vishnu Dileesh
Vishnu Dileesh
Courses Plus Student 1,640 Points

did you tried adding

background-repeat: no-repeat;

in the .contact-info li.phone a ?

1 Answer

Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points
Clayton Tevebaugh
Clayton Tevebaugh
7,617 Points

If I remember correctly this step looks very odd until the next step where you adjust the margin and padding of the iconography. As well as turn off background repeat. From what I can tell your code looks fine and shouldn't be creating a second phone image. Once you adjust the padding and margins like Nick tells you to let me know if it is still giving you two phones.