Fade-In Slideshow problem in IE when in Vertically centered table

[kat-uk]

Script: Fade-in slideshow
http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

I have used this script on a site where the "slideshow" is in a table that is centered vertically - see the test site at http://server.cubeconnection.co.uk:8386/profile.htm If you resize the window (in height or maximise it) you will see that the central display area remains centered in the window, but the slideshow stays relative to the top of the broswer window and hence moves out of position. Viewing in Firefox 1.06 and Opera 7 and everything is OK, so just an IE problem.

I have identified the lines that cause the problem, which is the nested DIVs (about 33 lines down) as shown below:

<div style="position:relative; width:'+slideshow_width+'; height:'+slideshow_height+'; overflow:hidden">
<div id="canvas0" style="position:absolute; width:'+slideshow_width+'; height:'+slideshow_height+'; top:0; left:0; filter:alpha(opacity=10); -moz-opacity:10">
</div>
<div id="canvas1" style="position:absolute; width:'+slideshow_width+'; height:'+slideshow_height+'; top:0; left:0; filter:alpha(opacity=10); -moz-opacity:10; visibility: hidden">
</div>
</div>

If I take out the "position:relative" in the first DIV then it works OK in IE but then fails in Firefox / Opera as they then position the slideshow at location 0,0 as specified.

Because of this I then had the cunning idea of changing the if statement that displays these DIVs from:

if (ie4||dom)

to

if (ie4)
write out IE DIVs
else if (dom)
write out Firefox / Opera DIVs
else
write out image as is

but that didn't work as Opera identifies itself as IE4 using the IE4 DIVs and failing. I would need to detect Opera as well!

There has to be a better way, but I can't see it. Is there an easier answer?

As this method of using the DIVs in this way is used in other scripts of course they will also have the same problem.

Thanks and looking forward to any fixes.

Rob

[jscheuer1]

Well, there is probably a way to write the code so that both IE and other browsers treat it the same but, since in this case all we need is a way to detect opera as different than ie, try the same solution . . . with a twist:

if (ie4&&!window.opera)
write out IE DIVs
else if (dom||window.opera)
write out Firefox / Opera DIVs
else
write out image as is

[kat-uk]

Thanks for the response jscheuer1

In fact you can get away with slightly less:

if (ie4&&!window.opera)
write out IE DIVs
else if (dom)
write out Firefox / Opera DIVs
else
write out image as is

as Opera returns true on dom

This will do as a fix for now - just wondered if there was a way to get it working without having to detect Opera!

Unfortunately this site is for a customer with a MAC as well, so I have no idea how it will work on that, as I have no Mac to try it on. If it comes to it I will have to do the image fader in Flash, but I always try to aviod that if possible - last resort.

Thanks again for the response.

Rob