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

Posted by Andrew Carr
Andrew Carr
10,979 Points

Random hyphen is appearing in footer between objects. How to remove it? 

<footer>
        <a href="http://twitter.com/dolphin"><img src="img/twitter-wrap.png" alt="Twitter Logo"> </a>
        <a href="http://twitter.com/afc__"><img src="img/facebook-wrap.png" alt="Facebook Logo"> </a>
        <p>&copy; 2014 Andrew 'AFC' Carr</p>
      </footer>

This code is causing a hyphen to appear in between the two images. All other parts seems to be working fine, though.

Thanks!

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

It's an odd one.

2 things come to mind.

Assuming you didn't type this code in yourself and instead copied it (I've no reason to suspect you did :-) ) Try copying it into a text editor and then into the place you need it to be. If you copy it direct from source it can keep characters and "remnants" for want of a better word from that source and into your file.

Secondly removing the space between between the anchor tag and the closing anchor tag. It's a long shot though

In all honesty, your code looks fine to me.

Edit - That said... I think Rich has cracked it for us. :-)

Rich Bagley
Rich Bagley
25,869 Points

No problem your method will do the same in a way by hiding the underline when the space is closed. Think you have won this round ;)

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Andrew,

It sounds as though the images have an underline and the image are causing this to look as though a hyphen is displayed.

Try adding something like this to your style sheet:

footer a {
text-decoration: none;
}

This will remove the underline for links within the footer tag.

You may need to alter this slightly / add it to an existing tag you have in your style sheet but it should give you an idea of how to remove the hyphen appearing.

Hope that helps.

-Rich

Andrew Carr
Andrew Carr
10,979 Points
Andrew Carr
Andrew Carr
10,979 Points

Jonathan,

Thanks! It was fixed by deleting the space between the first <img> and the </a>. I don't know why that solved it, but I'll be sure to make note of such things in the future.

Thanks!

Best, Andrew

Rich Bagley
Rich Bagley
25,869 Points

Hi Andrew,

Glad you managed to sort it.

Closing the space with essentially hide the underline associated with the surrounding link tag. If you added text within the link next to the image the underline would reappear. If you need to resolve this you can remove the underline via the style sheets.

Hope that clears it up.

-Rich