title: bxslider not working in IE9
body: <p>I have a bxslider plugin working on a site I am making for somebody and it works in all browsers except IE9 (possibly earlier versions of IE also but all I have to test it on is 9)</p>
  
  <p>I'm wondering where I'm going wrong in my code. I'll mention it's running alongside the scrolldeck parallax plugin</p>
  
  <p>Here is the related code from my header (calling the bxslider and scrolldeck parallax):</p>
  
  <pre><code>&lt;link href="style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="tipTip.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/jquery.tipTip.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.bxslider.js"&gt;&lt;/script&gt;&lt;!-- bxSlider Javascript file --&gt;
  &lt;link href="jquery.bxslider.css" rel="stylesheet" /&gt;&lt;!-- bxSlider CSS file --&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $('#nav').localScroll(800);
  
      //.parallax(xPosition, speedFactor, outerHeight) options:
      //xPosition - Horizontal position of the element
      //inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
      //outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
      $('#intro').parallax("50%", 0.6);
      $('#second').parallax("50%", 0.5);
      $('.bxslider').parallax("50%", 0.8);
      $('#third').parallax("50%", 0.6);
      $('#fourth').parallax("50%", 0.5);
      $('#fifth').parallax("50%", 0.5);
      $('#sixth').parallax("50%", 0.8);
  
      $('.bxslider').bxSlider();
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is where the bxslider is in the body:</p>
  
  <pre><code>&lt;div id="third"&gt;
          &lt;div class="float-slider"&gt;
              &lt;!-- &lt;ul class="bxslider"&gt;
                   &lt;li&gt;&lt;img src="images/thirdBG3.jpg" /&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;img src="images/thirdBG4.jpg" /&gt;&lt;/li&gt;
              &lt;/ul&gt; --&gt;
  
              &lt;ul class="bxslider"&gt;
                   &lt;li&gt;
                      &lt;div class="slider-img" style="background: url(images/thirdBG3.jpg) 50%" &gt;
                          &lt;div class="textBox"&gt;&lt;h2 style="margin:0px;padding:0px"&gt;The Making Of A Monarch&lt;/h2&gt;
                  &lt;p&gt;TEXT&lt;/p&gt;&lt;/div&gt;
                      &lt;/div&gt;
                   &lt;/li&gt;
                   &lt;li&gt;
                      &lt;div class="slider-img" style="background: url(images/thirdBG4.jpg) 50%" &gt;
                          &lt;div&gt;more Text here&lt;/div&gt;
                      &lt;/div&gt;
                   &lt;/li&gt;   
              &lt;/ul&gt;
          &lt;/div&gt;   
                  &lt;div class="float-left"&gt;
                  &lt;div class="story"&gt;
              &lt;/div&gt;
          &lt;/div&gt; &lt;!--.story--&gt;
      &lt;/div&gt; &lt;!--#third--&gt;
  </code></pre>
  
  <p>And the CSS for the bxslider:</p>
  
  <pre><code>/**
   * BxSlider v4.0 - Fully loaded, responsive content slider
   * http://bxslider.com
   *
   * Written by: Steven Wanderski, 2012
   * http://stevenwanderski.com
   * (while drinking Belgian ales and listening to jazz)
   *
   * CEO and founder of bxCreative, LTD
   * http://bxcreative.com
   */
  
  
  /** RESET AND LAYOUT
  ===================================*/
  
  .bx-wrapper {
      position:absolute;
      margin: 0 0 0 0;
      padding: 0;
      /**zoom: 1;**/
      width:100%;
      height:550px;   
  }
  
  .bx-wrapper img {
      display: block;
  }
  
  /** THEME
  ===================================*/
  
  .bx-wrapper .bx-viewport {
      -moz-box-shadow: 0 0 0;
      -webkit-box-shadow: 0 0 0;
      box-shadow: 0 0 0;
      border:none;
      background: #fff;
  }
  
  .bx-wrapper .bx-pager,
  .bx-wrapper .bx-controls-auto {
      position: relative;
      bottom: 80px;
      width: 100%;
  }
  
  /* LOADER */
  
  .bx-wrapper .bx-loading {
      min-height: 50px;
      background: url(images/bx_loader.gif) center center no-repeat #fff;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 500;
  }
  
  /* PAGER */
  
  .bx-wrapper .bx-pager {
      text-align: center;
      font-size: .85em;
      font-family: Arial;
      font-weight: bold;
      color: #666;
      padding-top: 0;
  }
  
  .bx-wrapper .bx-pager .bx-pager-item,
  .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
      display: inline-block;
      *zoom: 1;
      *display: inline;
  }
  
  .bx-wrapper .bx-pager.bx-default-pager a {
      background: #666;
      text-indent: -9999px;
      display: block;
      width: 10px;
      height: 10px;
      margin: 0 5px;
      outline: 0;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
  }
  
  .bx-wrapper .bx-pager.bx-default-pager a:hover,
  .bx-wrapper .bx-pager.bx-default-pager a.active {
      background: #000;
  }
  
  /* DIRECTION CONTROLS (NEXT / PREV) */
  
  .bx-next{
      position:relative;
  }
  
  .bx-wrapper .bx-prev {
      left: 20px;
      background: url(images/controls.png) no-repeat 0 -32px;
  }
  
  .bx-wrapper .bx-next {
      right: 20px;
      background: url(images/controls.png) no-repeat -43px -32px;
  }
  
  .bx-wrapper .bx-prev:hover {
      background-position: 0 0;
  }
  
  .bx-wrapper .bx-next:hover {
      background-position: -43px 0;
  }
  
  .bx-wrapper .bx-controls-direction a { /**SIZE OF NEXT AND PREV BUTTONS**/
      position: absolute;
      top: 50%;
      margin-top: -16px;
      outline: 0;
      width: 32px;
      height: 32px;
      text-indent: -9999px;
      z-index: 100;
  }
  
  .bx-wrapper .bx-controls-direction a.disabled {
      display: none;
  }
  
  /* AUTO CONTROLS (START / STOP) */
  
  .bx-wrapper .bx-controls-auto {
      text-align: center;
  }
  
  .bx-wrapper .bx-controls-auto .bx-start {
      display: block;
      text-indent: -9999px;
      width: 10px;
      height: 11px;
      outline: 0;
      background: url(images/controls.png) -86px -11px no-repeat;
      margin: 0 3px;
  }
  
  .bx-wrapper .bx-controls-auto .bx-start:hover,
  .bx-wrapper .bx-controls-auto .bx-start.active {
      background-position: -86px 0;
  }
  
  .bx-wrapper .bx-controls-auto .bx-stop {
      display: block;
      text-indent: -9999px;
      width: 9px;
      height: 11px;
      outline: 0;
      background: url(images/controls.png) -86px -44px no-repeat;
      margin: 0 3px;
  }
  
  .bx-wrapper .bx-controls-auto .bx-stop:hover,
  .bx-wrapper .bx-controls-auto .bx-stop.active {
      background-position: -86px -33px;
  }
  
  /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
  
  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
      text-align: left;
      width: 80%;
  }
  
  .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
      right: 0;
      width: 35px;
  }
  
  /* IMAGE CAPTIONS */
  
  .bx-wrapper .bx-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      background: #666\9;
      background: rgba(80, 80, 80, 0.75);
      width: 100%;
  }
  
  .bx-wrapper .bx-caption span {
      color: #fff;
      font-family: Arial;
      display: block;
      font-size: .85em;
      padding: 10px;
  }
  </code></pre>
  
  <p>Any help would be hot. PS. Also, when I resize the window the bxslider buttons stop working...I've tried re-initializing it when the window resizes but all it does is duplicates the bxslider and creates hundreds of instances of the thing.</p>