SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code:
    .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')";
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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

    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)
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Member
    Join Date
    Apr 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, this sample page demonstrates that problem I am having in IE7 & IE8.

    Code:
    <!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>

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,622
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •