Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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


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.