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 Christopher Chavez
Christopher Chavez
1,269 Points

Why is my CSS code not working?

I have followed the instructions and nothing happended on my site.

Here is my css code:

.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 my HTML code:

<div id="wrapper"> <section> <h3>General Information</h3> <p>I am not looking for new design work.</p> <p>PLease only use phone contact for urgent issues.</p> </section> <section> <h3>Contact Details</h3> <ul cloass:"contact-info"> <li class="phone"><a href="tel:555-6425">555-6425</a></li> <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li> </ul> </section> <footer> <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"> <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> <p>Ā© 2015 Christopher Chavez.</p> </footer> </div>

tracy
tracy
32,769 Points

Hi Christopher,

The's a tiny typo in the misspelling of "class" in the "ul" tag.

Update that and all should be good.

2 Answers

Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points
Ayoub AIT IKEN
Ayoub AIT IKEN
12,314 Points

hey ! you wanna change this :

<ul cloass:"contact-info">

with this :

<ul class="contact-info">
Brynn Evans
Brynn Evans
4,705 Points

Does he need a space after 'li' in his CSS? He has li.phone, li.mail, li.twitter all running together right now.

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Hey Brynn,

A space would be needed if it was targeting a child element of the list item.

As they are joined, it will target the list item with the class of 'phone'.

The perfect example of this is below

.contact-info li.phone a { background-image: url('../img/phone.png'); }

the space after 'contact-info' and 'li' means it is looking for the child List item element of the element with the class of 'contact-info' :)

Kevin VanderWulp
Kevin VanderWulp
5,180 Points
Kevin VanderWulp
Kevin VanderWulp
5,180 Points

Looks like you made a typo in your ul tag. You typed cloass, should be class.