0

I have a simple html file below that uses css style - display:table, display:table-row and display:table-cell.

It seems to work fine in Chrome. In IE8, it seems to work if I have a copy of the html file on my local drive and I open it from there, but if I try to view the same html file that is hosted on sharepoint 2010, it does not display as intended; the text is not green and it displays the text on one column with 4 rows.

It should display the text in 2 rows and 2 columns, and the text on the first column should be in green.

The CSS style is embedded so I know that it's not a matter of missing style. Please help. I have been banging my head on this for a while.

<!DOCTYPE html>
<html><head><style type="text/css">
.mytable {
  display: table;
}
.myrow {
  display: table-row;
}
.mycell {
  display: table-cell;
}
.column1 {
  display: table-column;
  background-color: green;
}
.column2 {
  display: table-column;
  background-color: grey;
}
</style></head><body><div class="mytable">
  <div class="column1"></div>
  <div class="column2"></div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 1</div>
    <div class="mycell">contents of second cell in row 1</div>
  </div>
  <div class="myrow">
    <div class="mycell">contents of first cell in row 2</div>
    <div class="mycell">contents of second cell in row 2</div>
  </div>
</div>
</body></html>
2

As far as I know display: table|table-row|table-cell|table-column are CSS3 properties which IE8 does not support. I'm not saying that they cannot work in IE8, but they are not supported as CSS3 (and HTML5 for that matter) is only supported by IE9+.

1

I found the solution with my issue. I was viewing the intranet sites with compatibility view turned on. Once I turned it off, IE8 displayed the page correctly regardless of where the web page is hosted....sigh, so many hours 'wasted' in trying to solve this.

Thank you all for your replies. Much appreciated.

1
  • 1
    How can it be appreciated when you have not upvoted a single on :P Jul 24 '13 at 14:17
0

You are missing the type attribute in the style tag,

<style>

should be

<style type="text/css">
1
  • thanks for replying but after making this change...I'm experiencing the same ordeal. It doesn't render correctly IF hosted on sharepoint....I will update my code to reflect this change.
    – Seung
    Jul 23 '13 at 20:50
0

Have you try to add this to your code?

.mytable { display: table;behavior: url(scripts/PIE.htc); }

You can download PIE.htc from here PIE.htc

If that doesn't work try to add or change this in your head section in master page

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

Regards

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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