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
Michael King
2,069 PointsCSS 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
Treehouse TeacherHi 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
2,157 PointsHi Michael,
Your CSS looks correct, so please paste your HTML code so that we can cross-reference it.
Michael King
2,069 PointsI can't get my workspace to load, it keeps timing out. As soon as I get the html code I'll paste it in.
Michael King
2,069 Points<!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>
</html>
Michael King
2,069 PointsThank you!!!!! I looked at that code for hours and didn't see that. I changed the code and it worked perfectly.