My webpage has an image thumbnail with accompanying text positioned to the right. I have a hyperlink on the image that should open the full-size version when clicked.
However, there seems to be an issue where the hyper link only activates on the lower half of the image, below where the text is displayed next to the image. Strangely, this problem appears on the website but not on jsfiddle.
What could possibly be causing this discrepancy? The JSFIDDLE example provided mirrors the setup on the website precisely.
Link to the JSFIDDLE project for reference
CSS:
.content {
width: 500px;
padding: 10px;
overflow: hidden;
}
.content img, .content h3 {
float: left;
border-style:solid;
border-width:5px;
}
.content img {
padding-right: 10px;
}
.content p {
padding: 40px 0 0 20px;
}
HTML:
<div class="content"> <a id="image1" href="images/site_images/acorn-award.jpg" title="image title.">
<img src="images/site_images/thumb.jpg" alt="" width="200" height="120" />
</a>
<p>This is some text explaining the image</p>
</div>