No table-cell or table-row in IE CSS

Internet Explorer, How do I loathe thee?
Let me count the ways.

As stated on the w3schools website,

[quote]The values “inline-table”, “run-in”, “table”, “table-caption”, “table-cell”, “table-column”, “table-column-group”, “table-row”, “table-row-group”, and “inherit” is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 supports the values.[/quote]

I had a project where I needed to create a photo gallery.  The goal was to get the gallery to look like iStockPhoto with the images all bottom-aligned, evenly spaced, etc, etc.  Well in creating the gallery I had a hard time aligning the photos on the bottom, so I took a look at how istock did it.  They use “table-cell” display option and vertically align the image to the bottom.  So I tried it, but soon found that Internet Explorer does not support that option.  And then I found that istock was no exception.

 

 

Solution:

I did not personally do this solution as this was not too important.  However someone on Stack Overflow seems to have solved it with jQuery:

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tablecell").wrap("<td />");
    $(".tablerow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

the above script assumes you have divs using style such as:

<style>
.table     { display: table; }
.tablerow  { display: table-row; }
.tablecell { display: table-cell; }
</style>