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 Nathaniel Allard
Nathaniel Allard
1,332 Points

Icons overlap with text

The phone, mail, and twitter icons overlap with the text. The html and css are the same as Nick's:

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

<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:example@example.com">example@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=example">@example</a></li>
        </ul>
      </section>

I have also noticed that unlike Nick's preview, all of the text (the paragraph as well as the list) in my preview abuts the edge of the page. There is no margin or padding between the edge of the window and the start of the text. Does anyone know why this would be the case?

I am using Chrome and Windows 10. I haven't changed anything in normalize.css and I have gone through main.css and it is all the same.

Thanks for the help.

3 Answers

Joshua Briley
PLUS
Joshua Briley
Courses Plus Student 24,645 Points
Joshua Briley
Joshua Briley
Courses Plus Student 24,645 Points

Can you share your workspace? It'll be easier to troubleshoot the issue.

Nathaniel Allard
Nathaniel Allard
1,332 Points
Nathaniel Allard
Nathaniel Allard
1,332 Points

I should have thought of that first. Sorry.

Here it is: https://w.trhou.se/1uw6axoc6o

Joshua Briley
Joshua Briley
Courses Plus Student 24,645 Points

padding; 0 0 0 30px;

Semicolon after padding, as opposed to colon. :-)

Nathaniel Allard
Nathaniel Allard
1,332 Points
Nathaniel Allard
Nathaniel Allard
1,332 Points

aha! thank you very much. I must have looked at that 100 times and not seen it. Time to get those glasses, I guess.

Joshua Briley
Joshua Briley
Courses Plus Student 24,645 Points

Happens to me all the time! Another set of eyes is always a good thing.