Strange Black Bar Appearing HTML - html

Question

I am trying to create a link section in a HTML document. I have a couple links containing images. The code is here: http://jsfiddle.net/u6Tmt/. As you can see after the SO image there is a little black bar which looks almost like an underscore. What is causing this black bar to appear and how do I get rid of it?
In case you don't know what I'm talking about, here is an image to help:
Also here is another copy of the code:
<div id="links">
<a href="http://stackoverflow.com/users/1916721/cabellicar123">
<img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico" alt="stack overflow">
</a>
<a href="https://github.com/cabellicar123">
<img src="https://assets-cdn.github.com/favicon.ico" alt="github">
</a>
</div>

Answer 1

The bar is the default underline of hyperlinks.
Add this rule to your CSS stylesheet to get rid of it
DIV#links A { text-decoration: none; }

Answer 2

I wouldnt have thought it an issue but if you change
<img src="image URL" alt="stack overflow">
to
<img src="image URL" alt="stack overflow"/>
and remove all spaces in the
<A>
your fiddle fixes
Edit: This & cobra_fast's answer

Answer 3

There seems to be a space in your first a-tag and the hyperlink is underlining it. When you use the a-tags with images, put it on the same line and it seems to work:
<div id="links">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" alt="stack overflow">
<img src="https://web.archive.org/web/20190109105720/https://assets-cdn.github.com/favicon.ico" alt="github">
</div>