Hyperlink appears to have leaked out of image - html

Question

I am learning HTML and CSS at the moment but having a bit of trouble with my code.
If anyone is able to help it would be much appreciated.
Here is my website design - http://puu.sh/5D4yG.png
And here is an image of the portion of my website I am having trouble with.
http://puu.sh/5D3Rr.png
If you look between the two images at the top you will see a very tiny blue underline in the gap.
Then if you look under the heading there is another purple underline.
I have not coded for anything to be underlined so am not sure why it has appeared.
The code is as follows:
CSS
#currentprojects
{
padding:5px;
width:75%;
height:auto;
margin:0px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
#projects
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
#latestvideos
{
padding:5px;
width:75%;
height:auto;
margin:10px auto;
border:0px solid #1e1e1e;
background-color: #f3f3f3;
}
HTML
<div id="currentprojects">
<div align="center"><h1>current projects</h1></div>
</div>
<div id="projects">
<a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8"><img class="ritgk" src="images/ritgk.png" onmouseover="this.src='images/ritgkhover.png'" onmouseout="this.src='images/ritgk.png'" alt="RITGK iOS App" width="296" height="168"/>
<a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster"><img class="imaginedragons" src="images/imaginedragons.png" onmouseover="this.src='images/ imaginedragonshover.png'" onmouseout="this.src='images/imaginedragons.png'" alt="Imagine Dragons - Night Visions Poster" width="296" height="168"/>
</div>
<div id="latestvideos">
<div align="center"><h1>latest videos</h1></div>
</div>
There is also another problem I am having with the above code where, rather than just the Imagine Dragons button linking to my RedBubble page with the Imagine Dragons poster on, for some reason the whole blue section in the image below links to it.
http://puu.sh/5D4EE.png
If anyone could help me with these problems I would be extremely grateful as I can't seem to get my head round why.
Thanks

Answer 1

The single space character between the images is being given a hyperlink underline.
You can get rid of this either by removing whitespace between the images in the html, closing the link tag or styling the link with
text-decoration: none
I suspect you didn't want one link to continue across anyway which brings us to...
It looks like you're missing the closing anchor tag from your links (</a>)
Links (aka anchors) should be in this format...
<a href="..." ...> {Thing that is clickable} </a>
Try...
<div id="projects">
<a href="https://itunes.apple.com/gb/app/ritgk/id581734892?mt=8">
<img class="ritgk"
src="images/ritgk.png"
onmouseover="this.src='images/ritgkhover.png'"
onmouseout="this.src='images/ritgk.png'"
alt="RITGK iOS App"
width="296"
height="168"/>
</a>
<a href="http://www.redbubble.com/people/f7james/works/10680438-imagine-dragons-night-visions-poster">
<img class="imaginedragons"
src="images/imaginedragons.png"
onmouseover="this.src='images/imaginedragonshover.png'"
onmouseout="this.src='images/imaginedragons.png'"
alt="Imagine Dragons - Night Visions Poster"
width="296"
height="168"/>
</a>
</div>
Although getting fully W3C compliant html can be time consuming with browser incompatibilities, it's always useful to run your page through the W3C validator which will find almost all syntax errors.