title: jqGrid in IE 7-8 creates grey area on top of content not over it when editing/adding
body: <p>In IE 7 and 8, whenever I want edit or add a row to the grid and the form shows up. The form and the grey background are shown ON TOP of the grid and not over it. I am not able to uplaod a pic but here is a diagram:</p>
  
  <hr>
  
  <p>Grey area</p>
  
  <p>[ jqGrid Form]</p>
  
  <hr>
  
  <p>Not grey and accesible if I scroll down</p>
  
  <p>My grid</p>
  
  <hr>
  
  <p>If needed I can post my html/css/jq code. In firefox the functionality is fine, as in the grey area is OVER the grid and the grid is not accesible. 
  Is this is an IE bug?
  I am using jquery 1.7.1, jqGrid 4.3.1 and jQuery ui 1.8.17.</p>
  
  <pre><code>&lt;?php
  session_start();
  $user = $_SESSION['username'];
  $uID = $_SESSION['UserID'];
  $perms = $_SESSION['Access'];?&gt;&lt;html&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script src="js/i18n/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="jquery-ui-1.8.17.custom.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="jquery.ui.datepicker.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="basic.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.base.css" /&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="base/jquery.ui.theme.css" /&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
      var lastsel3;
      var uID = &lt;?php echo $uID; ?&gt;;
      $grid = $("#tasks"),
          initDateEdit = function (elem) {
              setTimeout(function() {
                  $(elem).datepicker({
                      dateFormat: 'dd-mm-yy',
                      showButtonPanel: true
                  });
              }, 100);
              },
          initDateSearch = function (elem) {
              setTimeout(function() {
                  $(elem).datepicker({
                      dateFormat: 'dd-mm-yy',
                      showButtonPanel: true
                  });
              }, 100);
              },
          editSettings = {
                  //recreateForm:true,
                  jqModal:true,
                  reloadAfterSubmit:true,
                  closeOnEscape:true,
                  savekey: [true,13],
                  closeAfterEdit:true
              };
      $grid.jqGrid({
          datatype: "local",
          url: 'register.php',
          sortname: 'Job ID',
          sortOrder: 'asc',
          postData: {uID:uID},
          colNames: ["track","Job ID","Subject","Notes","Details","Due Date"],
          colModel: [ 
              {name: "track",  index:"TrackID",align: "center", xmlmap:"TrackID", hidden: true, sortable: true},
              {name: "Job ID", index:"TaskID",xmlmap:"TaskID", align:"center",sortable: true, sorttype: 'text', sortable: true, editable: false, editoptions: {readonly: true}},
              {name: "Subject", index:"TaskSubject", align: "center", xmlmap:"TaskSubject",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
              {name:"Notes", index:"Notes", align: "center",height: 20,xmlmap:"Notes",sorttype: 'text', sortable: true,editable: false, editoptions: {readonly: true}},
              {name:"Details", index:"Details", align: "center", xmlmap:"Details", editable: true, edittype: 'select', editoptions: {value: 'Not Started:Not Started;In Progress:In Progress;Completed:Completed'}, sortable: true},
              {name:"Due Date", index:"DueDate", align: "center", xmlmap:"DueDate",sorttype: 'text', sortable: true, editoptions: {dataInit: initDateEdit}, formatter: 'date', formatoptions: {newformat: 'd-M-Y'}, datefmt: 'd-M-Y'}
          ],
  
          onSelectRow: function(track){
                          if(track &amp;&amp; track!==lastsel3)
                              {   
                                  $('#tasks').jqGrid('restoreRow',lastsel3); 
                                  $("#tasks").jqGrid('editGridRow',track,editSettings);
                                  lastsel3=track; 
                              }
                          else{
                              $("#tasks").jqGrid('editGridRow',track,editSettings);
                          }
                          },
          editurl: 'editRow.php',
          rowNum: 10,
          shrinkToFit: true,
          rowList: [10,20,50],
          viewRecords: true,
          xmlReader: {
              root: "tasks",
              row: "task",
              repeatitems: false
          },
          pager: $('#navTasks'),
          onInitializeForm : function () {
  
          },
          caption: "Your Tasks"
      }).navGrid('#navTasks',{&lt;?php
          if ($user==NULL){
              echo 'edit:false,add:false,del:false';
          }
          else{
              echo 'edit:false,add:false,del:false';
          }
      ?&gt;},{},{},{},{multipleSearch: false, multipleGroup: false});
      $('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
      setInterval(
          function(){
              $('#tasks').setGridParam({datatype: "xml", postData: {uID:uID}}).trigger('reloadGrid',[{current:true}]);
          },100000);
      $(window).bind('resize', function() {
          $("#tasks").setGridWidth($(window).width()-"142");
          $("#tasks").setGridHeight($(window).height()-"215");
      }).trigger('resize');
  
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;table cellspacing="0" cellpadding="0"&gt;
      &lt;tr &gt;
          &lt;td colspan="100%"&gt;
      &lt;DIV id="header" class="header"&gt;
          &lt;div class="title" align="center"&gt;Welcome to Research Division - Work Flow System&lt;br /&gt;&lt;span&gt;Your Tasks&lt;/span&gt;&lt;/div&gt;
  
          &lt;?php 
              if($user == NULL){
                  echo '&lt;div align="center"&gt;&lt;br/&gt; Please Sign-in &lt;a href="http://127.0.0.1"&gt;here&lt;/a&gt;&lt;/div&gt;';
              }
              else {
                  echo '&lt;div align="center"&gt;Welcome '.$user.'!&lt;/div&gt;';
              }
          ?&gt;
      &lt;/DIV&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr &gt;
          &lt;td class="height"&gt;
      &lt;div class="sidebar"&gt;
          &lt;p&gt;&lt;a href="assign.php"&gt;Assign Tasks&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;&lt;a href="completed.php"&gt;Completed Tasks&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;&lt;a id="logout" href="logout.php"&gt;Sign Out&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
      &lt;DIV class="tables" align="center" &gt;
          &lt;table id="tasks"&gt;&lt;/table&gt;
          &lt;div id="navTasks"&gt;&lt;/div&gt;
      &lt;/DIV&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>
  and the CSS:</p>
  
  <pre><code>tr,td {
  margin: 0;
  padding: 0;
  border: 0; 
  outline: 0;
  font-size: 100%;
  background: transparent; }.tables{
  
  min-width: 400px;}.header{
  height: 100px;
  width: 100%;
  min-width: 500px;
  background-color: #3E97D1;
  border: solid 1px #681A38;
  border-left: none;}.title{
  font-size: 25px;}table{
  border-collapse: collapse;
  border: none;
  padding: 0;
  margin: 0px;
  border-spacing: 0px;
  width: 99%;
  outline: 0;
  height: 100%;}.height {
  height: 99%;}.sidebar{
  background-color: #009B95;
  padding: 2px;
  text-align: left;
  border-right: solid 1px #681A38;
  border-bottom: solid 1px #681A38;
  width: 120px;
  height: 99%;}
  </code></pre>