whole image not acting as link dreamweaver

I am having a problem with some links I have made in Dreamweave开发者_开发问答r; I have made these links by putting the web address onto the link field in Dreamweaver.

But when I preview in browser the whole image does not turn into a link, only the bottom part of it does. So when I hover my mouse over the image, only at the very bottom of the image it turns into a hand.

The code for the page is here http://jsfiddle.net/BGpu8/ and the links with this problem are at the bottom of the page - Facebook, Twitter etc.

Any ideas on why this is happening would be much appreciated! Thank you in advance!

It should really be marked up like this:

<div id="fb"> <p><a href="http://www.facebook.com/group.php?gid=232587661141"><img src="graphics/social graphics/facebook.gif" width="31" height="31" alt="Facebook Logo" />
     Find Us <br />on Facebook</a></p></div>

Put inline elements like anchors and images inside block level elements like paragraphs. In the DreamWeaver generated code it had the anchor in there twice and other wonkiness. If you have time you should take some of the other posters advice and try to learn by hand.

please check if you missed to provide "display:block;" css property to your anchor tag.

try to code like this,

<div class="fbIcon"><a href="http://www.facebook.com/fbname">&nbsp;</a></div>

and corresponding CSS as: .fbIcon{ background:url(ur image url); height:xx px; width: xx px; }

.fbIcon a{ display:block; }

Now it shud work!