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

HTML

How to remove the blue line under text.

I am trying to remove the blue line under under the social icons. I find if I put the </a> before the <li> the line disappears but then the link does not work as I did in the first social icon on line 3 in the HTML code. I have tried text-decoration: none but that does not work either. What should I change to my code so the links work and the blue line also disappears. I have attached my code below http://codepen.io/Johned22/pen/KgxpxQ Thanks in advance

Putting your html through a code validator says you're missing doctype, html tags, and have unclosed tags somewhere.

2 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi! Yes, your code put through a validator will result in missing doctypes etc. However, this is because codepen inserts those for you so they aren't showing in the code here.

However, I fixed one of your snippets. The problem was you were ending the anchor tag before the ending of the list item. Take a look:

<a href="https://pin.it/zWgxyjg" target="_blank">
    <li>
      <div class='entypo-pinterest'></div>
    </li>
</a>

I'm sure you can figure out how to fix the other one from this. Good luck! :sparkles:

Thanks that solved my problem.