Featured Content Slider text is blurry

[ajwillys]

1) Script Title: Featured Content Slider

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex...tentslider.htm

3) Describe problem: In IE 7, all text inside the Slider DIV's is a little fuzzy around the edges. At first I thought it was only on my implementation but then I decided to look at the actual Dynamic Drive site in IE and its blurry there too.

I'm assuming its something with the CSS causing this, but I really don't know.

[ajwillys]

OK, I've figured out it has something to do with the following CSS code:

.contentslide .opacitylayer{ /*Do not edit this rule unless you're familiar with CSS opacity behavior*/
width: 100%;
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;

}

In particularly, the bolded parts. When I remove them, the text is not blurry. I now want to make another CSS property to override that property for the text only, but don't know enough about those properties to do that. Any ideas?

I'm thinking something like this but the properties I've listed don't do the job.

.contentslide .opacitylayer h1,h2,h3,h4{
filter:none;
opacity: 1;
}

[jscheuer1]

That's a known issue in IE 7 with any text that has any filter applied to its element. It's worse than simply the styling, as the script looks like it depends upon fading (the alpha filter) for its transitions. This is also a problem in recent versions of Opera, although the mechanism is slightly different, it relies upon generic style opacity to fade, but the results are the same. The text loses its anti-aliasing quality.

Try this script:

http://www.dynamicdrive.com/dynamici...tentglider.htm