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
Kathryn Williamson
2,011 PointsContact code not changing bullet points or background images.
My code seems to look fine (will go cross-eyed if i look any more) but the bullet points are still there and the background images are not changing when I refresh the page:
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.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');
}
7 Answers
elk6
22,916 PointsOkay, Kathryn. I took a look at your code and there are some things wrong with it.
Here is your code:
<section>
<h3>Contact Details</h3>
<ul class="contact info"></ul>
<li class="phone"><a href="tel:555-5444">555-5444</a></li>
<li class="mail"><a href="mail to:kw@example.com">kw@example.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=kwill">@kwill</a></li>
</section>
First of all, you are calling contact-info in your css but in your HTML it's contact and info without the hyphen.
Second, you are closing your UL right after opening it. You need to close it after the li. Take over this code and you should be able to follow the code in the video.
<section>
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-5444">555-5444</a></li>
<li class="mail"><a href="mail to:kw@example.com">kw@example.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=kwill">@kwill</a></li>
</ul>
</section>
elk6
22,916 PointsHi Kathryn!
I tried your code in my own workspace and the bullet points are gone and the background images are there ( although not perfectly visible as the video continues and you need to set some more properties ).
Are you sure you saved your workspace before you refreshed the page? You can see if a workspace is saved or not. If there is a red dot next to the file name in the tab, it means your workspace is not saved yet. Go to file --> save or simply hit ctrl / cmd + C.
Good luck! Hope this works. :)
Mircea Dan Dumitru
6,737 PointsClear the browser's cache, sometimes it saves the css to not load it each time you visit the page
Kathryn Williamson
2,011 PointsThank you. Yes of course I have saved. I am going cross eyed trying to see what is wrong, re-saving, refreshing. And I also cleared the browsers cache and still no change, bullet points are still there and background images not there. I am stuck.
elk6
22,916 PointsInstead of posting the code. Can you snapshot your workspace and paste the link here? It's the icon next to the preview icon in the top right corner of workspaces.
Kathryn Williamson
2,011 PointsThanks, here is the snapshot: https://w.trhou.se/bhhykdvfl8
Kathryn Williamson
2,011 PointsHelp! I still have not figured out why the CSS is not working. The bullet points are still there in the contact page and the background images are not showing up. I have looked at the code many times and cannot see what is wrong. Please help! I posted the snapshot link.
Kathryn Williamson
2,011 PointsFinally an answer that can help me move on. I did not see those mistakes. Thank you!!!