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

Posted by Justin Rose
Justin Rose
11,965 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

mtch
mtch
8,521 Points

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
11,965 Points
Justin Rose
Justin Rose
11,965 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
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
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
11,965 Points
Justin Rose
Justin Rose
11,965 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

Joseph Damiani
Joseph Damiani
1,066 Points
Joseph Damiani
Joseph Damiani
1,066 Points

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; }