asked on

CSS Filter is stopped by background

OK let's say I have this

.test {
filter:DropShadow(Color=#000000, OffX=1, OffY=1);
}

Open in new window

Yes, it works fine. The text-shadow appears in Internet Explorer. However... if I add a background for color like so:

    .test {
    filter:DropShadow(Color=#000000, OffX=1, OffY=1);
    background:#ffffff;
}

Open in new window

Can you guess what happens? The filter goes way! However, if I ,once again, remove the background property... the filter (text-shadow) comes back!

Help?

LZ1

Have you read this?

http://msdn.microsoft.com/en-us/library/ms532985%28v=VS.85%29.aspx

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style> 
.test {
filter:DropShadow(Color=#000000, OffX=1, OffY=1);
color:#36f;
}
.test2{
    filter:DropShadow(Color=#000000, OffX=1, OffY=1);
    background:#ffffff;
   color:#36f;
}
.test3 {
	filter:
    progid:DXImageTransform.Microsoft.MotionBlur(strength=4, direction=310);
        background:#ffffff;
}
</style>
</head>

<body>

<div class="test">  TEST  </div>
<div class="test2"> TEST 2 </div>
<div class="test3"> TEST 3 </div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

scrathcyboy

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial