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

Question

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

Если навести указатель мыши на три поля статьи, вы увидите, что текст и изображение изменятся.

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

Вот 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 (изображение в первом блоке статьи), чтобы оно составляло 440x239 пикселей (как и другие изображения, это 430x239 атм).

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

Или:

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