Creating a Mosaic Webpage with Javascript using DOM

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" >
  <title>devio mosaic</title>
  <link rel="stylesheet" href="default.css" type="text/css">
 <body onload="setup()">
  <table id="tbl" cellSpacing="1" cellPadding="1" width="100%" border="0">

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"] = "";
  sites["site2"] = "";
  // more sites

  var iMaxCol = 2;
  var iCol = 0;
  var tr;
  var tbody = document.createElement("tbody");

  for(site in sites)
    if (iCol == 0) {
      tr  = document.createElement("tr");

    var td = document.createElement("td");
    td.align = "center";
    var a = document.createElement("a");
    a.href = sites[site]; = "_blank";
    a.innerHTML = site;
    var iframe = document.createElement("iframe");
    iframe.src = sites[site];
    iframe.width = "100%";
    iframe.height = "100px";


    if (iCol == iMaxCol) {
      iCol = 0;

The crucial thing for IE to render the <table> at all turned out to be the use of the <tbody> element!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: