Need help with a weird CSS problem

Question

Take a lok at this site: http://www.naaf.no/fersking

If you hover the mouse over the three article boxes, you will see that both text and image changes.

I've placed the text in a DIV which floats above anothe div (image) with opacity set to 60%. But can anyone explain to me why the first article is approx 5px lower than the two other boxes? The first article is aligned with the bottom - it should be 5px higher up.

Here is the CSS for the text box:

#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

Make all your images the same size. Resize /upload/Ferskingen/COLOURBOX1021676.jpg (the image in the first article box) so it´s 440x239px (like the other images, it´s 430x239 atm).

The image makes the div.articleImage higher then the other two hence makes your position: relative; bottom: -75px; not render the result you want (but it behaves right).

Or:

remove min-width in the #articleImageList img-selector in main.css line 439.