Positioning and styles upset when used in Garland theme with IE 6

I've experienced the same layout issue, even in IE 7. Things going right in Firefox 2, Konqueror 3, Opera 9, Safari 3.

In IE, all contents collapse in a single central column when the slideshow box load the first image of the set.

Problem is somewhere inside the Effect.Parallel call (resizeOutBox function) on js/slideshow.js.

/* follow JavaScript code from js/ */
	resizeOutBox: function() {
		this.getScaleFactor();
		new Effect.Parallel( 
		[
			new Effect.Scale(this.outBox, this.yScale_out, {scaleX: false, duration: 0.4, queue:{position: 'front', scope: 'boxq'}}),
			new Effect.Scale(this.outBox, this.xScale_out, {scaleY: false, duration: 0.4, queue:{position: 'front', scope: 'boxq'}}),
			new Effect.Scale(this.captionBox, this.xScale_cap, {scaleY: false, duration: 0.4,  queue:{position: 'front', scope: 'boxq'}}),
/*         BEGIN WRONG-IE EFFECT */
			new Effect.Scale(this.photoBox, this.yScale, {scaleX: false, duration: 0.4, queue:{position: 'front', scope: 'boxq'}}),
			new Effect.Scale(this.photoBox, this.xScale, {scaleY: false, duration: 0.4, queue:{position: 'front', scope: 'boxq'}})
		], {queue:{position: 'front', scope: 'boxq'}});
/*         END WRONG-IE EFFECT */
	}

If you comment Effect.Parallel, layout isn't more messed up in IE, but the box remain unscaled. Anyone knows what going wrong when IE run this piece of code?

I attach a screenshot of the result when Effect.Parallel call is commented.

UPDATE:
Error occurs only when Effect.Scale is applied to photoBox.

I had the same problem with IE6 and IE7.

The reason seems to be that within the block a class with the name "Container" is used which is also used within the Garland theme, and possibly other themes (ATCK, etc.).

The class name "Container" has to be changed to a unique class name, e.g. "PhotoContainer" as in the following code examples.

There are several files in which the class name needs to be changed to make the module also working under these themes for IE6 & IE7.

1. couloir_slidewshow.module
Instead of

		<div id="OuterContainer">
			<div id="Container">
				<img id="Photo" src="' . $url . '/img/c.gif" alt="Photo: Couloir" />

write

		<div id="OuterContainer">
			<div id="PhotoContainer">
				<img id="Photo" src="' . $url . '/img/c.gif" alt="Photo: Couloir" />

2. js/slideshow.js
Instead of

Slideshow.prototype = {
	initialize: function(photoId) {
		this.photoId = photoId;
		this.photo = 'Photo';
		this.outBox = 'OuterContainer';
		this.photoBox = 'Container';
		this.prevLink = 'PrevLink';

write

Slideshow.prototype = {
	initialize: function(photoId) {
		this.photoId = photoId;
		this.photo = 'Photo';
		this.outBox = 'OuterContainer';
		this.photoBox = 'PhotoContainer';
		this.prevLink = 'PrevLink';

3. css/couloir.css
Instead of

#Container {
	position: absolute;
	height: 196px;
	width: 196px;
	top:2px;
	left:2px;
	font-size: 0px;
	background-color: #333333;
	background-image:url(../img/loading.gif);
	background-position: center;
	background-repeat:no-repeat;
} 

write

#PhotoContainer {
	position: absolute;
	height: 196px;
	width: 196px;
	top:2px;
	left:2px;
	font-size: 0px;
	background-color: #333333;
	background-image:url(../img/loading.gif);
	background-position: center;
	background-repeat:no-repeat;
} 

Hope this helps,
Christian.

I have applied the changes made by Christian to version 5.x-1.3 and the module now works properly with previously conflicting themes, specifically Garland.

this is exactly why I make all my CSS IDs strictly unique to the specific theme

like if I would of made a theme named Garland, every ID would have Garland at the end
so container would become containerGarland

makes it a lot easier for me to separate theme IDs with module IDs or w/e