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 trialDavid DeWeaver
3,701 PointsBullet 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
iOS Development with Swift Techdegree Student 16,023 PointsYour 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>
David DeWeaver
3,701 PointsYou'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!
Walter Allen
iOS Development with Swift Techdegree Student 16,023 PointsNo problem. It's an easy mistake. We all make it at some point. ;)
Dawn Mitchell
932 PointsDawn Mitchell
932 PointsThanks Walter
Had the same issue!!!
My list is looking dashing now thanks to you.