Display table styles in IE 8

Forum Moderators: not2easy

Message Too Old, No Replies

Display table styles in IE 8

Compatibility Mode

quasi

10:11 pm on Feb 10, 2011 (gmt 0)

The following displays correctly in FireFox but not in Internet Explorer 8. Have read in many places including W3 and Microsoft that IE 8 supports table styles now.
It's just a simple div table consisting of two rows with two cells in each.
Is there a trick to get this to work correctly in IE 8?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Div Table Test</title>
</head>
<body>
<div style='display:table; width:500px;'>
<div style='display:table-row; background-color:lightgray;'>
<div style='display:table-cell; background-color:lightgreen;'>1222</div>
<div style='display:table-cell; '>Some Data</div>
</div>
<div style='display:table-row; background-color:lightgray;'>
<div style='display:table-cell; background-color:lightgreen;'>1223</div>
<div style='display:table-cell; '>Some Data</div>
</div>
</div>
</body>
</html>

SuzyUK

11:38 pm on Feb 10, 2011 (gmt 0)

your code directly copy/pasted displays fine in IE8 for me.

i.e. just the same as FF et al and just how you would expect a table to render

quasi

12:17 am on Feb 11, 2011 (gmt 0)

It's not working for me in IE 8 for some reason.
'Cells' are not inline. Renders as 4 rows.

I've managed to waste a lot of time today if this is unique to my browser.

Are there some IE 8 settings I should be aware of. I've tried with the Combatibility Settings checked.

SuzyUK

9:16 am on Feb 11, 2011 (gmt 0)

not that I'm aware of quasi

are you testing a blank page with that exact same code you have above in post#1 - or once in your application are there any differences to the Doctype or a comment before the Doctype?

maybe you could try adding the IE compatibility meta tag to force the situation in case your site needs white-listed seem to remember that if a site has at any time been displayed in Compatibility mode you have to force it back to standards when required

<meta http-equiv="X-UA-Compatible" content="IE=8" />

quasi

4:03 pm on Feb 11, 2011 (gmt 0)

meta tag fixes it.
This was not working on anyones IE in my office.
So the the Compatibility setting breaks this? I had assumed the opposite.

Thanks

SuzyUK

9:19 pm on Feb 11, 2011 (gmt 0)

You're Welcome

So the the Compatibility setting breaks this? I had assumed the opposite.

Not sure I'll explain this very well, but maybe somebody will help - what happens is that if your site is visited once by a PC and IE decides that the page/site should be displayed in compatibility mode, it will remain that way even if you update your code, until you force it otherwise by using the meta tag or using a whitelist file memory talking - it may have another name - will try to find reference as this is a way you can force users caches to update simultaneously without using the meta tag, which may need updated at next IE version :o

so if everyone in your office had previously visited the page which was displaying in compatibility mode for some reason then, yes, that would explain it.

I think I ranted about this behaviour previously ;) but to me it basically means we are going to be forced to use the "standards" meta tag whether we think need it or not as we'll have no way of knowing what caches have been affected by an errant visit while the site had a bit of code IE thought should put page/site into compat mode :(