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

Patrick Branigan
Patrick Branigan
1,567 Points
Posted by Patrick Branigan
Patrick Branigan
1,567 Points

[SOLVED] Question regarding specific CSS properties and values failing to work even when abiding by lesson.

I'm in the midst of this lesson and my CSS is as follows: 

.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 {
  background-image: url('../img/phone.png')
}

.contact-info li.mail {
  background-image: url('../img/mail.png');
}

.contact-info li.twitter {
  background-image: url('../img/twitter.png');
}

It seems that the background-repeat: no repeat; isn't working, nor is the background-size: 20px 20px;

I commented out and/or changed values to the display and padding in the .contact-info a { .... declaration and they altered what displayed so I know that . contact-info a { is right but I just can't for the life of me change the repeating background...

The HTML is as follows for reference:

 <section>
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
Patrick Branigan
Patrick Branigan
1,567 Points
Patrick Branigan
Patrick Branigan
1,567 Points

I realized...I forgot to add the "a" for anchor in the individual selectors. (i.e. .contact-info li.twitter a {

Sorry guys! It was getting to about a 40 minutes of staring hehe. Glad I found it! Even though it was so simple.

Jovanny Elias
Jovanny Elias
16,204 Points

Hi Patrick Glad you figured it out. I see your new to treehouse welcome. if at any time you need help everyone on here is always glad to help. don't be sorry after all that's what we're here to do. Good luck and happy coding :)

Ken Alger
Ken Alger
Treehouse Teacher
Ken Alger
Ken Alger
Treehouse Teacher

Edit for markup and for [SOLVED]...

I'll add to Jovanny's comments, there are lots of folks here to assist and it is great that you were able to solve the problem on your own.

Keep up the great work and welcome to Treehouse!

Ken