title: IE8 iframe not successfully running JS/CSS code
body: <p>I am currently hacking together a calendar application which I am embedding into a website via an iframe, but I have come across a bug in internet explorer</p>
  
  <pre><code>    function BuildListView(startday, l, events, config){
          var cc = '&lt;div id="myGrid" style="width:95%;height:95%;"&gt;&lt;/div&gt;';
          var html = [];
          html.push(cc);
          html.push('&lt;link rel="stylesheet" href="../slickgrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" /&gt; ');
          html.push('&lt;link rel="stylesheet" href="../slickgrid/css/smoothness/jquery-ui-1.8.2.custom.css" type="text/css" media="screen" charset="utf-8" /&gt; ');
          html.push('&lt;link rel="stylesheet" href="../slickgrid/examples/examples.css" type="text/css" media="screen" charset="utf-8" /&gt; ');
  
          html.push('&lt;script language="JavaScript" src="../slickgrid/lib/jquery.event.drag-2.0.min.js"&gt;&lt;/script&gt;');
          html.push('&lt;script language="JavaScript" src="../slickgrid/slick.grid.js"&gt;&lt;/script&gt;');
          gridcontainer.html(html.join(""));
          html = null;
  
          var grid;
  
          var columns = [
              {id:"event", name:"Event", field:"event",width:300},
              {id:"start", name:"Start", field:"start",width:175},
              {id:"finish", name:"Finish", field:"finish",width:175},
              {id:"location", name:"Location", field:"location",width:200}
          ];
  
          function sortByStart(a, b) {
              var x = a.start.toLowerCase();
              var y = b.start.toLowerCase();
              return ((x &lt; y) ? -1 : ((x &gt; y) ? 1 : 0));
          }
  
          var options = {
              enableCellNavigation: false,
              enableColumnReorder: false,
              rowCssClasses: function(item) {
                  // if a task is 100% done then its row gets an additional CSS class
                  return (item.event == "Task 0") ? 'complete' : '';
              }
  
          };
  
              $.getJSON("../cal.php", function(json) {
                  var data = [];
                  var i=0;
                  $.each(json.events, function(index, event) { 
                          data[i++] = {
                              event: event[1],
                              start: event[2],
                              finish: event[3],
                              location: event[9],
                          };
  
                  });
                  data.sort(sortByStart);
  
                  $.each(data,function(index, value){
                      value.start = (new Date(value.start)).toUTCString();
                      value.finish = (new Date(value.finish)).toUTCString();
                  })
  
  
                  grid = new Slick.Grid($("#myGrid"), data, columns, options);
               });
  
  
  
      }
  </code></pre>
  
  <p>Dirty I know, this works fine loaded by itself and in iframes in FF/Chrome but in IE the final call</p>
  
  <pre><code>grid = new Slick.Grid($("#myGrid"), data, columns, options);
  </code></pre>
  
  <p>Is causing problems. The same thing happens when I comment out the CSS files so I'm assuming it's a post load CSS error. What would stop the CSS in an iframe being altered?</p>