HTML/CSS - Ссылка на изображение работает только на половину изображения

Question

У меня есть изображение с изображением, которое находится с правой стороны изображения. У меня есть гиперссылка на изображение, которое выводит изображение полного размера.

Теперь гиперссылка работает только в нижней части изображения (внизу, где текст встроен в изображение).

Как ни странно, кажется, что он отлично работает на jsfiddle, но не на веб-сайте.

Есть ли что-нибудь, что может вызвать эту проблему? Ниже приведен пример JSFIDDLE, как это делается на веб-сайте.

http://jsfiddle.net/EJvm2/1/

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> 

Answer 1

Существует что-то в другом месте на странице, которая перекрывающей часть ссылки. Вы можете узнать, что именно, щелкнув правой кнопкой мыши на части, которая не работает, и выбрав «Осмотреть элемент» или ее эквивалент в зависимости от того, какой браузер вы используете.

Answer 2

Я не вижу никаких оснований для следующего объявления:

.content img, .content h3 { 
    float: left; 
} 

Произвольного (по крайней мере, это не имеет никакого смысла в скрипке на Img элементе) плавающих элементы почти всегда вызывает проблемы. В вашем случае, скорее всего, размер изображения не соответствует содержащему элемент, что вызывает проблемы с переполнением и перекрытием. Удалите поплавок (переместите его на содержащий анкер) или, по крайней мере, очистите его.