Problems incorporating Ultimate Fade-in slideshow (v2.4)

1) Script Title: Ultimate Fade-in slideshow (v2.4)

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

3) Describe problem: I am redesigning my site to move from tables to CSS, so I am replacing the old JavaScript with slide shows using the Ultimate Fade-in Slideshow. However, I seem to have introduced a problem in the code and I cannot for the life of me figure out how to correct it. The problem is that the slide show displays correctly in Firefox. However, in IE, the semi-opaque banner at the bottom (which holds the captions) is not wide enough. It stops ten pixels or so short. You can really see it on the first slide in this show.

Here is a link to the page: http://www.adirondackvic.org/BarnumBrook.html

Here is the relevant (I think) code. I had to edit it down because of the length issue:

Code:

---

<style type="text/css">
#fadeshow2 {
        width: 468px;
        height: 357px;
}
#fadeshow2toggler .noscript {
        display: none;
        font: bold 90% Arial, Helvetica, sans-serif;
}
</style>
<noscript>
<style type="text/css">
#fadeshow2 {
        overflow: auto;
        width: 488px;
}
#fadeshow2 img {
        display: block;
}
#fadeshow2toggler * {
        display: none;
}
#fadeshow2toggler .noscript {
        display: inline;
}
</style>
</noscript>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
        wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
        dimensions: [468, 357], //width/height of gallery in pixels. Should reflect dimensions of largest image
        imagearray: [
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-1.jpg", "", "", "Gazebo at the entrance to the Barnum Brook Trail at the Paul Smiths VIC"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-2.jpg", "", "", "View of an Adirondack wetland from the Barnum Brook Trail"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-3.jpg", "", "", "Mixed forest on the Barnum Brook Trail at the Paul Smiths VIC"],
                        ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-4.jpg", "", "", "Adirondack Wildflowers:  Wild Columbine on the Barnum Brook Trail"],       
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-5.jpg", "", "", "Along the Barnum Brook Trail at the Paul Smiths VIC"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-6.jpg", "", "", "Adirondack Wildflowers:  Foamflower growing on a rock in the middle of Barnum Brook"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-7.jpg", "", "", "Barnum Brook in summer"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-8.jpg", "", "", "Adirondack Wildflowers:  Twinflower blooming along the Barnum Brook Trail at the Paul Smiths VIC"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-9.jpg", "", "", "Barnum Brook from the Barnum Brook Trail boardwalk"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-10.jpg", "", "", "Adirondack Trees: Paper Birch along the Barnum Brook Trail at the Paul Smiths VIC"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-11.jpg", "", "", "Along the Barnum Brook Trail -- Fall color in the Adirondacks"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-12.jpg", "", "", "Along the Barnum Brook Trail at the Paul Smiths VIC"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-13.jpg", "", "", "Ferns along the Barnum Brook Trail at the Paul Smiths VIC"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-14.jpg", "", "", "Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC"],
                ["http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-15.jpg", "", "", "Trees of the Adirondacks:  Paper Birch along the Barnum Brook Trail"]                       
                //<--no trailing comma after very last image element!
        ],

        displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
        persist: false, //remember last viewed slide and recall within same session?
        fadeduration: 500, //transition duration (milliseconds)
        descreveal: "always",
        togglerid: "fadeshow2toggler",
        onslide: function(c, i){
                var im = c.getElementsByTagName('img')[i], tas = this.setting.titlesAndAlts;
                im.title = tas[i].title;
                im.alt = tas[i].alt;
        }
})

</script>
</head>
    <td width="570" align="center" valign="top">
        <table width="550" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td>
              <center>
                <table border=0 cellpadding=0 cellspacing=0>
                  <tr>

                </table>
                <h1>&nbsp;</h1>
                <h1>Barnum Brook Trail</h1>
                <h1><br>
                </h1>
              </center>
                         
