title: how to position images with overflow?
body: <p>I do have div with a fixed height, containing an Image higher than the div's height.
  I want to position this image in the middle of the div, and I use jquery-ui position().
  However the image is clipped, the contents outside the div is not shown. I tried the overflow-y: visible (overflow-x must be hidden). I want the image to be completely visible I think I'm missing something trivial.</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"&gt;
  &lt;head&gt;
    &lt;meta http-equiv="Content-type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt;Jeroen's Plaatjes Presentator&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8"&gt;
        &lt;script src="js/jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
        &lt;script src="js/jquery-ui-1.8.10.custom.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
        &lt;script&gt;
      $(function() {
        $('#focus_img').position({my: 'center center', at: 'center center', of: '#panel_1'});
      });
        &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;div id="wrapper"&gt;
      &lt;div class="scroll"&gt;
        &lt;div class="panel" id="panel_1"&gt;
          &lt;img src="images/middle/kameleon.png" alt="kameleon"  id="focus_img" style="{width:239 height:160}"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="content" style="margin-top:50px;margin-left:auto;"&gt;
        &lt;table width="100%"&gt;
      &lt;tr&gt;&lt;td id="left" width="50%"&gt;&lt;div class="stage"&gt;&lt;/div&gt;
        &lt;/td&gt;&lt;td id="bright" width="50%"&gt;&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the css looks like:</p>
  
  <pre><code>#wrapper {
      padding-top: 150px;
  }
  #slider {
      position: relative;   
  }
  
  .scroll {
      overflow-x: hidden;
      overflow-y: visible;
      width: 100%;
      margin: 0 auto;
      position: relative;
      border: 2px solid black;
      height: 50px;
  }
  </code></pre>