title: jQuery Dialog Widget Problems in IE10 Compatibility View and IE9
body: <p>I will preface my post with the caveat that I am a brand-new jQuery user.  I am an experienced programmer -- started programming on the IBM System/34 in 1985.  I have only been doing web-development for the past 5 years --  using the IBM System i as the http server; writing applications for K-12 schools (attendance, grading, etc.).</p>
  
  <p>I have fallen in love with jQuery -- it's the closest thing to poetry I have ever come across in the programming world.  However, I still have A LOT to learn about it.</p>
  
  <p>Anyway ... to my problem.  (BTW: I have searched extensively, both on the StackOverflow site and this site, but cannot find a reference to the issue I am having.)</p>
  
  <p>First of all ... for reasons I will not endeavor to explain at present, the applications I am writing must run in Internet Explorer (and IE only).  </p>
  
  <p>I have just implemented a jQuery UI modal dialog with a form containing four check boxes.  The dialog works just fine in IE10 (and in Chrome).  But, in IE10 Compatibility View, or in IE9, the dialog title bar and the dialog positioning is not working correctly.  Here is a screenshot of what is happening:</p>
  
  <p><a href="http://i278.photobucket.com/albums/kk110/schryver1960/IE9-jquery-problem.jpg" rel="nofollow">http://i278.photobucket.com/albums/kk110/schryver1960/IE9-jquery-problem.jpg</a></p>
  
  <p>As you can see, the dialog title is not appearing correctly inside the "title bar" of the dialog, nor is the "X" of the title bar appearing.  Also, the dialog should be centered in the window, but instead it appears to be positioned at "left", "top".  I have tried defining the position property, but it doesn't make any difference to the placement of the dialog -- it always positions itself at the upper left-hand corner of the window.</p>
  
  <p>What you are seeing in the image is as follows: the "top" window is the "header" portion down to the menu bar (Home, Menus, Active, etc.).  The top window defines an iframe inside of which is the application window. The application window consists of the "header" (everything down to and including the column headings) and a "footer" (the bar with the "Start Over" and "Submit Changes" buttons).  The "subfile" rows and columns are inside an iframe defined within the application window.  So, to review: Top Window with an iframe; Application Window inside that iframe, with an iframe of its own; student course requests lines inside that iframe.  (I hope that makes sense.)</p>
  
  <p>The div for the dialog is coded on the page that outputs the application window (entitled "Maintain Student Course Requests") as follows:</p>
  
  <pre><code>&lt;div id="schOptions" class="ui-widget"&gt;
    &lt;table width="270" border="0" cellpadding="2" cellspacing="0"&gt;
          &lt;tr valign="middle"&gt;
                &lt;td height="22" width="10"&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td width="220" class="stdLabel"&lt;/td&gt;
                &lt;td width="20" align="center"&gt;&lt;input name="PFILL" type="checkbox" id="PFILL" value="Y"&gt;&lt;/td&gt;
                &lt;td width="10"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr valign="middle"&gt;
                &lt;td height="22"&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td class="stdLabel"&gt;Use Alternate Match Groups?&lt;/td&gt;
                &lt;td align="center"&gt;&lt;input type="checkbox" name="PMGN" id="PMGN" value="Y"&gt;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr valign="middle"&gt;
                &lt;td height="22"&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td class="stdLabel"&gt;Schedule Study Hall?&lt;/td&gt;
                &lt;td align="center"&gt;&lt;input type="checkbox" name="PSTUDY" id="PSTUDY" value="Y"&gt;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr valign="middle"&gt;
                &lt;td height="22"&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td class="stdLabel"&gt;Reset Previous Requests?&lt;/td&gt;
                &lt;td align="center"&gt;&lt;input type="checkbox" name="PRESET" id="PRESET" value="Y"&gt;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
          &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is the code that initializes the dialog:</p>
  
  <pre><code>    &lt;script type="text/javascript" language="javascript"&gt;
  /*====================
   * jQuery Ready Shell
   *====================*/
  $(document).ready(function() {
  
  
  
  /*=====================================
   * Initialize Scheduler Options Dialog
   *=====================================*/
  $('#schOptions').dialog({
         autoOpen: false,
         title: "Scheduler Options",
         modal: true, 
         buttons: [{
           text: "Cancel",
           click: function() { 
        // Close dialog
           $(this).dialog("close");
          } // End "click" event function
         }, // End "Cancel" button definition
         {
           text: "Process",
           click: function() {
        // Process scheduler
           processScheduler();
        // Close dialog
           $(this).dialog("close"); 
          } // End "click" event function
         }] // End "Process" button definition
    }); // End #schOptions dialog definition
  
  
  
  }); // End Ready Shell
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Pretty simple and straightforward, it would seem.  And, as I have already mentioned, everything works just fine in Chrome, and also in IE10, but not in IE10 compatibility view, nor in IE9.  Unfortunately, I can't just tell users to update to IE10.  In fact, we can't even use IE10 at present, because of other problems IE10 presents with our applications.  So, most of our users (there are several thousand at any given moment during the day) are actually using IE10 in compatibility view.</p>
  
  <p>Any ideas?</p>
  
  <p>Thanks.</p>
  
  <p>edited to add: </p>
  
  <p>This may be important, and I neglected to mention it above: I am retrieving the .css and .js libraries via the Google CDN; using the "Smoothness" theme for the time being (although I will definitely move to a custom theme before too long).  Here is that code:</p>
  
  <pre><code>    &lt;!-- jQuery Style Sheet (Theme: Smoothness) --&gt;
  &lt;link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"&gt;
  
  &lt;!-- jQuery and jQuery-ui --&gt;
  &lt;script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Incidentally, the dialog is opened by a button that it covers up by appearing in the top left corner of the window.</p>
  
  <p>Here is the relevant code:</p>
  
  <pre><code>    &lt;a name="RunScheduler" href="javascript: promptScheduler();" 
        class="buttonLink"&gt;Run Scheduler&lt;/a&gt;
  
  /*=================================================
   * promptScheduler -- Prompt for Scheduler Options
   *=================================================*/
  function promptScheduler() {
        $("#schOptions").dialog("open");
  } 
  </code></pre>
  
  <p>Also, the modal dialog "shading" effect on the background window area, as well as other style properties of the dialog window, are not working.  It would seem that an entire set of style classes is not being correctly applied, including the dialog window positioning properties.  The question is why?  It appears that <em>some</em> of the .css properties are taking effect.  </p>