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

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.

Answer 2

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 3

I had the same issue and used

*float: left; 

"*" indicates IE only

Answer 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?

Answer 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.

Answer 6

Using inline-block works well for this type of stuff. No, IE 6 and IE 7 technically do not have display: inline-block, but you can replicate the behavior with the following styles:

div.show-ib {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

The key to this is 'zoom: 1' toggles the 'hasLayout' property on the element which changes the way the browser renders a block level element. The only gotcha with inline block is you cannot have a margin of less than 4px.

Answer 7

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?

Answer 8

A code example fot the conditional comments that user eyelidlessness, kindly posted

"[if lt IE 8]" only works if the browser is IE lower than IE8 because IE8 does it right. With the conditional comments IE7 arranges the DIVs nicely horizontally... HTML:

 <div class="container">
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="en.html">English</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]><td><![endif]-->
    <div class="link"><a href="de.html">Deutsch</a></div>
    <!--[if lt IE 8 ]></td><![endif]-->
    <!--[if lt IE 8 ]></tr></table><![endif]-->
</div> 

My CSS

.link {
 display:table-cell;
 vertical-align:middle;
 }
 div.container {
 margin: 0 auto;
 display:table;
 }
 .thumb {
 display:table-cell;
 float: left;
 text-align: center;
 }

IE 8 and 9 Work with the CSS as does FireFox. IE7 looks now the same using the Table and TD & TR tags. On some pages IE 8 worked only 20% of the time, so I used [if lt IE 9 ]

This also helps smoothing out vertical-align issues that IE7 can't handle.

Answer 9

I tried everything and the only way I found that was all cross browser was to use Javascript / Jquery. This is a clean lightweight solution: click here

Answer 10

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