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

Posted by Joshua Holland
Joshua Holland
2,865 Points

Issues with class tag images

Well I'm having issues again :P I'm following along with the lessons and from what I can tell, my codes are EXACTLY the same as the trainers. I'm not sure why my images aren't working. It's the lesson for the contact page where I'm trying to get the little phone, mail and twitter icons to appear by the corresponding information. I know that my class is working because I tweaked the padding, margins, ect. and it effected my page. I figure it has to be an issue with these specific codes or maybe the order in CSS? Here is my coding.

Contact
*********************/

.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');
}

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

Thanks in advance for any assistance!
Becky Castle
Becky Castle
15,294 Points

Can you post the html as well? Also, in what way are your images not working? Is there a missing link icon in their place, or are they just totally non-existent when you preview your site?

Nabil Kamel
Nabil Kamel
7,170 Points

are you sure that your images are on the img/ folder on the index.html directory?

Joshua Holland
Joshua Holland
2,865 Points

Sorry about that, here is my HTML that corresponds with the CSS. And the images are completely non existent. Also the images are indeed in the img folder. 

 <ul class="contact-info">
        <li class="Phone"><a href="tel:555-555-5555">555-555-5555</a></li>
        <li class="mail"><a href="mailto:joshholland90@gmail.com">joshholland90@gmail.com></a></li>
         <li class="facebook"><a href="http://Facebook.com/herefromapathy">Facebook</a></li>
        </ul>
Nabil Kamel
Nabil Kamel
7,170 Points

I think you forgot a semi-colon (;) after the background-repeat:no-repeat property.

Becky Castle
Becky Castle
15,294 Points

Hi Joshua, I didn't catch that, lol ;) Can you repost your html?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I fixed it Becky.

Becky Castle
Becky Castle
15,294 Points

Nice.

3 Answers

Nabil Kamel
Nabil Kamel
7,170 Points

you forgot a semi-colon (;) after the background-repeat:no-repeat property. and in your HTML your phone class is Capitalised. Phone is not equal to phone

Becky Castle
Becky Castle
15,294 Points
Becky Castle
Becky Castle
15,294 Points

Hi Joshua, Nabil makes a good point: letter casing does matter.
But I think the real solution for the challenge at hand is this:

.contact-info .Phone::before {
  content: url('../img/phone.png');
}
  • You want to use the "content" property in this case -- not "background".
  • Remember to include ::before (to, well, include this before your html)

Hope that helps!

Joshua Holland
Joshua Holland
2,865 Points
Joshua Holland
Joshua Holland
2,865 Points

Looks like I had a few different issues going on there. Combining everything you guys pointed out, my issue was resolved. Thank you all for helping this noob out :D