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

Justin Rose
Justin Rose
12,435 Points

Add Icongraphy issues?

Hi everyone at treehouse! i cant seem to make these bullet points go away when im adding icons to the assignment. im sure i added liststyle: none; to the .contact-info class. Any suggestions

Could you please post your code ?

Have a look if you apply the list-style: none; to the anchor tag, and make sure you wrote it correctly, list-style not liststyle.

5 Answers

Justin Rose
Justin Rose
12,435 Points

..contact-info { list-style: none; padding: 0; margin:0; font-size: 0.9em; }

.contact-info a { display: block; list-style: none; 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');

Brandon Smith
Brandon Smith
12,493 Points

I'm having the same problem at the moment. Not very sure where I've gone wrong but will update if I figure it out.

Brandon Smith
Brandon Smith
12,493 Points

Okay, I know where I went wrong. Make sure your list items are nested inside the unordered list. I had

<ul class="contact-info></ul> 

and then my list items. Make sure you place the closing unordered list tag after all of your list items and this should do the trick :)

Justin Rose
Justin Rose
12,435 Points

Thank you for helping me figure out this problem. It was a different problem causing the same issue, so for future reference if you accidentally put a extra period in the css in your class like <code> ..contact-info</code> . it will add it. was hard to find

Adding clear: both; removed the bullets from the Contact page when using Firefox. The code looks like this:

.contact-info { clear: both; list-style: none; padding: 0; margin: 0; font-size: 0.9em; }