Ultimate Fade-in Slideshow -- Image Shifts in IE 8

[ellenjones6]

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

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

3) Describe problem: Sorry to keep coming back so often for help, but I just discovered a problem with the slideshows on a Windows laptop using Internet Explorer 8. The images in the slideshow seem to expand and then contract, appearing to shift slightly to the left by about one pixel as they fade in.

Here is the URL for the page: http://adirondackvic.org/Adirondack-...mber-2012.html

Here is the code:

<style type="text/css">
#fadeshow2 {
	overflow: auto;
	width: 540px;
	height: 411px;
	margin: 0 auto;
}
#fadeshow2toggler {
	width: 540px;
	margin: 0 auto;
	text-align: center;
}
#fadeshow2toggler .noscript {
	display: none;
	font: bold 70% Arial, Helvetica, sans-serif;
}
.descpanelfg {
	text-align: center;
}
</style>
<noscript>
<style type="text/css">
#fadeshow2 {
	overflow: auto;
	width: 560px;

}
#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: [540, 411], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-1.jpg", "", "", "Adirondack Wetlands:  Heron Marsh from Barnum Brook Trail (12 September 2012)"],
		["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-2.jpg", "", "", "Fall in the Adirondacks:  Hobblebush along the Barnum Brook Trail (12 September 2012)"],
		["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-3.jpg", "", "", "Adirondack Wetlands:  Wetlands around Barnum Brook (12 September 2012)"],
		["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-4.jpg", "", "", "Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail"],
		["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-5.jpg", "", "", "Adirondack Wetlands:  Heron Marsh from the Barnum Brook Trail (12 September 2012)"],
		["http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-6.jpg", "", "", "Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)"] //<--no trailing comma after very last image element!
	],
	titlesAndAlts: [
		{title: "Adirondack Wetlands:  Heron Marsh from the Barnum Brook Trail overlook at the Paul Smiths VIC (12 September 2012)", alt: "Adirondack Wetlands:  Heron Marsh from the Barnum Brook Trail overlook at the Paul Smiths VIC (12 September 2012)"},
		{title: "Fall in the Adirondacks:  Hobblebush along the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)", alt: "Fall in the Adirondacks:  Hobblebush along the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)"},
		{title: "Adirondack Wetlands:  Wetlands around Barnum Brook along the Jenkins Mountain Trail at the Paul Smiths VIC (12 September 2012)", alt: "Adirondack Wetlands:  Wetlands around Barnum Brook along the Jenkins Mountain Trail at the Paul Smiths VIC (12 September 2012)"},
		{title: "Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail at the Paul Smiths VIC (12 September 2012)", alt: "Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail at the Paul Smiths VIC (12 September 2012)"},
		{title: "Adirondack Wetlands:  Heron Marsh from the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012", alt: "Adirondack Wetlands:  Heron Marsh from the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012"},
		{title: "Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)", alt: "Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)"},
	],
	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>
<div id="fadeshow2"><img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-1.jpg" alt="Adirondack Wetlands:  Heron Marsh from the Barnum Brook Trail overlook at the Paul Smiths VIC (12 September 2012)" title="Adirondack Wetlands:  Heron Marsh from the Barnum Brook Trail overlook at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-2.jpg" alt="Fall in the Adirondacks:  Hobblebush along the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)" title="Fall in the Adirondacks:  Hobblebush along the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-3.jpg" alt="Adirondack Wetlands:  Wetlands around Barnum Brook along the Jenkins Mountain Trail at the Paul Smiths VIC (12 September 2012)" title="Adirondack Wetlands:  Wetlands around Barnum Brook along the Jenkins Mountain Trail at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-4.jpg" alt="Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail at the Paul Smiths VIC (12 September 2012)" title="Mushrooms of the Adirondacks: Marasmius siccus on the Boreal Life Trail at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-5.jpg" alt="Adirondack Wetlands:  Heron Marsh from the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)" title="Adirondack Wetlands:  Heron Marsh from the Barnum Brook Trail at the Paul Smiths VIC (12 September 2012)">
<img src="http://Adirondackvic.org/Images/Adirondack-Birding-Center-Bird-Walk-12-September-2012-6.jpg" alt="Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)" title="Fall in the Adirondacks: Red Maple on the Barnum Brook Trail (12 September 2012)">
</div>
<div id="fadeshow2toggler" style="width:540px; text-align:center; 	margin-left: auto ;
  	margin-right: auto ;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" alt="left button" 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" alt="right button" style="border-width:0"></a>
</div>

Every slideshow in my site seems to have this problem with IE8. There is also a problem with the slideshow on the home page (http://adirondackvic.org/index.html), but in this case the images appear to shift up and down a pixel.

The slideshows all work perfectly on IE9, Firefox, Chrome, Opera, and Safari (all in Windows). The demo slideshows on the Dynamic Drive page work fine on the IE8 laptop, so I know that it's a problem with how I have integrated the slideshows in my site. What have I done wrong? I am sorry to be a pest, but this is driving me nuts! Please help. Ellen

[bernie1227]

try adjusting this:

#fadeshow2 {
	overflow: auto;
	width: 560px;

}

