display: table-cell and IE

I'm so sick of IE. display: table-cell is just too useful not to have.

I was thinking of using php to deliver different code to IE... sending
display: table-cell in the css for non-IE browsers, or wrapping the
appropriate markup inside table markup for IE. Everything else will get
nice, semantic table-free markup. I realise that browser sniffing is not
100% reliable, but all that that means is that in a few very rare exceptions
a compliant browser will be handed table markup instead of semantic
markup -- the page will still look the same, it will still work, and it will
still validate.

Comments?

--
"Come to think of it, there are already a million monkeys on a million
typewriters, and the Usenet is NOTHING like Shakespeare!" - Blair Houghton
-=-=-=-=-=-=-=-=-=-=-=-
http://www.nrkn.com/
-=-=-=-=-=-=-=-=-=-=-=-

"Nik Coughin" <nrkn!no-spam!@woosh.co.nz> wrote:

> I'm so sick of IE. display: table-cell is just too useful not to have.

Maybe. What would you use it for? Maybe there's a different approach.
Sometimes display: inline-block does what you want.

If display: table-cell is essentially, maybe your data structure actually
_is_ a table. I've seen that. People "get rid of tables", the rebuild the
tables in CSS, without realizing they had _data_ tables, not layout tables.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[vesedrema]

There's a potential work-around for this... in your <style>, try

* html .cell {display:inline}

...where .cell is the class name of the div that is supposed to act like a table cell. You should also leave the normal .cell class in there for (shall we say) normal browsers such as Firefox.

I did try to use the width attribute but it had no effect. Not sure if this works in all versions of IE, but it seemed to work in 6. This solution might not be what you're after!

[bugmenot]

Originally Posted by vesedrema

There's a potential work-around for this... in your <style>, try

* html .cell {display:inline}

And add

height:100%

in both your row-div and cell-div. (Use conditional CSS though)

Should do the job for IE6...