IE6 CSS display:table fix?

Question

I\'m working on a web app... unfortunately it has to work with the worst piece of software ever written, yes ie6.

I really like the CSS display:table a

Answer 1

IE does not support display:table and display:table-cell but IE7 and below do support display:inline-block. The common way to make this work is by doing the following:

display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

Keep in mind that CSS gives you a lot of positioning power and given some context of how you want your layout to look I might be able to give you a better solution.

Due to misunderstanding let me clarify the code above. display:-moz-inline-stack; is declared for older versions of Firefox. zoom:1; IE has a property called hasLayout, this is a way to trigger it. *display:inline is known as a *property hack used to hide this line from all non-IE browsers

The zoom:1 and *display:inline effectively allow block level elements to behave like inline elements (so that inline-block will work in IE6+)

For more information please read:

1. http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
2. http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Answer 2

Sorry. There isn't a fix to make IE6 support CSS display:table. The only way to acheive this layout in IE6 is to actually use <table> elements.

First question: do you really need to support IE6? If you can simply drop support for it, you'll solve yourself a whole ton of problems, including this one. Current global usage of IE6 is below 3%, and even lower in most developed countries.

If you do still need to support IE6, then your most obvious solution is simply to swallow your semantic markup pride and just use a <table> tag.

As described by @Tom, the next best solution is to write your layout using display:inline-block;.

inline-block allows you to define your elements as blocks, but still keep them in the text flow (kinda the way the <img> tag works by default). If you combine this with fixed element widths, and wapper divs around rows, you could acheive something similar to a table, although it may be hard to get it to expand dynamically with the page width.

The one big "gotcha" bug around this is that inline-block only works in IE6/7 for elements that have a default style of display:inline. In other words, it works for a <span> but not for a <div>. Not a disaster, but something to be aware of, especially since you're specifically asking about IE6 support. Other than that, the good news is that you should be able to get away with using display:inline-block without any other hacks or work-arounds.