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>
Improve this question

4 Answers 4

Reset to default
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+.

Improve this answer
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.

Improve this answer
1
  • 1
    How can it be appreciated when you have not upvoted a single on :P
    – Robert Lindgren
    Jul 24, 2013 at 14:17
0

You are missing the type attribute in the style tag,

<style>

should be 

<style type="text/css">
Improve this answer
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, 2013 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

Improve this answer

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.