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>