Slider (images and text) doesn't display in Safari or Chrome, but works well with Firefox

StackOverflow https://stackoverflow.com/questions/20352452

  •  07-08-2022
  •  | 
  •  

Question

In the html doc I embeded it like that: I don't see the problem here! Although I have never used any slider code before. 

<head>  
<link rel="stylesheet" type="text/css" media="screen" href="css/slider.css">
<script>
window.jQuery(document).ready(function(){
window.jQuery('.slider')._TMS({
show:0,
pauseOnHover:true,
prevBu:'.prev',
nextBu:'.next',
playBu:false,
duration:500,
preset:'fade',
pagination:true,
pagNums:false,
slideshow:5000,
numStatus:false,
banners:'fromBottom',
waitBannerAnimation:false,
progressBar:false
})
}) 
window.jQuery(function(){
if(window.jQuery(window).width() <= 1066)
{
window.jQuery("#slider .prev").css("left", "55px")
window.jQuery("#slider .next").css("right", "55px")
}
})
</script>
</head>

Then in my body it looks like that: 

<div id="slider">
    <div class="slider-block">
      <div class="slider">
          <ul class="items">
              <li><img src="images/Helikopter_Nockberge.jpg" alt="" /><div class="banner"><div><span>Routes</span><strong>Book a Flight</strong><p>Travel in First Class style - quick and comfortably from the airport to your Hotel. From your Hotel to the Formula One Race in Spielberg in less than 25 minutes. </p><a href="#" class="button">More Info</a></div></div></li>
              <li><img src="images/Helicopter_NockResort_Bad_Kleinkirchheim.jpg" alt="" /><div class="banner"><div><span>Services</span><strong>Landing and Starting</strong><p>Arrange your air journey to and from Bad Kleinkirchheim in the Nockmountains.</p><a href="#" class="button">More Info</a></div></div></li>
              <li><img src="images/Heliport_BadKleinkirchheim.jpg" alt="" /><div class="banner"><div><span>Location</span><strong>Bad Kleinkirchheim - Austrian Alps</strong><p>The Heliport Bad Kleinkirchheim is situated in the middle of the Ski Resort and Hiking Paradise.</p><a href="#" class="button">More Info</a></div></div></li>
          </ul>
      </div>
      <a href="#" class="prev"></a>
      <a href="#" class="next"></a>
    </div>
</div>

And here is my slider css file: to be honest I dont understand all of that code! 

.slider { width:100%; height:400px; position:relative; padding-bottom:10px; overflow:hidden;}
.slider-block {width:1066px; position:absolute; left:50%; margin-left:-533px;}
.slider { width:960px; height:400px; margin:0 auto;}
.items { display:none;}

.pagination { display:none;}

.banner {background:url(../images/banner1.png) 0 0 repeat; position:absolute; z-index:100; top:0px; left:690px; width:270px; height:400px; font-size:11px; line-height:22px; color:#000; font-family:Arial, Helvetica, sans-serif; }
.banner>div {padding: 40px 30px 0px 40px;}
.banner span {display:block; font-size:35px; line-height:42px; color:#353535; font-weight:bold; font-family: 'Open Sans Condensed', sans-serif;}
.banner strong {display:block; font-size:20px; line-height:25px; color:#9f9fa6; font-weight:bold; font-family: 'Open Sans Condensed', sans-serif; margin-top:-3px;}
.banner p {text-transform:uppercase; margin-top:18px;}
.banner a {margin-top:52px;}

.prev {position:absolute; top:180px; left:0px; background:url(../images/prev.gif) 0 0 no-repeat; width:23px; height:41px; z-index:111 !important; display:inline-block;}
.prev:hover {background-position:0 bottom;}
.next {position:absolute; top:180px; right:0px; background:url(../images/next.gif) 0 0 no-repeat; width:23px; height:41px; z-index:111 !important; display:inline-block;}
.next:hover {background-position:0 bottom;}

No correct solution

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top