Featured Content Slider Image Error in IE

[amimoto]

1) Script Title: Featured Content Slider 2.4

2) http://www.dynamicdrive.com/dynamici...tentslider.htm

3) Describe problem: Hi. In the Internet Explorer (V.8) I get little white dots in my pictures. Where usualy should be a (almost) black pixel, there are white ones. Here is a screenshot with the same part as original:



FF all ok! What can I do??
Cheers
PB

[jscheuer1]

There are code solutions, but you will still see the dots at least temporarily. They are caused by the interaction of IE's way of fading images and the color level of black in the image(s). So it's better to edit the image(s). It depends a bit upon what image editor you have, you will need a fairly advanced one. PSP, The Gimp, PhotoShop are a few that can do this. The Gimp is free. Anyways, you load up the image (be sure to make a backup copy first just in case). Choose something like:

Colors > Adjust > Levels

from the menu. Once you get there, change the value of 0 in the output to like 7 (the exact number may vary, but it will be most likely 3 or 9 or somewhere in between. This will lighten the entire image slightly, and if you hit the right number, fix the problem.

[amimoto]

Thanks for your replay John. I suspected the images already, because I have seen, that other images do not have the problem. My Editor is PS CS3, but I will try your suggestion!!

[amimoto]

Hi there, little update. It is definitely a problem of the images and IE and not of the script! I could not sort it out completely yet, but I had kind of success with "Auto-Color" in PS already...

[jscheuer1]

If you mean photoshop (from: http://www.alexjudd.com/?p=5):

Easy – go into Photoshop and adjust the levels to remove the true black in the image – Image -> Adjustments -> Levels and slide the true black slider 1 or 2 pixels to the right. Save out your image again and the jpg artifacts are gone.

But another easier solution may be possible. Edit the contentslider.css file here in two places (additions/changes highlighted):

.sliderwrapper{
position: relative; /*leave as is*/
overflow: hidden; /*leave as is*/
border: 10px solid navy;
border-bottom-width: 6px;
width: 400px; /*width of featured content slider*/
height: 250px;
background-color: black!important;
}



.sliderwrapper .contentdiv{
visibility: hidden; /*leave as is*/
position: absolute; /*leave as is*/
left: 0;  /*leave as is*/
top: 0;  /*leave as is*/
padding: 5px;
background: black;
width: 390px; /*width of content DIVs within slider. Total width should equal slider's inner width (390+5+5=400) */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

Give that a shot first. If it works it will save you a lot of editing of images.