PDA

View Full Version : Featured Content Glider: content #1 not working & button probs, in IE6+7



dangr john
06-18-2008, 09:25 PM
1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm

3) Describe problem:

Content #1: Everything works great in Safari, FF and IE 6+7, however what DOESNT work is the 1st content shown, if i want to navigate to it. for example: content #1 shows up fine, so does content #2,3,4 etc,... however, when i click on button #1, or the prev button, content#1 will not display again in IE6 or IE7. yet the button is highlighted as if it were displayed.

Button problem: In IE6, the last button repeats itself onto a new line - as if i had coded the link twice.

here is a link to my page: http://www.intelesure.com/crazytalk/

thanks for your help!!:D

ddadmin
06-19-2008, 06:46 AM
Regarding the first issue, at a glance, it seems the problem is because your first glider content has an extra </div> tag:


<div class="glidecontent">
<!--maincontent-->

<div class="cp w229 mt20"><img src="images/1welcome.png" /></div>

<div id="welcome" class="w229 h261">
<br /><br /><strong>Lorem ipsum dolor sit amet,</strong> consectetuer adipiscing elit. Donec lacinia, leo non porta laoreet, neque arcu fringilla ligula, quis dignissim purus enim et tortor. Vestibulum neque. Curabitur nec dolor eget orci rhoncus accumsan. Integer quis tellus. Ut at quam. Suspendisse potenti. Etiam volutpat, leo non porta condimentum. Donec lacinia, leo non porta laoreet, neque arcu fringilla ligula, quis dignissim purus enim et tortor. Vestibulum neque. Curabitur nec dolor eget orci rhoncus accumsan. Integer quis tellus. Etiam volutpat, leo non porta condimentum.<br /><br />
</div>

<div class="cp w229" ><img src="images/2strategy.png" /></div>

<div class="cp w229" ><img src="images/3implement.png" /></div>

<div class="cp w229" ><img src="images/4results.png" /></div>

<div class="cp w229" ><img src="images/5services.png" /></div>

<!--end main content-->
<div id="homepics">
<div id="welcomepic" class="w525 h415"><img src="images/welcomeboise.png"/></div>
</div>

</div>

</div>

IE is very finicky about such things.

Regarding the 2nd issue, did you fix the problem already? Using IE6 no buttons appear repeated for me.

dangr john
06-19-2008, 04:22 PM
thanks for the quick reply!

prob #1 turns out that it wasn't too many divs, but misordered divs. My homeside nav was supposed to be inside glidecontent #1

FIX:

<div class="glidecontent">

<div id="homesidenav" class="w229" >

<div class="cp w229 mt20"><img src="images/1welcome.png" /></div>

<div id="welcome" class="w229 h261">
<br /><br /><strong>Lorem ipsum dolor sit amet,</strong> consectetuer adipiscing elit. Donec lacinia, leo non porta laoreet, neque arcu fringilla ligula, quis dignissim purus enim et tortor. Vestibulum neque. Curabitur nec dolor eget orci rhoncus accumsan. Integer quis tellus. Ut at quam. Suspendisse potenti. Etiam volutpat, leo non porta condimentum. Donec lacinia, leo non porta laoreet, neque arcu fringilla ligula, quis dignissim purus enim et tortor. Vestibulum neque. Curabitur nec dolor eget orci rhoncus accumsan. Integer quis tellus. Etiam volutpat, leo non porta condimentum.<br /><br />
</div>

<div class="cp w229" ><img src="images/2strategy.png" /></div>

<div class="cp w229" ><img src="images/3implement.png" /></div>

<div class="cp w229" ><img src="images/4results.png" /></div>

<div class="cp w229" ><img src="images/5services.png" /></div>

</div><!--end homesidenav-->

<div id="homepics">

<div id="welcomepic" class="w525 h415"><img src="images/welcomeboise.png"/></div>

</div><!--end homepics-->

</div><!--end glidecontent #1-->

prob #2: just fixed it too:D Turns out :last-child doesn't work on all browsers (who knew, lol), so i had to apply id tags to anything i wanted to customize a little differently from the other buttons like so:


<div id="p-select" class="glidecontenttoggler">
<a href="#" class="toc">1</a>
<a href="#" class="toc">2</a>
<a href="#" class="toc">3</a>
<a href="#" class="toc">4</a>
<a href="#" class="prev">prev</a>
<a href="#" class="next" id="six">next</a>
</div>

the glider is amazing!!!!! thanks!:D