title: What would cause a javascript modal pop-up to work in IE7 but not IE8?
body: <p>I'm working with two modal pop-ups. One is a transparent grey screen to overlay the screen and the other is a box that should sit ontop of the gray modal. Well, the grey modal stop halfway down the page, and the other displays at the bottom of the page. </p>
  
  <p>The page works as intended in IE7 but it displays as posted above in IE8 and 9.</p>
  
  <p>I'm wondering if there are any general problems that would cause the issue (Key differences between 7 and 8).</p>
  
  <p>One general issue that I've tried already is the doctype. Mine is</p>
  
  <pre><code> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  </code></pre>
  
  <p>// loads control as modal window. if element passed in then uses it for placement otherwise it   </p>
  
  <pre><code>//creates a new element in the body.
  toModal: function (element) {
  
      this.modalid = createModal(770, 500);
      this.show(this.modalid);
  },
  
  
  var controlID = '_modal_' + modalWindows.length;
  var currYpos = document.viewport.getScrollOffsets()[1];
  
  var windowWidth = document.viewport.getWidth();
  var windowHeight = document.viewport.getHeight();
  
  var tp = (windowHeight - height) / 2;
  var lt = (windowWidth - width) / 2;
  
  tp = tp + currYpos;  //+ 75;
  currYpos = currYpos;  //+ 145;
  
  var modal = new Element('div', { 'id': controlID, 'class': 'modalBox', 'style': 'top:' + tp + '; left:' + lt + '; z-index:10000' + modalWindows.length + '; width:' + width + '; padding: 0px 0px 0px 0px; height:' + height + ';overflow:auto;' });
  var modalBack;
  if ($('modal_back')) {
      modalBack = $('modal_back');
  } else {
      modalBack = new Element('div', { 'id': 'modal_back', 'class': 'modalBack', 'style': 'top:' + 0 + '; left:' + 0 + '; width:' + windowWidth + '; height:' +  docHeight + ';'});
  }
  modalBack.setOpacity(0.5);
  
  // For IE6 bug regarding SELECT's taking z-index presedence over all non-windowed controls (this is fixed in IE7+)
  var version = 999;
  if (navigator.appVersion.indexOf("MSIE") != -1) {
      version = parseFloat(navigator.appVersion.split("MSIE")[1]);
  }
  
  $(document.body).insert(modalBack);
  $(document.body).insert(modal);
  </code></pre>