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="http://dl.dropbox.com/u/5739741/OMAR/code/jquery.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/5739741/OMAR/code/easySlider1.7.js"></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="http://templatica.com/preview/30"><img src="http://cssglobe.com/lab/easyslider1.7/images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="http://cssglobe.com/lab/easyslider1.7/images/02.jpg" 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="http://cssglobe.com/lab/easyslider1.7/images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="http://cssglobe.com/lab/easyslider1.7/images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
</div>
</div>
</td></tr></table>
