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

CSS How to Make a Website Adding Pages to a Website Add Iconography

Posted by Bethany Miller
Bethany Miller
1,050 Points

all 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
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

You'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) }
Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Welp, syntax didn't highlight the second two lines the way Sublime Text does. You are missing a quotation mark though.

Bethany Miller
Bethany Miller
1,050 Points
Bethany Miller
Bethany Miller
1,050 Points

Even 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!