-2

I have a website set up at http://jamesfrewin.co and I have tried to make the small envelope icon have the link for mailto work just on the envelope image but it seems to be overflowing to the whole box.

Any help to sort this out would be greatly appreciated.

http://jsfiddle.net/JzEnm/

Code

The code for my page is on the link above.

Thanks!

user1888478
  • 101
  • 1
  • 10
  • Post your code in your question and don't try and sidestep the SO rule of doing so when linking to jsFiddle. – j08691 Apr 15 '14 at 17:21
  • there's alot of issues going on here. You really should not be absolute positioning every element on the page. That's a recipe for disaster – jmore009 Apr 15 '14 at 17:21
  • Sorry j08691 I didn't really understand how to do the code thing havent been on Stackoverflow very long. – user1888478 Apr 15 '14 at 17:41

3 Answers3

5

This is happening because your anchor tag includes the envelope image, profile image and the text. Close the tag after the envelope image. Change this and you should be good to go.

<a href="mailto:jfrewin@me.com"><img class="image image-5" src="images/Envelope1.png" onmouseover="this.src='images/Envelope2.png'" onmouseout="this.src='images/Envelope1.png'">
  <img class="image image-6" src="images/Profile Card.svg">
</a>
James
  • 4,540
  • 1
  • 18
  • 34
2

The answer you're looking for has been provided by @James. Just missing an ending anchor tag.

From someone who appreciates good, clean code and following best practices, I challenge you to strip your hover events and replace them with sprites and css :hover effects.

Beez
  • 2,081
  • 1
  • 20
  • 23
0

Add </a> after <img alt="" class="image image-5" src="images/Envelope1.png" onmouseover="this.src='images/Envelope2.png'" onmouseout="this.src='images/Envelope1.png'">