note: Thanks Charlie for helping with first issue! I'm down to one issue with the easyslider jquery plugin.
If you look at http://www.movieeye.com/index-new.jsp in 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);
