IE7 and the CSS table-cell property

Question

So I just love it when my application is working great in Firefox, but then I open it in IE and... Nope, please try again.

The issue I\'m having is that I\'m setting

Answer 1

IE7 doesn't support display:inline-block; either. An apparent hack is zoom: 1; *display: inline; after your css for display:table-cell;

Answer 2

I had the same issue and used

*float: left; 

"*" indicates IE only

Answer 3

I've solved this using 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>

Answer 4

I've been using CSS for over a decade and I've never had occasion to use display:table-cell, and the only times I ever use conditional comments are to hide advanced effects from IE6.

I suspect that a different approach would solve your problem in an intrinsically cross-browser way. Can you open a separate question that describes the effect you're trying to achieve, and post the HTML and CSS that's currently working in Firefox?