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 statements being ignored

I have followed along with building a website and everything has been acting as expected, but after updating my main.css file with the css statements for the "contact.html" page they don't appear to be applied to the website page. I've saved both the css and html files and reloaded the website with no difference.

Here is what I added to main.css:

/********************************************* PAGE: CONTACT **********************************************/

.contact-info { list-style: none; margin: 0; padding: 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'); }

5 Answers

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Michael King,

It might have to with how you're writing the class attributes in the .contact-info ul element. For instance, instead of class:"contact-info", it needs to be written as class="contact-info" –– you're using a : to set the class value instead of a =.

Hope this helps! :)

Sam Nabhan
Sam Nabhan
2,157 Points

Hi Michael,

Your CSS looks correct, so please paste your HTML code so that we can cross-reference it.

I can't get my workspace to load, it keeps timing out. As soon as I get the html code I'll paste it in.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Michael King | Photographer</title> <link href="css/normalize.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link href="css/main.css" rel="stylesheet"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Michael King</h1> <h2>Photographer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <h3>General Information</h3> <p>I'm currently looking for work, so please contact me, if urgent by phone. Otherwise Twitter and email are the best way to get in touch with me.</p> </section> <section> <h3>Contact Details</h3> <ul class:"contact-info"> <li class:"phone"><a href="tel: 555-6423">555-6423</a></li> <li class:"mail"><a href="mailto: lmk-stl@swbell.net">lmk-stl@swbell.net</a></li> <li class:"twitter"><a href="http://twitter.com/intent/tweet?screen_name=lmk_stl">@lmk_stl</a></li> </ul> </section> <footer> <a href="http://twitter.com/lmk_stl"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/louis.michael.king"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 Michael King</p> </footer> </div> </body>

Thank you!!!!! I looked at that code for hours and didn't see that. I changed the code and it worked perfectly.