Нужна помощь странных проблем CSS

Question

Сделайте лки на этом сайте: http://www.naaf.no/fersking

При наведении курсора мыши на три коробки статьи, вы увидите, что оба текстовых и графические изменения.

Я разместил текст в DIV, который плавает выше anothe div (изображение) с непрозрачностью, установленной на 60%. Но может ли кто-нибудь объяснить мне, почему первая статья примерно на 5 пикселей ниже, чем две другие коробки? Первая статья выровнена с нижней - она ​​должна быть на 5 пикселей выше.

Вот CSS для текстового поля:

#articleImageList .introText { 
    background-color:#000000; 
    color:#FFFFFF; 
    height:50px; 
    margin:0 2px; 
    opacity:0.6; 
    overflow:hidden; 
    padding:5px 20px; 
    position:relative; 
    top:-75px; 
    z-index:0; 
} 

Answer 1

Сделать все ваши изображения одинакового размера. Измените размер /upload/Ferskingen/COLOURBOX1021676.jpg (изображение в коробке с первой статьей), так что это 440x239px (как и другие изображения, это 430x239 атм).

Изображение делает div.articleImage выше, чем другие два, поэтому ваш position: relative; bottom: -75px; не отображает результат, который вы хотите (но он ведет себя правильно).

Или:

удалить min-width в #articleImageList img -селектор в main.css линии 439.