Transparent PNG fade in,fade out in IE7 problem

Get Started
1

I’m sorry but I might have posted in a wrong forum because I’m not sure exactly what the problem is.

Hi,
I’m building a slideshow using jquery and css and what needs to happen is for the slideshow to have a transparent png over it to make it look like the slideshow isn’t square. The slides fade in and out and the png has to as well.

So far, I’ve got it to work in Firefox and IE8 but IE7 is having some kind of problem with it. See here: http://www.gotbookz.com/slideshow

You can see the png show a black border around it for some reason when it fades in and out.

If I remove the png the slideshow works perfectly.

I add css to the page using javascript (but i don’t think it’s a javascript issue)

  • “big_over” class is the one with the png
  • container is the wrapper class

here’s what happens:
1 - the page is loaded
2 - all the divs (except for navigation buttons) are set to display: none
3 - the first div “panel” is faded in
4 - the slideshow starts (the current slide including the png gets faded out and the next gets faded in)

I add css using javascript so ignore the single quotes everywhere.


		
img{
'border-style': 'none'
}

p{
 'margin': '0px',
'padding': '0px'
}

h4{
 'margin': '0px',
'padding': '0px'
}
		
.galleryview{
'position':'absolute',
'width':opts.panel_width+'px',
'height':opts.panel_height+'px'
}

.big_over{
'width':opts.big_overlay_width+'px',
'height':opts.big_overlay_height+'px',
'background-image': opts.big_overlay_image,
'background-repeat': 'no-repeat',
'position': 'absolute',
'z-index': '21',
'cursor':'pointer',
'overflow':'hidden',
'display':'none'
}		

.pics{
'width':opts.panel_width+'px',
'height':opts.panel_height+'px',
'position':'absolute',
'left':'0',
'line-height':(opts.panel_height + 1)+'px',
'overflow':'hidden',
'background-color':opts.panel_background_color,
'display':'none',
'margin-top':((opts.big_overlay_height - opts.panel_height)/2)+'px',
'margin-left':((opts.big_overlay_width - opts.panel_width)/2)+'px'
}
		
		
.panel-overlay{
		'position':'absolute',
		'z-index':'20',
		'width':(opts.panel_width)+'px',
		'height':opts.overlay_height+'px',
		'top': (opts.panel_height-opts.overlay_height)+'px',
		'left':'0',
		'line-height':'normal',
		'padding':'0 10px',
		'color':opts.overlay_text_color,
		'font-size':opts.overlay_text_size,
		'overflow':'hidden',
		'display':'none',
	 'margin-top':((opts.big_overlay_height - opts.panel_height)/2)+'px',
         'margin-left':((opts.big_overlay_width - opts.panel_width)/2)+'px'
}
			
.panel-overlay a{
		'color':'#ffffff',
		'text-decoration':'none'
			}

.overlay{
		'position':'absolute',
		'z-index':'10',
		'width':opts.panel_width+'px',
		'height':opts.overlay_height+'px',
		'top': (opts.panel_height-opts.overlay_height)+'px',
		'left':'0',
	'cursor':'pointer',
		'background-color':'#000000',
		'opacity':opts.overlay_opacity,
		'overflow':'hidden',
		'display':'none',
      'margin-top':((opts.big_overlay_height - opts.panel_height)/2)+'px',
	'margin-left':((opts.big_overlay_width - opts.panel_width)/2)+'px'
}

/**********CSS is changed on hover**********/
.overlay{
'height':opts.panel_height+'px',
'cursor':'pointer',
'top': '0'
}
		
.panel-overlay{
	'cursor':'pointer'
}
		
h4 a{
'text-decoration': 'underline'
}

And the “opts” are here:


'panel_background_color':'#000000',	
 'panel_height': 300,
'panel_width': 800,
			
'overlay_height': 70,
'overlay_opacity': .5,
'overlay_text_size': '1em',
'overlay_text_color': '#ffffff',
			
'big_overlay_height': 400,
'big_overlay_width': 900,
'big_overlay_image': 'url(images/Untitled-1.png)'
2

Hi,

This is a known (unsolvable) issue and is caused by applying the opacity filter to a transparent png image in IE7. ( funnily enough there was a [URL=“http://www.sitepoint.com/forums/showthread.php?t=656757”]thread about this a couple of days ago also)

The only partial solution seems to be to remove the opacity routine from the jquery or set the images background color to match the surrounding thus losing the opacity.

3

oh i see. thanks,

i’ll try another way. i don’t really have to fade in the png, just as long as it shows up with the slide. I think I can use jquery’s hide() and show() feature to do this because if the hide() function doesn’t receive any parameters then it doesn’t use opacity but instead uses display:none.