title: Issue with Javascript generated html code in Internet Explorer
body: <p>I have a html page with a form in it. In this form, I have 1 input field available for users, with it's type set to <code>file</code>. The form is usually hidden.</p>
  
  <p>The form appears when a user presses a button, which calls the <code>jQuery.dialog()</code> function. The dialog get's created just fine, but the input field is never displayed. I can't know for sure if it is shown at all, or just placed out of the screen.</p>
  
  <p>The same happens with a table which get's automatically generated by javascript. The table consists of several input elements (although different types) and 1 select element per row. Now the select element is displayed correctly, all the input elements don't.</p>
  
  <p>Is this an issue with Internet Explorer? Because all other (major) browsers display it just fine. With major browsers, I mean Chrome, FF, Safari &amp; Opera.</p>
  
  <hr>
  
  <p>Edit > Source</p>
  
  <p>The form in the page:</p>
  
  <pre><code>&lt;form title="Upload snapshot" class="hidden" enctype="multipart/form-data" id="fileUpload" name="fileUpload"&gt;
      &lt;input type="hidden" name="command" value="load" /&gt;
      &lt;input type="hidden" name="table" id="formTable" /&gt;
      &lt;input type="file" id="uploadedFile" name="uploadedFile" /&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The function that turns the form into the dialog:</p>
  
  <pre><code>function LoadDatabase(){
      var form = document.getElementById('fileUpload');
      var table = document.getElementById('formTable');
      $(table).attr('value', Settings['table']);
      $(form).dialog({
          position    : 'center',
          autoOpen    : true,
          width       : 500,
          modal       : true,
          draggable   : true,
          buttons     : {
          "Ok"    : function(){
              // Code to hande the file upload...
              $(form).dialog('close');
          },
          "Cancel" : function(){
              $(form).dialog('close');
          }
          },
          close       : function(){
          }
      });
  }
  </code></pre>
  
  <p>Due to the complexity of the table, it is quite a bit of code to generate the table. Basically, js get's json formatted collection of entries. This collection get's decoded and for each type of column, an appropriate cell is created and added to the page's document. The core bit of this all is:</p>
  
  <pre><code>var tbodyNew =  document.createElement('tbody');
  $(data.Data).each(function(value) {
      row=this;
      var trRowNew =  document.createElement('tr');
      $(trRowNew).attr('id', row['id']);
      var tdNew = document.createElement('td');
      var rowSelect = document.createElement('input');
      $(rowSelect).attr('type', 'checkbox');
      $(rowSelect).addClass('row-selector');
      $(rowSelect).addClass('hidden');
      $(tdNew).append(rowSelect);
      $(trRowNew).append(tdNew);
      for (var columnId in Columns) {
          tdNew = document.createElement('td');
          if (Columns[columnId].Name == 'id') {
              $(tdNew).addClass('hidden');
          }
          $(tdNew).attr('id', Columns[columnId].Name);
          $(tdNew).append(AddCell(columnId, row));
          $(trRowNew).append(tdNew);
      }
      $(tbodyNew).append(trRowNew);
  });
  $(tableNew).append(tbodyNew);
  $(form).html('');
  $(form).append(tableNew);
  </code></pre>
  
  <p>The <code>AddCell()</code> method determines the type of input that should be used (checkbox, text, etc).</p>
  
  <hr>
  
  <p>Edit 2 > Extra images</p>
  
  <p>To further explain what is happening:</p>
  
  <p>The images show the difference in the rendering of the table in the background, and the way the dialog is displayed in the foreground.</p>
  
  <p><img src="https://i.stack.imgur.com/kALkC.jpg" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/w2YEy.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <p>Edit 3 > DOM inspection</p>
  
  <p>I've checked the DOM structure in Internet Explorer, and I've seen that the elements are put in the page... They just aren't rendered. It seems that they don't get an appropriate height &amp; width. Though inspecting their style, it shows that these attributes are set to 'auto':</p>
  
  <p><img src="https://i.stack.imgur.com/aofsl.jpg" alt="enter image description here"></p>