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!

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 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.