Results 1 to 1 of 1

Thread: ff Problem Content Slider 2.4

  1. #1
    Join Date
    Jan 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ff Problem Content Slider 2.4

    1) Script Title: Featured Content Slider v2.4

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentslider.htm

    3) Describe problem: I get a problem on the following Homepage: www.2k-rage.com - The pagination Slider div is getting a problem in FF, but iE and chrome handle it fine. First and Second button (class named toc for all 5 buttons) are displayed in their correct way (missinterpretation of <a> tag, maybe someone could help with this as well, same thing happens in the navigation, div is not linked -> only the text), but the 3th - 5th buttonsī text isnt displayed.

    Code:
    Stylesheet: 
    
    /*CONTENTSLIDER*/
    #slider1{
    	 height: 160px; 
    	 width: 550px; 
    	z-index: 1;
    }
    
    #slider1 div.contentdiv{
    	height: 160px; 
    	width: 550px; 
    	position:absolute; 
    	z-index: 1;
    }
    
    #slider1 div.shaddow{
    	background: url(images/contentslider/contentslider_shaddow.png);
    	width: 550px; 
    	height: 160px;
    	position:absolute; 
    	z-index: 2; 
    }
    
    #slider1 div.font{
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-weight: bold;
    	letter-spacing: 0.1em;
    	
    	color: #FFF;
    	
    	width: 370px;
    	height: 22px;
    	margin-left: 20px;
    	margin-top: 136px;
    	
    	position:absolute; 
    }
    
    #paginate-slider1 ul {
    	padding: 0px;
    	margin: 0px;
    }
    
    #paginate-slider1 li{
    	width: 28px;
    	height: 26px;
    	margin-left: 3px;
    	margin-right: 1px;
    	float: left;
    	list-style: none;
    	background: none;
    	position: relative;
    }
    #paginate-slider1 li:hover, #paginate-slider1 a.selected li{
    	background: url(images/contentslider/button.png);
    	text-shadow: #444 0px -1px 0px;
    	color: #FFF;
    }
    #paginate-slider1  ul a:hover{
    	text-shadow: #444 0px -1px 0px;
    	color: #FFF;
    }
    
    #paginate-slider1 a{
    	color: #4c4c4c;
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	text-decoration: none;
    	text-shadow: black 0px 0px 0px;
    }
    
    #paginate-slider1 div.buttontext{
    	margin-top: 5px;
    	text-align: center;
    }
    
    div.paginate_position{
    	margin-top: -28px; 
    	margin-left: 390px;
    	position: absolute; 
    	z-index: 999;
    	
    }
    /* CONTENTSLIDER END*/
    Code:
    CONTENT: 
    <div id="slider1" class="sliderwrapper">
    <div class="contentdiv" style="background: url(images/contentslider/contentslider_01.png);"><div class="shaddow">
    <div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
    </div></div>
    
    <div class="contentdiv" style="background: url(images/contentslider/contentslider_02.png);"><div class="shaddow">
    <div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
    </div></div>
    
    <div class="contentdiv" style="background: url(images/contentslider/contentslider_03.png);"><div class="shaddow">
    <div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
    </div></div>
    
    <div class="contentdiv" style="background: url(images/contentslider/contentslider_04.png);"><div class="shaddow">
    <div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
    </div></div>
    
    <div class="contentdiv" style="background: url(images/contentslider/contentslider_05.png);"><div class="shaddow">
    <div class="font">Suchthaufen packt drauf: 2 neue CSS Server!</div>
    </div></div>
    </div>
    
    <div class="paginate_position">
    <div id="paginate-slider1">
     <ul>
       <a href="#" class="toc"><li><div class="buttontext">1</div></li></a>
       <a href="#" class="toc"><li><div class="buttontext">2</div></li></a>
       <a href="#" class="toc"><li><div class="buttontext">3</div></li></a>
       <a href="#" class="toc"><li><div class="buttontext">4</div></li></a>
       <a href="#" class="toc"><li><div class="buttontext">5</div></li></a>
     </ul>
    </div>
    </div>
    
    <script type="text/javascript">
    
    featuredcontentslider.init({
    id: "slider1", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.1], //[true/false, fadedegree]
    autorotate: [true, 3000], //[true/false, pausetime]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })
    
    </script>
    Hopefully someone can help.

    //EDIT: SOLVED IT -> before: <a><li><div></...a> AFTER: <li><a><div></...a>
    Last edited by Kanikkl; 01-26-2011 at 03:42 PM.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •