I think it is set-up that way to slide 6 li's at a time, as opposed to one at a time.
I changed #slider as suggested, no impact. What is weird is how it works in FF without issue. On Jul 20, 8:55 am, Liam Potter <[email protected]> wrote: > I've just had a closer look and the way you have this setup is messed > up, why do you have 3 li's containing 6 divs each, rather then using an > li to contain each thumbnail and caption? > > > > Alan wrote: > > note: Thanks Charlie for helping with first issue! > > > I'm down to one issue with the easyslider jquery plugin. > > > If you look athttp://www.movieeye.com/index-new.jspin IE 7, you'll > > notice the text is overflowing and creating a horizontal scrollbar on > > the browser page. > > > I'm not much of a coder, and am pretty lost here. Have tried messing > > with CSS stuff, but nothing seems to stop that overflow. > > > I'd greatly appreciate any help! > > > Code for page is: > > ---------------------------- > > <!-- START test slider code --> > > <div id="slidercontainer"> > > <div id="slidercontent"> > > <div id="slider" align="center" style="display: none;"> > > <ul> > > <% > > dim celeb_mail_results_with_photos_display_how_many : > > celeb_mail_results_with_photos_display_how_many = 18 > > dim celeb_mail_results_with_photos_num_per_row : > > celeb_mail_results_with_photos_num_per_row = 6 > > dim celeb_mail_results_link_name : > > celeb_mail_results_link_name = true > > %> > > <!-- #include virtual="/includes/sliders/ > > slider_results_photos.jsp" --> > > > </ul> > > </div> > > </div> > > </div> > > <!-- END test slider code --> > > > CSS Code looks like this > > ------------------------------------- > > @charset "utf-8"; > > /* CSS Document */ > > #slidercontent{ > > position:relative; > > } > > #slidercontainer{ > > margin:0 auto; > > position:relative; > > text-align:left; > > width:896px; > > background:#fff; > > margin-bottom:2em; > > } > > > /* clearfix */ > > > #slidercontent:after, ul:after{ > > content:"."; > > display:block; > > height:0; > > clear:both; > > visibility:hidden; > > } > > #slidercontent, ul{ > > display:block; > > } > > /* \*/ > > #slidercontent, ul{ > > min-height:1%; > > } > > * html #slidercontent, * html ul{ > > height:1%; > > } > > > /* // clearfix */ > > > /* image replacement */ > > .graphic, #header h1, #prevBtn, #nextBtn{ > > margin:0; > > padding:0; > > display:block; > > overflow:hidden; > > text-indent:-8000px; > > } > > /* // image replacement */ > > > /* Easy Slider */ > > > #slider{ > > } > > #slider ul, #slider li{ > > margin:0; > > padding:0; > > list-style:none; > > overflow:hidden; > > } > > #slider li{ > > /* > > define width and height of list item (slide) > > entire slider area will adjust according to the > > parameters provided > > here > > */ > > width:896px; > > height:171px; > > display:block; > > } > > #prevBtn, #nextBtn{ > > display:block; > > width:30px; > > height:77px; > > position:absolute; > > left:-30px; > > top:41px; > > } > > #nextBtn{ > > left:896px; > > } > > #prevBtn a, #nextBtn a{ > > display:block; > > width:30px; > > height:77px; > > background:url(/includes/sliders/images/btn_prev.gif) no-repeat 0 > > 0; > > } > > #nextBtn a{ > > background:url(/includes/sliders/images/btn_next.gif) no-repeat > > 0 0; > > } > > > /* // Easy Slider */ > > > Easy Slider code is > > ----------------------------- > > (function($) { > > > $.fn.easySlider = function(options){ > > > // default configuration properties > > var defaults = { > > prevId: 'prevBtn', > > prevText: '', > > nextId: 'nextBtn', > > nextText: '', > > controlsShow: true, > > controlsBefore: '', > > controlsAfter: '', > > controlsFade: true, > > firstId: 'firstBtn', > > firstText: 'First', > > firstShow: false, > > lastId: 'lastBtn', > > lastText: 'Last', > > lastShow: false, > > vertical: false, > > speed: 800, > > auto: false, > > pause: 4000, > > continuous: false > > }; > > > var options = $.extend(defaults, options); > > > this.each(function() { > > $('#slider').css({'display' : 'block'}); > > var obj = $(this); > > var s = $("li", obj).length; > > var w = $("li", obj).width(); > > var h = $("li", obj).height(); > > obj.width(w); > > obj.height(h); > > obj.css("overflow","hidden"); > > var ts = s-1; > > var t = 0; > > $("ul", obj).css('width',s*w); > > if(!options.vertical) $("li", obj).css('float','left'); > > > if(options.controlsShow){ > > var html = options.controlsBefore; > > if(options.firstShow) html += '<span id="'+ > > options.firstId +'"><a > > href=\"javascript:void(0);\">'+ options.firstText +'</a></span>'; > > html += ' <span id="'+ options.prevId +'"><a > > href=\"javascript:void > > (0);\">'+ options.prevText +'</a></span>'; > > html += ' <span id="'+ options.nextId +'"><a > > href=\"javascript:void > > (0);\">'+ options.nextText +'</a></span>'; > > if(options.lastShow) html += ' <span id="'+ > > options.lastId +'"><a > > href=\"javascript:void(0);\">'+ options.lastText +'</a></span>'; > > html += options.controlsAfter; > > $(obj).after(html); > > }; > > > $("a","#"+options.nextId).click(function(){ > > animate("next",true); > > }); > > $("a","#"+options.prevId).click(function(){ > > animate("prev",true); > > }); > > $("a","#"+options.firstId).click(function(){ > > animate("first",true); > > }); > > $("a","#"+options.lastId).click(function(){ > > animate("last",true); > > }); > > > function animate(dir,clicked){ > > var ot = t; > > switch(dir){ > > case "next": > > t = (ot>=ts) ? > > (options.continuous ? 0 : ts) : t+1; > > break; > > case "prev": > > t = (t<=0) ? (options.continuous > > ? ts : 0) : t-1; > > break; > > case "first": > > t = 0; > > break; > > case "last": > > t = ts; > > break; > > default: > > break; > > }; > > > var diff = Math.abs(ot-t); > > var speed = diff*options.speed; > > if(!options.vertical) { > > p = (t*w*-1); > > $("ul",obj).animate( > > { marginLeft: p }, > > speed > > ); > > } else { > > p = (t*h*-1); > > $("ul",obj).animate( > > { marginTop: p }, > > speed > > ); > > }; > > > if(!options.continuous && options.controlsFade){ > > if(t==ts){ > > $("a","#"+options.nextId).hide(); > > $("a","#"+options.lastId).hide(); > > } else { > > $("a","#"+options.nextId).show(); > > $("a","#"+options.lastId).show(); > > }; > > if(t==0){ > > $("a","#"+options.prevId).hide(); > > > > $("a","#"+options.firstId).hide(); > > } else { > > $("a","#"+options.prevId).show(); > > > > $("a","#"+options.firstId).show(); > > }; > > }; > > > if(clicked) clearTimeout(timeout); > > if(options.auto && dir=="next" && !clicked){; > > timeout = setTimeout(function(){ > > animate("next",false); > > },diff*options.speed+options.pause); > > }; > > > }; > > // init > > var timeout; > > if(options.auto){; > > timeout = setTimeout(function(){ > > animate("next",false); > > },options.pause); > > }; > > > if(!options.continuous && options.controlsFade){ > > $("a","#"+options.prevId).hide(); > > $("a","#"+options.firstId).hide(); > > }; > > > }); > > > }; > > > })(jQuery);- Hide quoted text - > > - Show quoted text -
