Pleasanton Web Design

I most recently ran into this problem using JoomlaWorks FrontPage Slideshow (for Joomla 1.5), but have seen it before in other JavaScript slideshow scripts. During the transition, you will see dots in the dark/black areas of the image being transitioned. These dot’s can be white, but are actually whatever the color of the background behind the slideshow image is. The problem is actually that both IE7 and IE8 interpret the black areas of the images as transparent. Why? Probably just the typical IE browser bug (try FireFox or Chrome if you aren’t already using them).

Here’s what it look’s like:

Internet Explorer Slideshow Transition Problem

How do you get rid of it? There are two ways that I’m aware of:

1) Set the background to black. This will probably make your slideshow darker overall, which may or may not be acceptable, depending on the context.

2) Edit your image to make the black, just not quite black. If you are using Photoshop, do the following:

• Choose “Select > Color Range”
• Click on the eyedropper with the “+”
• Click on a black area, then click “OK.”  This should select all the black in the image.
• Fill the selection with a not-quite-black color.

I ran aross this problem with the way Internet Explore 7 (IE7) handles the background-position css property, and thought I’d post it just in case I could save someone some time. I was working on a layout, and it looked great in IE8, Firefox 2, Firefox 3 & Google Chrome 2. When viewed in IE7, however, the background-position of one of the elements was off.

After a bit of experimentation, as is a normal part of cross-browser testing with Microsoft Internet Exploder, I narrowed down the problem to the fact that I had overflow hidden for this particular element. All other browsers used the declared dimensions of the element to position the background. The problem is that there was some overflow, and all browsers but IE7 properly ignored it. IE7 used the dimensions including the overflow to determine the background-position.

In this situation I was able to size the element in such a way to eliminate the possibility of overflow, and then was able to remove the overflow:hidden declaration.