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 trialBethany Miller
1,050 Pointsall of my background color styling disappeared
As soon as I added the CSS styling for the contact page, all my other background colors disappeared (for the header, sections, footer. If I remove the CSS I put in, everything goes back to the correct look. Why would this code interfere with all the colors for those sections? Here is the CSS I put in:
/*******************
PAGE: CONTACT
*******************/
.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)
}
MOD: edited to format text by adding an extra line between the text and the ` and writing css in lower case.
2 Answers
Jeff Lemay
14,268 PointsYou're missing the closing quotation mark for the background-image on .contact a
/* before - notice the syntax hightlighting */
.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) }
/* after */
.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) }
Bethany Miller
1,050 PointsEven after fixing that, I still was unable to find any problem in the code but it still was messing up all of my color schemes and wouldn't show the icons on the contact page... I was able to delete the entire "Contact Page" section of css and retype it all and now it's works... No idea what was wrong! Thanks for your help though!
Jeff Lemay
14,268 PointsJeff Lemay
14,268 PointsWelp, syntax didn't highlight the second two lines the way Sublime Text does. You are missing a quotation mark though.