32

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.

1
  • 5
    Amusing, you use a hack for firefox then look for an IE hack..;)
    – NibblyPig
    Commented Apr 6, 2010 at 15:43

10 Answers 10

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>
4
  • @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
    Commented Sep 1, 2012 at 19:24
  • @raphie Make a separated .js and use conditional comments =/
    – RaphaelDDL
    Commented Jun 5, 2013 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
    Commented Jun 13, 2013 at 0:50
  • I also had to wrap the whole thing into <tbody /> to get IE7 to render the table Commented Nov 26, 2013 at 15: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.

3
  • In chrome, you can set it to initial. :)
    – Shaz
    Commented Apr 17, 2011 at 1:16
  • 6
    the initial keyword is being added in CSS3 and does behave exactly as the above does, according to the specifications.
    – Jacco
    Commented Apr 17, 2011 at 9:16
  • I love these kind of hacks :)
    – Tarik
    Commented Dec 7, 2011 at 18:49
9

I had the same issue and used

*float: left; 

"*" indicates IE only

2
  • 3
    To be precise, the * (asterisk) hack addresses IE 7 and below.
    – viam0Zah
    Commented Nov 23, 2009 at 9: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
    Commented Dec 22, 2010 at 11:30
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?

3
  • 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
    Commented Oct 30, 2008 at 2: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
    Commented Oct 30, 2008 at 2:30
  • IE7 doesn't support <code>display:inline-block;</code>. An apparent hack is <code>zoom: 1; *display: inline;</code> Commented May 19, 2014 at 19:15
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.

4

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.

1
  • +100 Very good answer. Works way better than any other solution I've come across!
    – KristianB
    Commented Jan 31, 2014 at 11:35
3

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?

1

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.

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.