<center>
<div id="fadeshow2">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-1.jpg" alt="Gazebo at the entrance to the Barnum Brook Trail at the Paul Smiths VIC" title="Gazebo at the entrance to the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-2.jpg" alt="View of an Adirondack wetland from the Barnum Brook Trail" title="View of an Adirondack wetland from the Barnum Brook Trail">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-3.jpg" alt="Mixed forest on the Barnum Brook Trail at the Paul Smiths VIC" title="Mixed forest on the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-4.jpg" alt="Adirondack Wildflowers:  Wild Columbine on the Barnum Brook Trail" title="Adirondack Wildflowers:  Wild Columbine on the Barnum Brook Trail">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-5.jpg" alt="Along the Barnum Brook Trail at the Paul Smiths VIC" title="Along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-6.jpg" alt="Adirondack Wildflowers:  Foamflower growing on a rock in the middle of Barnum Brook" title="Adirondack Wildflowers:  Foamflower growing on a rock in the middle of Barnum Brook">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-7.jpg" alt="Barnum Brook in summer" title="Barnum Brook in summer">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-8.jpg" alt="Adirondack Wildflowers:  Twinflower blooming along the Barnum Brook Trail at the Paul Smiths VIC" title="Adirondack Wildflowers:  Twinflower blooming along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-9.jpg" alt="Barnum Brook from the Barnum Brook Trail boardwalk" title="Barnum Brook from the Barnum Brook Trail boardwalk">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-10.jpg" alt="Adirondack Trees: Paper Birch along the Barnum Brook Trail at the Paul Smiths VIC" title="Adirondack Trees: Paper Birch along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-11.jpg" alt="Along the Barnum Brook Trail -- Fall color in the Adirondacks" title="Along the Barnum Brook Trail -- Fall color in the Adirondacks">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-12.jpg" alt="Along the Barnum Brook Trail at the Paul Smiths VIC" title="Along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-13.jpg" alt="Ferns along the Barnum Brook Trail at the Paul Smiths VIC" title="Ferns along the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-14.jpg" alt="Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC" title="Saint Regis Mountain from the Barnum Brook Trail at the Paul Smiths VIC">
<img src="http://Adirondackvic.org/Images/Paul-Smiths-Visitor-Center-Barnum-Brook-Trail-15.jpg" alt="Trees of the Adirondacks:  Paper Birch along the Barnum Brook Trail" title="Trees of the Adirondacks:  Paper Birch along the Barnum Brook Trail">
        ],
</div>
<div id="fadeshow2toggler" style="width:468px; text-align:center; margin-top:10px"><span class="noscript">You have JavaScript turned off in your browser. To view the slideshow, please enable JavaScript.  Instructions may be found here: www.enable-javascript.com
</span>
<a href="#" class="prev"><img src="http://Adirondackvic.org/Images/left.png" style="border-width:0" /></a> 
<span class="status" style="margin:0 50px; font-weight:bold"></span>
<a href="#" class="next"><img src="http://Adirondackvic.org/Images/right.png" style="border-width:0" /></a>
</div>

</center>

---

What am I doing wrong here? Please help! Ellen

The page is in quirks mode because it has no standards invoking DOCTYPE. IE takes this as a license/directive to render the page according to IE 5.5's rendering engine which is way outdated.

To prevent that you need a standards invoking DOCTYPE. That may or may not cause other rendering issues for the rest of the page in IE and/or others. You won't really know until you try it. But seeing as how it renders OK in Firefox, chances are you will be OK. Add the highlighted:

Code:

---

<!DOCTYPE html>
<html>
<head>

<title>Paul Smith's College VIC -- Barnum Brook Trail</title>

<meta name="description" content="The Barnum Brook Trail at the Paul Smiths Visitor Center is a short loop designed to showcase an Adirondack wetland and key wildflowers, trees and birds that flourish in the Adirondacks." >
<meta name="keywords" content="Adirondack, Mountains, Adirondack Mountains, day hikes, Visitor Interpretive Center, Paul Smith's College VIC, Paul S . . .

---

The browser cache may need to be cleared and/or the page refreshed to see changes.

Ah! Now, I understand.

Yes, I inserted the code you suggested in the (table-based) page and, yes, IE rendered the slideshow correctly, but the rest of the page incorrectly. I could spend a lot of time trying to remedy that, but that doesn't make sense since I am in the process of replacing the table-based layout with a CSS layout. When I finish, I will redeploy all the pages in the site. I have tested the slide show in the redesigned pages (with the code you suggested) and both the slide show and the rest of the page work correctly in IE. So, the problem will go away once I move to the CSS-based layout.

Thank you very much for your prompt reply! ellen