title: jQuery Slider Doesn't Work in IE
body: <p>My code works perfectly with all browsers except IE. I tried every solution I could find on the forums with no luck. I am still learning JavaScript, so I will learn jQuery later. The issue is that in IE the slides appear vertically with no effect. Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta content="text/html; charset=utf-8" http-equiv="Content-Type" /&gt;
      &lt;link href="stylesheet...css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;title&gt;div test&lt;/title&gt;
      &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="jquery.bxSlider.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(function(){
              var slider = $('#slider1').bxSlider({
                  controls: false
              });
  
              $('#bx-prev').click(function () {
                  slider.goToPreviousSlide();
                  return false;
              });
  
              $('#bx-next').click(function () {
                  slider.goToNextSlide();
                  return false;
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="slider1"&gt;
          &lt;div&gt;
              &lt;div id="wrapper"&gt;
                  &lt;div id="head"&gt;&lt;img alt="logo" align="left" src="logo.png"/&gt;&lt;/div&gt;
                  &lt;div id="main"&gt; &lt;div id="content"&gt;content&lt;/div&gt; &lt;/div&gt;
                  &lt;div id="rash"&gt;&lt;img alt="r" align="middle" 
                                      style="position:relative;top:-70px;" 
                                      src="image1.png"/&gt;&lt;/div&gt;
                  &lt;div style="clear:both"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;div id="wrapper"&gt;
                  &lt;div id="head"&gt;&lt;img alt="logo" align="left" src="logo.png"/&gt;&lt;/div&gt;
                  &lt;div id="main"&gt; &lt;div id="content"&gt;content&lt;/div&gt; &lt;/div&gt;
                  &lt;div id="rash"&gt;&lt;img alt="r" align="middle" 
                                      style="position:relative;top:-70px;"
                                      src="image1.png"/&gt;&lt;/div&gt;
                  &lt;div style="clear:both"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt;page3&lt;/div&gt;
          &lt;div&gt;page4&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="bx-next"&gt;next&lt;/div&gt;
      &lt;div id="bx-prev"&gt;prev&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is my style sheet:</p>
  
  <pre><code>div#head {
      width:100%;
      height:100px;
      /*background-color:antiquewhite;*/
      margin-bottom:100px;
  }
  
  div#content {
      border-left: 2px solid #F0F8FF;
      border-right: 2px solid #8a815d;
      border-top: 2px solid #8a815d;
      border-bottom: 2px solid #8a815d;
      width:400px;
      height:300px;
      -webkit-border-radius: 0px 28px 20px 0px;
      -moz-border-radius: 0px 28px 20px 0px;
      border-radius: 0px 28px 20px 0px;
      font-family:Arial,Helvetica,sans-serif;
      color:#8a815d;
      padding-left:100px;
      background-color:#F0FFFF;
      background-color: rgba(215,227,211,0.3);
      position:relative;
      top:20px;
      left:0px
  }
  
  
  div#wrapper {
      width: 100%;
      margin-top: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      margin-right: 0px;
      padding: 0px;
  }
  
  div#main {
      /* background-color:black;*/
      width:50%;
      height:360px;
      float:left;
  }
  
  div#rash {
      float:right;
      /*background-color:blue;*/
      height:360px;
      width:50%;
  }
  
  body {
      background-color: #E8F3F9;
      background-image: url('squares layer.png');
      background-repeat:no-repeat;
      background-size:cover;
      background-position:center;
  }
  
  /*next button*/
  #bx-next {
      position:absolute;
      top:45%;
      right:3px;
      z-index:998;
      width: 30px;
      height: 30px;
      text-indent: -999999px;
      background: url(gray_next.png) no-repeat 0 -30px;
  }
  
  /*previous button*/
  #bx-prev {
      position:absolute;
      top:45%;
      left:4px;
      z-index:998;
      width: 30px;
      height: 30px;
      text-indent: -999999px;
      background: url(gray_prev.png) no-repeat 0 -30px;
  }
  </code></pre>