Member Avatar for jonsan32

My slider works well enough in all browsers except for IE, where the overflow isn't hidden at all. I've tried adding position absolute to some parts and I've tried adding position relative to others, but nothing has worked. Any answer to this would be great. Thanks.

 <script type="text/javascript" src=""></script>
 <script type="text/javascript" src=""></script>
 <script type="text/javascript">
  $(document).ready(function(){ 
   $("#slider").easySlider({
    auto: true, 
    continuous: true,
    numeric: true
   });
  }); 
 </script>

<style type="text/css"/> 

 h1{
  font-size:180%;
  font-weight:normal;
  margin:0;
  padding:0 20px;
  }
 h2{
  font-size:160%;
  font-weight:normal;
  } 
 h3{
  font-size:140%;
  font-weight:normal;
  } 
 img{border:none;}
 pre{
  display:block;
  font:12px "Courier New", Courier, monospace;
  padding:10px;
  border:1px solid #bae2f0;
  background:#e3f4f9; 
  margin:.5em 0;
  width:674px;
  } 

    /* image replacement */
        .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */

 #container5{ 
  margin:0 auto;
  position:relative;
  text-align:left;
  width:696px;
  background:#fff;  
  margin-bottom:2em;
  } 
 #header5{
  height:80px;
  line-height:80px;
  background:#5DC9E1;
  color:#fff;
  }    
 #content5{
  position:relative;
  }   

/* Easy Slider */

 #slider ul, #slider li,
 #slider2 ul, #slider2 li{
  margin:0;
  padding:0;
  list-style:none;
  }
 #slider2{margin-top:1em;}
 #slider li, #slider2 li{ 
  /* 
   define width and height of list item (slide)
   entire slider area will adjust according to the parameters provided here
  */ 
  width:696px;
  height:241px;
  overflow:hidden; 
  } 
 #prevBtn, #nextBtn,
 #slider1next, #slider1prev{ 
  display:block;
  width:30px;
  height:77px;
  position:absolute;
  left:-30px;
  top:71px;
  z-index:1000;
  } 
 #nextBtn, #slider1next{ 
  left:696px;
  }              
 #prevBtn a, #nextBtn a,
 #slider1next a, #slider1prev a{  
  display:block;
  position:relative;
  width:30px;
  height:77px;
  background:url(../images/btn_prev.gif) no-repeat 0 0; 
  } 
 #nextBtn a, #slider1next a{ 
  background:url(../images/btn_next.gif) no-repeat 0 0; 
  } 

 /* numeric controls */ 

 ol#controls{
  margin:1em 0;
  padding:0;
  height:28px; 
  }
 ol#controls li{
  margin:0 10px 0 0; 
  padding:0;
  float:left;
  list-style:none;
  height:28px;
  line-height:28px;
  }
 ol#controls li a{
  float:left;
  height:28px;
  line-height:28px;
  border:1px solid #ccc;
  background:#DAF3F8;
  color:#555;
  padding:0 10px;
  text-decoration:none;
  }
 ol#controls li.current a{
  background:#5DC9E1;
  color:#fff;
  }
 ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

/* // Easy Slider */
</style>


<table width=700><tr><td>
<div id="container5">

 <div id="header5">
  <h1>Easy Slider jQuery Plugin - Numeric and continuous demo</h1>
 </div>

 <div id="content5">

  <div id="slider">
   <ul>    
    <li><a href=""><img src="" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/7"><img src="" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/25"><img src="http://cssglobe.com/lab/easyslider1.7/images/03.jpg" alt="Css Template Preview" /></a></li>
    <li><a href="http://templatica.com/preview/26"><img src="" alt="Css Template Preview" /></a></li>
    <li><a href=""><img src="http://cssglobe.com/lab/easyslider1.7/images/05.jpg" alt="Css Template Preview" /></a></li>   
   </ul>
  </div>


 </div>

</div>
</td></tr></table>
  • 1 Contributor
  • 1 Reply
  • 296 Views
  • 12 Minutes Discussion Span
  • Latest Post Latest Post by jonsan32

Dani AI

Generated

Short note on why ’s fix worked and how to make it robust across IE versions.

The easySlider plugin moves a wide “track” (the UL) left/right while the visible slides stay inside a fixed-width viewport. If the viewport isn’t the element doing the clipping, or if IE hasn’t given that element layout, the track will remain visible outside the box. Adding horizontal clipping (as did) forces the browser to hide the overflow; in older IE variants you may also need to ensure the element has layout so the clipping actually takes effect.

Practical, resilient approach (use a dedicated viewport/wrapper rather than relying on an ancestor or inline styles):

/* clip the animated track — apply to the immediate wrapper around the UL */
.slider-viewport {
  position: relative;
  overflow: hidden;      /* hides the sliding track */
  zoom: 1;               /* triggers hasLayout in legacy IE */
}

/* make slides/images behave like blocks to avoid extra whitespace */
.slider-viewport img { display: block; }

Troubleshooting checklist: confirm the viewport actually contains the animated element (inspect with F12 devtools), temporarily add an outline/background to see box edges, make sure UL width equals number-of-slides × slide width (so slides don’t wrap), and remove unexpected margins/padding on UL/LI. If the plugin clones nodes for continuous mode, clipping must be on the wrapper that encloses those clones. Using overflow-x:hidden works too in modern IE, but the overflow:hidden + zoom:1 pattern is the most compatible for older IE.

Member Avatar for jonsan32

<div id="content5" style="overflow-x:hidden;"> did the trick.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.