title: div contents scrolls back up when using overflow: auto in IE 10
body: <p>I am trying to add multiple input elements and other data inside a div and using overflow:auto for that div (using jquery to show/hide that div)</p>
  
  <p>It works fine in Firefox browser but in IE (10) the scroll bar does come when the elements are more than the height of that div, but when the user uses the scroll bar to scroll down, and then if moves the mouse over to any of the input element or other element in that div to enter data, the div content scrolls back up to the top. So the users cannot access the elements/contents of that div which are below the height of that div</p>
  
  <p>here is the link for the fiddle where you can see the code
  <a href="http://jsfiddle.net/euMJn/1/" rel="nofollow">http://jsfiddle.net/euMJn/1/</a></p>
  
  <p>code of that html page  (as code is required with the jsfiddle link)</p>
  
  <p>Any help or direction would be appreciated</p>
  
  <p>Thank you for you help and time</p>
  
  <p>----code starts below----</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Div Scroll&lt;/title&gt;
  
  &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css"
          type="text/css" rel="Stylesheet" /&gt;
  
  &lt;style&gt;
  #outer{
      width:400px;
      height:400px;
      position:absolute;
      left:30px;
      top:30px;
      border-style:solid;
      border-width:1px;
      z-index: 1;
      display:none;
      overflow: auto;
  
  }
  
  #inner{
      width:300px;
      height:300px;
      position:relative;
      left:20px;
      top:20px;
      overflow: auto;
  }
  
  &lt;/style&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;script &gt;
   $(document).ready(function(){  
  
  
      $('#trigger').mouseover(function(e){                
          $('#outer').show();                                    
      }); 
  
      $('#trigger').mouseout(function(){
          $('#outer').hide();
      });
  
      $('#outer').mouseover(function(){
          $('#outer').show();         
      }); 
  
      $('#outer').mouseout(function(){
          $('#outer').hide();
      }); 
  
  });     
  &lt;/script&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  &lt;button id='trigger' style="background-color:yellow"&gt; Mouse over here&lt;/button&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;div id="outer"&gt; 
      &lt;div id="inner"&gt; 
          &lt;p&gt;Text above input01&lt;/p&gt;
          &lt;label for='input01'&gt;Input 1: &lt;/label&gt; &lt;input name='input01' id='inp01' type='text' size='25' value='input' &gt;
          &lt;br&gt;
          &lt;p&gt;Text above input02&lt;/p&gt;       
          &lt;label for='input02'&gt;Input 2: &lt;/label&gt; &lt;input name='input02' id='inp02' type='text' size='25' value='input' &gt;
          &lt;br&gt;
          &lt;p&gt;Text above input03&lt;/p&gt;       
          &lt;label for='input03'&gt;Input 3: &lt;/label&gt; &lt;input name='input03' id='inp03' type='text' size='25' value='input' &gt;
          &lt;br&gt;
          &lt;p&gt;Text above input04&lt;/p&gt;       
          &lt;label for='input04'&gt;Input 4: &lt;/label&gt; &lt;input name='input04' id='inp04' type='text' size='25' value='input' &gt;
          &lt;br&gt;
          &lt;p&gt;Text above input05&lt;/p&gt;       
          &lt;label for='input05'&gt;Input 5: &lt;/label&gt; &lt;input name='input05' id='inp05' type='text' size='25' value='input' &gt;
          &lt;br&gt;
          &lt;p&gt;Text above input06&lt;/p&gt;       
          &lt;label for='input06'&gt;Input 6: &lt;/label&gt; &lt;input name='input06' id='inp06' type='text' size='25' value='input' &gt;
          &lt;p&gt;Text above input07&lt;/p&gt;       
          &lt;label for='input07'&gt;Input 7: &lt;/label&gt; &lt;input name='input06' id='inp07' type='text' size='25' value='input' &gt;
          &lt;p&gt;Text above input08&lt;/p&gt;       
          &lt;label for='input08'&gt;Input 8: &lt;/label&gt; &lt;input name='input06' id='inp08' type='text' size='25' value='input' &gt;
          &lt;p&gt;Text above input09&lt;/p&gt;       
          &lt;label for='input09'&gt;Input 9: &lt;/label&gt; &lt;input name='input06' id='inp09' type='text' size='25' value='input' &gt;
          &lt;p&gt;Text above input10&lt;/p&gt;       
          &lt;label for='input10'&gt;Input 10: &lt;/label&gt; &lt;input name='input06' id='inp10' type='text' size='25' value='input' &gt;      
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>