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

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

David DeWeaver
David DeWeaver
3,701 Points

Bullet points still appearing on the contacts list, and icons will not appear at all in the list.

Bullet points are still appearing next to items in my contacts list, even though I set the list-style to none. In addition, none of the icons are appearing in the list. Why are my attempts to style the contacts list not working?

Here is the CSS: (for the Contact Page)

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

And here is the HTML:

<section> <h3>Contact Details</h3> <ul class="contact-info"></ul> <li class="phone"><a href="tel:301-549-8899">(301)549-8899</a></li> <li class="mail"><a href="mailto:dadeweaver@gmail.com">dadeweaver@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=ddeweaverphotos">@ddeweaverphotos</a></li>
</section>

2 Answers

Walter Allen
seal-mask
.a{fill-rule:evenodd;}techdegree
Walter Allen
iOS Development with Swift Techdegree Student 16,023 Points

Your closing unordered list tag is in the wrong place. It should come after the third closing list item tag.

 <h3>Contact Details</h3>
    <ul class="contact-info">
      <li class="phone"><a href="tel:301-549-8899">(301)549-8899</a></li>
      <li class="mail"><a href="mailto:dadeweaver@gmail.com">dadeweaver@gmail.com</a></li>
      <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=ddeweaverphotos">@ddeweaverphotos</a></li> 
   </ul> 
  </section>

Thanks Walter

Had the same issue!!!

My list is looking dashing now thanks to you.

David DeWeaver
David DeWeaver
3,701 Points

You're right, the misplaced close unordered list tag was causing all the problems! In hindsight that seems like a glaring error for me to miss. Thanks for the help!