Why My Image Hyperlink Clickable From A Large Margin Away From The Actual Image?

The box around the picture is the actual size of the picture. The picture is clickable from all the way on the ends of both sides. This occurs more than once on our site, so it is

Solution 1:

Unless you get the original images clipped (through Photoshop or such tool), here's what you can do -

1.Put these images in a container. Eg -

<spanclass="roundImageWrapper"><imgsrc="torqafflogo.png"alt="homepage" /></span>

2.Apply style to the surrounding wrapper element

.roundImageWrapper{
   position : relative;
   height : 100px;
   width : 100px;
   border-radius : 50%; /*Make it round*/
   -moz-border-radius : 50%;
   overflow : hidden; /*clip anything outside the circle*/
}

3.Position image inside .roundImageWrapper using appropriate values for top and left as per need -

.roundImageWrapperimg{
   position : absolute;
   top : 0; /* Adjust as per need*/left : 0; /* Adjust as per need*/
}

This will be easy if all these said images have similar dimensions. Otherwise, you'll have to style the individual images to adjust position.

4. Lastly, bind the click event on the roundImageWrapper instead of on the image.