title: jQuery: Problem with windowed controls in IE6
body: <p>I have a web page which contains a select box. When I open a  jQuery Dialog it is displayed partly behind the select box.</p>
  
  <p>How should I approach this problem? Should I hide the select box or does jQuery offer some kind of 'shim' solution. (I have Googled but didn't find anything)</p>
  
  <p>Here is some code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;testJQuery&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;meta name="GENERATOR" content="Rational Application Developer"&gt;
  
          &lt;link rel="stylesheet" href="theme/smooth/theme.css" type="text/css" media="screen" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;a class="pop" href="nix"&gt;Click me&lt;/a&gt;
  
      &lt;p/&gt;
  
      &lt;select size="20"&gt;
          &lt;option&gt;s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd&lt;/option&gt;
          &lt;option&gt;s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd&lt;/option&gt;
          &lt;option&gt;s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd&lt;/option&gt;
          &lt;option&gt;s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd&lt;/option&gt;
          &lt;option&gt;s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;div id="xyz" class="flora hiddenAsset"&gt;
          &lt;div id="dialog" title="Edit Link"&gt;
              &lt;p&gt;Enter the link details:&lt;/p&gt;
              &lt;table width="80%" border="1"&gt;
                  &lt;tr&gt;&lt;td&gt;URL&lt;/td&gt;&lt;td&gt;&lt;input id="url" style="width:100%" maxlength="200" value="{url}"/&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;Title&lt;/td&gt;&lt;td&gt;&lt;input id="title" style="width:100%" maxlength="200" value="{title}"/&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;Target&lt;/td&gt;&lt;td&gt;&lt;input id="target" size="20" maxlength="200" value="{target}"/&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;script type="text/javascript" src="../script/firebug/firebug.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-1.2.6.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-ui-1.5.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jqSOAPClient.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  (function($){
      $(document).ready(function(){
          console.debug('ready');
          $('.hiddenAsset').hide();
  
          $('a.pop').bind('click', showDialog);
          console.debug('ready - done');
      });
  
      var showDialog = function(){
          console.debug('show');
          $('#dialog').dialog({
              modal: true,
              overlay: {
                  backgroundColor: '#666',
                  opacity: '.3',
                  filter: 'alpha(opacity=30)'
              },
              width: '400px',
              height: '300px',
              buttons: {
                  Ok: function() {
                      $(this).dialog('close');
                  },
                  Cancel: function() {
                      $(this).dialog('close');
                  }
              }
          });
          console.debug('show-done');
          return false;
      };
  })(jQuery);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>