Ugly anti-alias with Shadow filter in IE7 & IE8

This image contains screen shots of how IE6, IE7, and IE8 are applying the shadow filter to text. I do not want the dark gray pixels on the rounded edges of text that appear only on IE7 and IE8. Does anyone know what I can do to prevent this ugliness?

This is the CSS I’ve set to add a text shadow:

.textShadow {
	text-shadow:#489951 0.1em 0.2em 0.2em;
	filter: progid:DXImageTransform.Microsoft.Shadow(color="#489951", direction=150, strength=2, positive="true");
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#489951', direction=150, strength=2, positive='true')";
}

Hi, it could be a number of issues although we’d need to see the full code to know.

Post a link to your site (new members c an post links now) and we will debug it to the best of our ability :slight_smile:

Or if you don’t have a site, give us enough HTML/CSS to reproduce the problem (try to minimalize the test case to make it easier on us)

Okay, this sample page demonstrates that problem I am having in IE7 & IE8.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Shadow filter</title>
<style type="text/css">
body,div,span,ul,li,a {
	margin:0;
	padding:0;
}
.header {
	margin:0 auto;
	padding:10px 20px;
	position:relative;
	background:#4b7 none;
}
.header ul {
	list-style-type:none;
	height:18px;
}
.header li {
	margin-right:14px;
	_width:0;
	float:left;
}
.header a {
	font-size:14px;
	line-height:18px;
	font-weight:bold;
	color:#fff;
	text-transform:uppercase;
	text-decoration:none;
	display:block;
	cursor:pointer;
}
.header a.textShadow {
	text-shadow:#339966 0.1em 0.2em 0.2em;
	filter: progid:DXImageTransform.Microsoft.Shadow(color="#339966", direction=150, strength=3, positive="true");
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#339966', direction=150, strength=3, positive='true')";
	zoom:1;
}
.header a:hover.textShadow {
	color:#fff;
	text-shadow:#006633 0.1em 0.2em 0.2em;
	filter: progid:DXImageTransform.Microsoft.Shadow(color="#006633", direction=150, strength=3, positive="true");
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color='#006633', direction=150, strength=3, positive='true')";
	zoom:1;
}
.lucida {
	font-family:"Lucida Sans","Lucida Grande","Lucida Sans Unicode",sans-serif;
}
</style>
</head>

<body>
<div class="header">
	<ul class="lucida">
		<li><a href="lorem.html" class="textShadow">lorem</a></li>
		<li><a href="ipsum.html" class="textShadow">ipsum</a></li>
		<li><a href="go.html" class="textShadow">go!</a></li>
	</ul>
</div>
</body>
</html>

Hi, perhaps it’s just me but I can hardly even see those little specs.

I’m not quite sure why it’s happening on your version, though I’ve ruled it down to be the actual text shadow rule itself.

I’ve seen other text shadows on other sites (you can google some) and no anti aliasing there. Make sure your text shadow rules match theirs :slight_smile: