Thursday, October 08, 2009

Rendering a TABLE inside a DIV in IE problem

I've just head a rendering problem on IE (IE8). It doesn't happen in static HTML, but it only happens in generating HTML by using JavaScript dynamically. I did as below:

  
var myDiv = document.getElementById('myDiv');
var table = document.createElement('table');

myDiv.appendChild(table);

var tr = document.createElement('tr');
table.appendChild(tr);

var centerTd = document.createElement('td');
centerTd.innerHTML = 'Hello guys';
tr.appendChild(centerTd);

'Hello guys' doesn't show up even the DIV is there. If I try to create a static HTML inside 'myDiv' DIV, the text shows up. Strange!

Just a try, I add TBODY to wrap the table's body. And then, the text shows up. IE sucks.

var myDiv = document.getElementById('myDiv');
var table = document.createElement('table');

myDiv.appendChild(table);

var tbody = document.createElement('tbody');
table.appendChild(tbody);

var tr = document.createElement('tr');
tbody.appendChild(tr);

var centerTd = document.createElement('td');
centerTd.innerHTML = 'sfsdfsdfsdfsd';
tr.appendChild(centerTd);

Note: This problem doesn't happen on Firefox.

1 comment:

Ahmad Lafi said...

Thank you for the solution, I spent sometime on this issue trying to figure out what is the problem, and finally here it is.

By the way, it happens only when IE8 is not running in IE8 Document Mode Standards.