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

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 2

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 3

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 4

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 5

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 6

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.