title: FlexSlider 2: captions over image are shifting nav controls
body: <p>Trying to configure FlexSlider same way it shows on the homepage of FlexSlider website. =)</p>
  
  <p><a href="http://www.woothemes.com/flexslider/" rel="nofollow">http://www.woothemes.com/flexslider/</a></p>
  
  <p>Which has captions over image using transparent background.</p>
  
  <p>The following code works, except for the nav controls - they are shifted all the way down. </p>
  
  <p><a href="http://jsfiddle.net/aMDLP/1/" rel="nofollow">http://jsfiddle.net/aMDLP/1/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>#homepage-images img {
      display: block;
      height: 350px;
  }
  
  #homepage-images li {
      position: relative;
  }
  
  #homepage-images .flex-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      margin: 0;
      padding: 10px;
      color: white;
      background-color: rgba(0,0,0,0.5);
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id='homepage'&gt;
    &lt;div id='homepage-images' class='flexslider'&gt;
      &lt;ul class='slides'&gt;
        &lt;li&gt;&lt;img src='content/homepage/images/1.jpg' alt=''&gt;&lt;p class='flex-caption'&gt;Some captions&lt;/p&gt;&lt;/li&gt;
        &lt;li&gt;&lt;img src='content/homepage/images/2.jpg' alt=''&gt;&lt;p class='flex-caption'&gt;Some more captions&lt;/p&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
      $('#homepage-images').flexslider({
          animation: 'slide',
          slideshowSpeed: 3000,
          controlsContainer: ".flex-container",
      });
  });
  </code></pre>