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.

Amusing, you use a hack for firefox then look for an IE hack..;) — NibblyPig, Apr 06 '10 at 15:43

score 48 · Answer 1 · answered Feb 10 '11 at 22:35

48

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>

answered Feb 10 '11 at 22:35

andy magoon

2,889
2
19
14

@andy magoon, Is there's a solution like this without the .browser property, now that's deprecated by jQuery? Or just creating our own browser detecting code is the only solution? – raphie Sep 01 '12 at 19:24
@raphie Make a separated .js and use conditional comments =/ – RaphaelDDL Jun 05 '13 at 19:46
@RaphaelDDL thank you for the suggestion, yes I had to create my own browser detection code at least to detect basic type of systems like iOS, Android or Windows, and some main browsers like Gecko/Mozilla, webkit, safari and ie. – raphie Jun 13 '13 at 00:50
I also had to wrap the whole thing into to get IE7 to render the table – mediafreakch Nov 26 '13 at 15:57

score 31 · Accepted Answer · edited Apr 21 '11 at 09:57

31

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.

edited Apr 21 '11 at 09:57

Ates Goral

137,716
26
137
190

answered Mar 14 '09 at 14:14

Jacco

23,534
17
88
105

In chrome, you can set it to `initial`. :) – Shaz Apr 17 '11 at 01:16
6

the `initial` keyword is being added in CSS3 and does behave exactly as the above does, according to the specifications. – Jacco Apr 17 '11 at 09:16
I love these kind of hacks :) – Tarik Dec 07 '11 at 18:49

score 9 · Answer 3 · answered Aug 05 '09 at 21:26

9

I had the same issue and used

*float: left;

"*" indicates IE only

answered Aug 05 '09 at 21:26

Jonathan Hendler

1,239
1
17
23

3

To be precise, the `*` (asterisk) hack addresses IE 7 and below. – viam0Zah Nov 23 '09 at 09:22
3

The * is a nice trick, but float won't give you evenly spaced elements, which is what you want in a table. – Benubird Dec 22 '10 at 11:30

score 4 · Answer 4 · answered Oct 30 '08 at 02:24

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?

answered Oct 30 '08 at 02:24

joelhardi

11,039
3
32
38

When you set it to block in Firefox, it renders the table cells on top of each other instead of side by side. I would rewrite the whole thing to use DIVs instead, but I'm far to lazy for that, so I just wrote the sh**ty hack code instead. – Ryan Smith Oct 30 '08 at 02:26
If you are doing block-level elements of some kind, you could set them to float "float: left" so in Firefox they will stack up next to each other instead of in rows. Or "display: inline-block" might work here, but in IE7 it can only be used on elements that would normally be inline, like a or em. – joelhardi Oct 30 '08 at 02:30
IE7 doesn't support display:inline-block;. An apparent hack is zoom: 1; *display: inline; – Phill Healey May 19 '14 at 19:15

score 4 · Answer 5 · answered Oct 30 '08 at 04:00

4

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.

answered Oct 30 '08 at 04:00

eyelidlessness

62,413
11
90
94

score 4 · Answer 6 · answered Aug 08 '11 at 21:07

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.

+100 Very good answer. Works way better than any other solution I've come across! — KristianB, Jan 31 '14 at 11:35

score 3 · Answer 7 · answered Oct 30 '08 at 13:49

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?

score 1 · Answer 8 · answered Sep 07 '12 at 14:36

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.

score 0 · Answer 9 · answered Jan 23 '13 at 17:29

0

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

answered Jan 23 '13 at 17:29

Mike6679

5,547
19
63
108

score 0 · Answer 10 · answered May 19 '14 at 19:29

0

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

answered May 19 '14 at 19:29

Phill Healey

3,084
2
33
67

IE7 and the CSS table-cell property

10 Answers10

Linked