IE7 and the CSS table-cell property

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.

Solution 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>

Solution 2:

A good way of solving this setting the display value to '':

<script type="text/javascript">
<!--
function toggle( elemntId ) {
    if (document.getElementById( elemntId ).style.display != 'none') {
        document.getElementById( elemntId ).style.display = 'none';
    } else {
        document.getElementById( elemntId ).style.display = '';
    }
    return true;
}
//-->
</script>

The empty value causes the style to revert back to it's default value. This solution works across all major browsers.

Solution 3:

I had the same issue and used

*float: left;

"*" indicates IE only

Solution 4:

Well, IE7 does not have display: table(-cell/-row) so you will have to figure something else out or do browser targeting (which I agree, is bad hack). As a quick fix (I don't know what you're trying to achieve, appearance-wise) you could try display: inline-block and see what it looks like.

Maybe figure out a way to do display: block and solve the problem of "Firefox rendering it weird" instead? Can you describe what you mean by the weird rendering exactly?

Solution 5:

You never need Javascript to test for IE, use conditional comments.

You might look at the solution these guys came up with for handling table-like display in IE.