Vertical alignment (for IE!)

Question

HTML:

<div class="product">
  <a href="#" class="thumb"><img src="img/thumb_md.png" alt="" /></a>
</div>

CSS:

.product .thumb {     
  position: relative;
  display: table-cell;
  vertical-align: bottom;
  height: 130px;
}

..works great in modern browser, except, ofcourse, IE!

Is there any workaround? The other solution I tried was position:absolute; bottom:0; but it interferes with the drop-down above where z-index doesn't seem to have any effect.

Thanks!

Answer 1

Yes, use relative+absolute positioning instead. The barebones of that is:

a.thumb { display: block; position: relative; height: 130px; }
a.thumb img { display: block; position: absolute; bottom: 0; }

See Absolute Positioning Inside Relative Positioning.