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

Cori Bowen
Cori Bowen
6,956 Points

CSS styling is not affecting my list items. I cannot get the bullets to go away or the icons to show up. Help!

I've read through the questions that other people have had regarding this but I cannot fix my problem. My code appears right to me, and I've tried clearing my browser and cache but nothing has happened.

here is my html:

<section> <h3>Contact Details</h3> <ul class="contact-info"></ul> <li class="phone"><a href="tel:800-715-9870">800-715-9870</a></li> <li class="mail"><a href="mailto:cori@exmaple.com">cori@exapmle.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=SewLaMode">@SewLaMode</a></li> </section> <footer>

and my 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 30px; }

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

thanks

2 Answers

Rick Gessner
Rick Gessner
43 Points

Cori -- Your bullets are not showing up because your CSS has an error. .contact-info should read: {list-style-type:none; padding:0; margin:0; font-size:0.9em;}

The icon issue is likely 1) a path issue; 2) a positioning issue; 3) a size issue; Start by seeing if you can load one of your .png files into your webpage using a simple tag to confirm the path and worth up from there.