title: jQuery UI Button doesn't move when scrolling a div in IE6 and IE7 (and disappears sometimes)
body: <p>I have a div that scrolls (the main page does not have scrollbars) and a jQuery UI Button in the content that's scrollable.  In IE6 and IE7, the button does not scroll with the div's content and it does funny things if you put the mouse over it when it's not in the correct position.</p>
  
  <p>Here's an example (jQuery 1.5 is included in the header):</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" /&gt;
  &lt;script type="text/javascript" src="Lib/jquery-1.5.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"&gt;&lt;/script&gt;
  
  &lt;div style="width: 400px; height: 300px; overflow: scroll;"&gt;
      &lt;div style="width: 400px; height: 1200px;"&gt;
          Hello world&lt;br /&gt;&lt;br /&gt;
          &lt;a href='#' id='test'&gt;test button&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
      $('#test').button();
  &lt;/script&gt;
  </code></pre>
  
  <p>I found a workaround, but it's not perfect; I catch the scroll event and call <code>.button('enable')</code> on the button element (for some reason <code>.button('refresh')</code> didn't do anything).  It makes the button scroll correctly, but now the button shows outside of the div when scrolling (it scrolls up past the top of the div and is still visible).  Here's the code:</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css" href="Lib/jquery-ui-1.8.10.custom.min.css" /&gt;
  &lt;script type="text/javascript" src="Lib/jquery-1.5.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="Lib/jquery-ui-1.8.10.custom.min.js"&gt;&lt;/script&gt;
  
  &lt;div class='scrollingDiv' style="width: 400px; height: 300px; overflow: scroll;"&gt;
      &lt;div style="width: 400px; height: 1200px;"&gt;
          Hello world&lt;br /&gt;&lt;br /&gt;
          &lt;a href='#' id='test' class='scrollingButton'&gt;test button&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
      $(function(){
          $('#test').button();
  
          $('.scrollingDiv').scroll(function() {
              $('.scrollingButton').button('enable');
          });
      });
  &lt;/script&gt;
  </code></pre>