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 a CSS display property to either none or table-cell with JavaScript.

I was initially using display: block, but Firefox was rendering it weird without the table-cell property.

I would love to do this without adding a hack in the JavaScript to test for IE. Any suggestions?

Thanks.

Answer 1

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>