to this:

#fadeshow2 {
	overflow: hidden;
	width: 560px;

}

It has no effect on chrome, so it can't hurt, but you might as well try it.

[ellenjones6]

Thank you, I tried that, but it did not work to fix the problem of image shift in IE8 on the laptop I am experimenting with. The change also took away the image window for users who do not have JavaScript enabled. There must be another solution... ellen

[bernie1227]

Alright, I've had a look at it on ie8, and what appears to be happening is that the width is changing slightly every transition.
the problem I believe, is that:

#fadeshow2 {
	overflow: auto;
	width: 560px;

}

the width in the css is different from the width in the javascript, causing a conflict:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [540, 411], //width/height of gallery in pixels. Should reflect dimensions of largest image

so in order to fix the problem, all you will need to do, is to change this:

#fadeshow2 {
	overflow: auto;
	width: 560px;
}

<style type="text/css">
#fadeshow2 {
	overflow: auto;
	width: 540px;
	height: 411px;
	margin: 0 auto;
}
#fadeshow2toggler {
	width: 540px;
	margin: 0 auto;
	text-align: center;
}
#fadeshow2toggler .noscript {
	display: none;
	font: bold 70% Arial, Helvetica, sans-serif;
}
.descpanelfg {
	text-align: center;
}
</style>
<noscript>
<style type="text/css">
#fadeshow2 {
	overflow: auto;
	width: 560px;

}
#fadeshow2 img {
	display: block;

}
#fadeshow2toggler * {
	display: none;

}
#fadeshow2toggler .noscript {
	display: inline;
}

</style>

to this:

#fadeshow2 {
	overflow: auto;
	width: 540px;
}

[jscheuer1]

That 560 only comes into play for non-javascript enabled browsers, so cannot be the problem. Further, I've run both pages in IE 9 in its IE 8 mode and don't see any shifting. I then ran the pages in IE 8 in all of its standard modes (IE 8, compatibility, and IE 7), still can't get it to misbehave. The problem might be the laptop. Or, the IE 8 I have is under Windows XP, if the one you have is under Vista or Win 7, that might be it. Both of those could be updated to IE 9 and should be though.

If it is only on a few computers and only 1 pixel, I wouldn't worry about it.

Oh, and you should not merge the two style sections. The second is in a noscript tag and only comes into play if javascript is unavailable, so has no bearing on this issue.

[bernie1227]

It doesn't come up in ie8 mode in other versions of ie, it's only in actual ie8. It's on all ie8 that I can see so far, rather than just one machine as well. Didnt see the noscript there, so ignore the most of the earlier post, as I had assumed that they were two different lots of css, conflicting, this also explains, why before when I told you to change it, it changes it when there was no javascript enabled. I wonder what happens when you change it on the regular css. However, the fact that it was actually ie9 you were testing on, means it won't show you the shifting. You need an actual machine running so in order to see the shifting. I do agree with John about the not worrying, as the shift is really quite minuscule, and I'm guessing that your proportion of ie8 users will be quite low.

After some research, there is actually a noscript ghost bug in ie8 (hence why the problem only occurs in ie8)
See here about it, so in actual fact, I might have been right.
Unless you can find a better fix John, I'd suggest trying my option

[jscheuer1]

I tested in a real IE 8 and found no such shifting, go back and reread my last post.

And that bug has nothing to do with this situation. It only covers noscript tags that are styled. That situation does not exist here. Additionally, in browsers with javascript on, the script will overwrite the directives from the noscript section.

But there might be some other bug relating to noscript that only manifests for some IE 8. To test that, ellenjones6 could simply remove the noscript section, clear the browser cache and refresh the page. If that 'gets it', then there probably is some problem relating to the noscript section.

Oh, and that bug that you linked to does show up in IE 9 in its IE 8 mode.

[ellenjones6]

The laptop with IE8 is not available to me at the moment to test. I should have it back in a week or two and will test then. Thanks again! ellen

[bernie1227]

Well, I'm still getting the problem on my ie8. It could be to do with the settings on each? However, I stick with my solution of changing the noscript styles to match the regular width.
One thing I would try, is comment out the noscript for now, to remove that as a variable in the issue, and test again. As of yet, I can't see anything else that might be the issue, the main reason that I think it is the noscript's fault, is because it is only happening in some versions of ie8.
here is another page documenting the problem. Even if it is not this exact problem, I believe it is related.

[jscheuer1]

Bernie, you could check your theories yourself. Just make a mock up of the page.

I would do so myself. However, since I cannot see it happening in the first place, there's no way I would know if any changes I made were of any use.

BTW Bernie, what OS is your IE 8 under, XP, Vista, 7, something else?