Search code examples
jquerysliderjssor

jssor slider missing content in IE but ok in Chrome


I have created a simple slider using jssor, and it works fine in Chrome. However, when I view the same slide in IE 11, the text is missing (but the background image is present).

Can someone tell me what is wrong with this code - why won't the text show up in IE 11? When I visit the jssor.com website with IE the demos work fine.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="/include/jquery/slider-master/js/jssor.slider.mini.js"></script>
  </head>
  <body>
    <div id="content">
      <div id="panel_topslider" style="position: relative; top: 0px; left: 0px; width: 500px; height: 350px;">
        <div data-u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 500px; height: 350px;">
          <div>
            <img data-u="image" src="/images/banners/911-call-center.jpg" alt="911 call center"/>
            <div style="color:white;font-size:200%;">THIS TEXT DOES NOT SHOW UP IN IE 11</div>
          </div>
        </div>
      </div>
    </div>
    <script>
      jQuery(document).ready(function ($) {
        options = { $AutoPlay: true, $FillMode: 1, $AutoPlayInterval: 8000 };   
        valueobject = new $JssorSlider$('panel_topslider', options);
      });
    </script>
  </body>
</html>

Solution

  • Please specify position, top and left for the element.

    <div style="position: absolute; top: 0px; left: 0px; color:white;font-size:200%;">THIS TEXT WILL SHOW UP IN IE 11</div>