I tried to present my concept of a Mosaic Webpage today, and found that while it renders nicely in Firefox, Internet Explorer (6,7,8) only showed a blank page.
Time to solve the problem building the table in DOM instead of dynamically writing HTML (using document.writeln).
The HTML code of the document basically stays the same:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <html> <head> <title>devio mosaic</title> <link rel="stylesheet" href="default.css" type="text/css"> </head> <body onload="setup()"> <table id="tbl" cellSpacing="1" cellPadding="1" width="100%" border="0"> </table> </body> </html>
The new Javascript code adds the various link and iframe elements to the table in two columns:
<script type="text/javascript">
function setup()
{
var sites = [];
sites["site1"] = "http://my.first.site/";
sites["site2"] = "http://my.second.site/";
// more sites
var iMaxCol = 2;
var iCol = 0;
var tr;
var tbody = document.createElement("tbody");
document.getElementById("tbl").appendChild(tbody);
for(site in sites)
{
if (iCol == 0) {
tr = document.createElement("tr");
tbody.appendChild(tr);
}
var td = document.createElement("td");
td.align = "center";
var a = document.createElement("a");
a.href = sites[site];
a.target = "_blank";
a.innerHTML = site;
td.appendChild(a);
td.appendChild(document.createElement("br"));
var iframe = document.createElement("iframe");
iframe.src = sites[site];
iframe.width = "100%";
iframe.height = "100px";
td.appendChild(iframe);
tr.appendChild(td);
iCol++;
if (iCol == iMaxCol) {
iCol = 0;
}
}
}
</script>
The crucial thing for IE to render the <table> at all turned out to be the use of the <tbody> element!
