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 Eric Lindgren
Eric Lindgren
973 Points

Help with: Adding Pages - Adding Iconography

Ok so I have coded my CSS to look exactly like in the video, except without a Twitter link, since I don't have one. I used an example email for right now as well. Now, when I go look at my webpage, it puts the email icon below the phone, but instead of the email address being next to the icon, it puts it below. It also puts it in gray instead of green. See photo. What am I missing here?

[IMG]http://i60.tinypic.com/2hnp06w.png[/IMG]

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points 
  .contact-info a {
    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    padding: 0 0 0 30px;
    margin: 0 0 0 10px;
    text-decoration: none;
  }
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Eric: Not sure if the problem is with the css or html. Can you copy/paste the relevant css and html here (Check the Markdown Cheatsheet below if you're not sure how to do that)? Maybe change your phone number first.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

I pasted the css code above, maybe you can check yours with the above copy.

Eric Lindgren
Eric Lindgren
973 Points

The only different between my code and the one you have Mr X is that my margin only has 3 values, as shown below, which gives the space between the list items that I want for mobile browsing.

Shawn, here is my code:

<p>.contact-info {
  list-style: none;
  padding: 10px;
  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');
}
</p>

<p><section>
            <h3> Contact Details</h3>
            <ul class="contact-info">
              <li class="phone"><a href="tel:503-111-1111">503-111-1111</a></li>
              <li class="mail"><a href="mailto:eric@example.com"></a>eric@example.com</li>
            </ul>
          </section></p>
Eric Lindgren
Eric Lindgren
973 Points

I added a 3rd 0, making it look like so:

margin: 0 0 0 10px;

but that made it look funny haha

4 Answers

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

It looks like you closed your mail anchor tag before your address. Try moving it to the end.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Good catch shawn I think that's it.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

And in case that wasn't clear, it should look like this: <li class="mail"><a href="mailto:eric@example.com">eric@example.com</a></li>

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

It looks like you closed your mail anchor tag before your address. Try moving it to the end.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Eric have you tried it with the four values? Give it a try and let me know how it works out.

Eric Lindgren
Eric Lindgren
973 Points
Eric Lindgren
Eric Lindgren
973 Points

That did it! Thanks so much guys! it definitely helps to have another pair of eyes look over your code, it's easy to miss something when you are the one that typed it. Especially because I have no prior experience, and this whole thing is very new to me. Still getting used to the order that syntax needs to be in.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

Sorry I missed that Eric. I'm glad you got it to work. Thanks Shawn for catching that.