Using IE filter to get a shadow makes text go dotty

HTML & CSS
1

Sample page - http://ukfolkfestivals.co.uk/scotland.php

I have a div with a shadow effect which uses


	-moz-box-shadow: 4px 4px 4px #ccc;
	-webkit-box-shadow: 4px 4px 4px #ccc;
	box-shadow: 4px 4px 4px #ccc;

for modern browsers and then has


<!--[if IE]>
<style type="text/css">
#content {padding:0 5px;}
/**BOX-SHADOWS FOR IE 5-8**/
.accordionContent {
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=5);
}
.rightyImg{
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=5)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=5);
background:#fff;
}
</style>
<![endif]-->

for not so modern ones. IE in other words.

I’ve only just noticed that the text inside the divs is dotty in places. It’s not the JQuery accordion effect interfering with things, as I’ve just added the same shadow effect to a single page on another site, as part of a sample upgrade, and got the same result there too, with no JQuery on the page. Cut out the conditional statement, and the text goes back to normal.

Any ideas on how to get normal looking text in IE and retain the shadow effect? I hope I don’t need a major re-write of the code.

Or do I just have two cheap faulty screens (I’ll be checking other monitors at the weekend at another location).

2

Hi,

Do you mean this bug:

or more info here:
http://www.yuiblog.com/blog/2008/12/08/imageopt-5/

The text didn’t actually look bad to me (on xp in ie7/8).

3

Looks like that’s the problem. Thought I’d done something wrong.

It’s also re-assuring that as a new site visitor, you didn’t think it looked bad - I’ve seen those pages in FireFox lots of times, and somehow I didn’t notice the difference in IE until today, when I was changing a page on another site, to show to a client. Suddenly it became very obvious to me.

Of course an IE user wouldn’t have seen the FF version and the difference wouldn’t be as obvious to them.

Thanks for having a look.