title: Nivo Slider not working with IE7
body: <p>I have reviewed quite a few posts on this site concerning this issue with Nivo Slider. I have checked my commas in the the javascript and it looks right to me:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(window).load(function() {
      $('#slider').nivoSlider({
          effect:'fade', 
          slices:15,
          animSpeed:500, 
          pauseTime:4000,
          startSlide:0,
          directionNav:false, 
          directionNavHide:false, 
          controlNav:true,
          controlNavThumbs:false, 
          controlNavThumbsFromRel:false, 
          controlNavThumbsSearch: '.jpg', 
          controlNavThumbsReplace: '_thumb.jpg', 
          keyboardNav:true,
          pauseOnHover:true, 
          manualAdvance:false, 
          captionOpacity:0.9, 
          beforeChange: function(){},
          afterChange: function(){},
          slideshowEnd: function(){}, 
          lastSlide: function(){}, 
          afterLoad: function(){} 
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the html it is referencing. The folder path seems to be correct (afterall, it's working in other browsers!):</p>
  
  <pre><code>&lt;div id="slider_wrapper"&gt;
          &lt;div id="slider"&gt;
              &lt;img src="/CoVPrototype/images/nivoslider/_img1.jpg" alt="" title="Discover City Parks" /&gt;
              &lt;img src="/CoVPrototype/images/nivoslider/_img2.jpg" alt="" title="Enjoy Our Beautiful City" /&gt;
              &lt;img src="/CoVPrototype/images/nivoslider/_img3.jpg" alt="" title="This is an example of a caption" /&gt;
              &lt;img src="/CoVPrototype/images/nivoslider/_img4.jpg" alt="" title="This is Our Home" /&gt;
              &lt;img src="/CoVPrototype/images/nivoslider/_img5.jpg" alt="" title="Mild Tempuratures and Natural Beauty" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and finally, here is the link to the javascript:</p>
  
  <pre><code>&lt;script src="/CoVPrototype/js/jquery.nivo.slider.pack.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have wasted half a day trying to get this issue resolved! Hopefully this mighty list can spot the problem!!</p>
  
  <p>Thought I would add the css too in case this could be the culprit somehow:</p>
  
  <pre><code>#slider_wrapper {
      margin:0 auto;
      width:740px;
      height:360px;
  }
  #slider {
      width:738px; /* Change this to your images width */
      height:360px; /* Change this to your images height */
      background:url(/CoVPrototype/images/nivoslider/loading.gif) no-repeat 50% 50%;
      overflow:hidden;
      margin-top:25px;
      left:-96px;
      /*--Top right rounded corner--*/
      -moz-border-radius-topright: 5px;
      -khtml-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;
      /*--Top left rounded corner--*/
      -moz-border-radius-topleft: 5px;
      -khtml-border-radius-topleft: 5px;
      -webkit-border-top-left-radius: 5px;
      /*--Bottom right rounded corner--*/
      -moz-border-radius-bottomright: 5px;
      -khtml-border-radius-bottomright: 5px;
      -webkit-border-bottom-right-radius: 5px;
      /*--Bottom left rounded corner--*/
      -moz-border-radius-bottomleft: 5px;
      -khtml-border-radius-bottomleft: 5px;
      -webkit-border-bottom-left-radius: 5px;
  }
  #slider img {
      position:absolute;
      top:0px;
      left:0px;
      display:none;
  }
  #slider a {
      border:0;
      display:block;
  }
  
  .nivoSlider {
      position:relative;
  }
  .nivoSlider img {
      position:absolute;
      top:0px;
      left:0px;
  }
  /* If an image is wrapped in a link */
  .nivoSlider a.nivo-imageLink {
      position:absolute;
      top:0px;
      left:0px;
      width:100%;
      height:100%;
      border:0;
      padding:0;
      margin:0;
      z-index:60;
      display:block;
  }
  /* The slices in the Slider */
  .nivo-slice {
      display:block;
      position:absolute;
      z-index:50;
      height:100%;
      /*--Top right rounded corner--*/
      -moz-border-radius-topright: 5px;
      -khtml-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;
      /*--Top left rounded corner--*/
      -moz-border-radius-topleft: 5px;
      -khtml-border-radius-topleft: 5px;
      -webkit-border-top-left-radius: 5px;
      /*--Bottom right rounded corner--*/
      -moz-border-radius-bottomright: 5px;
      -khtml-border-radius-bottomright: 5px;
      -webkit-border-bottom-right-radius: 5px;
      /*--Bottom left rounded corner--*/
      -moz-border-radius-bottomleft: 5px;
      -khtml-border-radius-bottomleft: 5px;
      -webkit-border-bottom-left-radius: 5px;
  }
  /* Caption styles */
  .nivo-caption {
      position:absolute;
      left:0px;
      bottom:0px;
      background:#F1F0EB;
      color:#5D79A1;
      filter: alpha(opacity=90);
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
   /* Overridden by captionOpacity setting */
      width:100%;
      z-index:89;
      height:32px;
      /*--Bottom right rounded corner--*/
      -moz-border-radius-bottomright: 5px;
      -khtml-border-radius-bottomright: 5px;
      -webkit-border-bottom-right-radius: 5px;
      /*--Bottom left rounded corner--*/
      -moz-border-radius-bottomleft: 5px;
      -khtml-border-radius-bottomleft: 5px;
      -webkit-border-bottom-left-radius: 5px;
  }
  .nivo-caption p {
      padding:8px 5px 5px 11px;
      margin:0;
      font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
      font-size:1.1em;
  }
  .nivo-caption a {
      display:inline !important;
  }
  .nivo-html-caption {
      display:none;
  }
  </code></pre>