Ultimate Fade Slideshow IE9 woes...agh...

[TheHokemon]

I am trying to get the Ultimate Fade-in Slideshow 2.4 script to work ( from http://www.dynamicdrive.com/dynamici...nslideshow.htm)

The script works great on all Mac browsers, and works fine in Windows 7 in common browsers (including IE9).

BUT, IE9 only renders the script properly on my local server. As soon as I upload it to the production environment it stops working properly. Sometimes it works (once in 10 tries?) but otherwise all that is there is a black box (the initial background for the image area as per the script).

I am using the most current version of the script from DD. I am calling a random assortment of images from a database using PHP.

Here is my javascript code in the page (when rendered):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/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: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [655, 288], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
	["homepics/1280178435.jpg"], ["homepics/234339197.jpg"], ["homepics/775311739.jpg"], ["homepics/220972076.jpg"], ["homepics/1322335811.jpg"], ["homepics/447343126.jpg"], ["homepics/658747731.jpg"], ["homepics/702168123.jpg"], ["homepics/255418439.jpg"], ["homepics/222438690.jpg"]	],
	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 1200, //transition duration (milliseconds)
	descreveal: "none",
	togglerid: ""
})


</script>

Here is the URL to the page in question:

http://www.seawardkayaks.com/index2.php

So, can anyone verify this error in Win7/IE9, and if so, can you please provide some insight as to the issue? I am absolutely flummoxed. If it didn't work, period, I would know what to do next. But since it only works locally (via http) and not remotely, I am at a loss.

Thank you!!

[jscheuer1]

I'm not 100% certain. But it may be csshover.htc and/or iepngfix.htc, neither of which IE 9 needs.

I mean, I certainly see the problem if I navigate to the page using IE 9. But if I make a local copy of the page, it works fine in IE 9. One interesting thing about local copies is that they disable all .htc files as potential security threats.

To test whether or not this is the problem, simply remove or comment out these (highlighted) from the seaward_global.css file:

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	text-decoration: none;
	background-color: #636363;
	margin: 0px;
	padding: 0px;
	behavior:url("csshover.htc");
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #2B2B55;

	}		
img, div { 
	behavior: url(iepngfix.htc) 
}

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

If that fixes it, you can check to see which one it is (it might be both). Once that's determined, we can still apply them if needed for those versions of IE that require them.

[TheHokemon]

First of all, John, thank you so much for taking the time to help me out with this. I am no spring chicken when it comes to website development, but am seriously confused when it comes to this problem.

I deleted the .htc file references from the CSS file (I duplicated the global CSS file to experiment so as not to interfere with the production version).

Didn't seem to make any difference. Still very intermittent (but mostly doesn't work at all). The very strange thing is that I have built other sites using this same script (older versions, actually) and they work perfectly, every time, in IE9/W7. I have tried copying the code from that functioning script to this site and I get the same problem. The only difference is the file size (although this shouldn't make a difference). Or should it?

It's not because of the dynamic image population (because I have hard coded the image array with no difference) and I even thought at one point that it was a permissions issue (due to the upload script), but chmod'ing the files on the server didn't make any difference. All they should need is read access (all the files display perfectly on their own in the browser).

So there is something about this particular site that is cancelling the script or screwing up the rendering (I wish there was an error thrown to even give me a clue!).

Any other ideas?

[jscheuer1]

Let me just restate what I said before for the sake of clarity - I do see the problem with the live page in IE 9 and it's just as you say - most of the time it doesn't work, just shows a black area. Also, a local copy of the page works fine In IE 9.

Now, I did some more playing around with it. I downloaded the .htc files and set their use from the local drive. I expected that would break it in IE 9. But it didn't. Logic would still tend to indicate that there's something about the live installation that's causing the problem, because even with the .htc files running locally, it still works fine from the local copy/installation. Perhaps one of the other scripts requires the page to be live to operate. If so, that would likely be the culprit. Ring any bells?

It's a shame that I cannot get it to misbehave locally. If I could, then it would just be a matter of removing things one at a time until it did work. But the fact that it works locally tends to indicate that all of the permissions are set properly.

You can do that though (process of elimination), with the live version. I'd suggest making a copy of the live page on the same server. Then one at a time start removing things from it. Start from the bottom and work your way up. First do scripts. If you find one that fixes it, restore the rest and see if it still works. If not, it must be a combination of scripts. If no script appears to be the problem, next start removing stylesheets. Same deal as with the scripts. If removing them doesn't yield anything, start removing markup. All along the way you will need to refresh the page to make sure it isn't using a cached copy. Emptying the cache between each try is a good idea too. Tedious work, but it's the only systematic method I can think of.

There is a warning though:

HTML1115: X-UA-Compatible META tag ('IE=9, IE=8, chrome=1') ignored because document mode is already finalized.
fastbutton?url=http%3A%2F%2Fwww.seawardkayaks.com%2Findex2.php&size=standard&count=true&annotation=&hl=en-US&jsh=r%3Bgc%2F24479126-6666cb8c

So I'd try it without:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Because that's what's causing that.

[TheHokemon]

SUCCESS!

Thanks for your input and advice! I was avoiding the strategic removal of code for some reason. Probably a stubborn refusal to admit that it was something that simple. ;-)

The left hand main menu is an included file, so I removed it and voila, the script worked perfectly. After some fiddling around I discovered that the include file was still referencing the working version of the global CSS file, which had the .htc file references inside it. So once I switched the CSS reference to the test version (without the .htc links), it worked fine with the menu included.

The csshover.htc file wasn't the culprit. It was the png fix. Nice call. I put in a conditional comment to ignore if IE7 or greater and it seems to be working perfectly.

http://www.seawardkayaks.com

Really appreciate the advice and time you put into this issue. Nice to know I am not alone out there in freelance land. Sometimes I wonder.

Cheers!

[jscheuer1]

Great! But I was meaning to tell you though that you can't really do that:

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	text-decoration: none;
	background-color: #636363;
	margin: 0px;
	padding: 0px;
	behavior:url("csshover.htc");
}

<!--[if lt IE 7]>
img, div { 
	behavior: url(iepngfix.htc) 
}
<![endif]-->

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #2B2B55;

	}		
h2 {
	font-family: Arial, Helvetic

Those are IE conditional HTML comment delimiters. They don't work inside of a stylesheet. They do invalidate the style(s) within them. But they do it for all browsers, including the ones they are targeting the style for.

As far as I know there are no standard comments for IE for use inside stylesheets. There are some hacks, but I wouldn't rely upon them.

What you can do is make up a separate stylesheet, call it - say, ie6.css. Put that style in there without the comment tags, and remove it and the tags from the seaward_global2.css stylesheet. Then in the head of the page you can put:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="seaward_global2.css" rel="stylesheet" type="text/css" />
<link href="menu_styles.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

[TheHokemon]

Great! But I was meaning to tell you though that you can't really do that

Ack...you are right. I removed the conditional statement entirely. IE6 is dead anyway. Not going to bother with support for it.

Thanks for the follow-up!