Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

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?
0
UrbanTwitch
Asked:
UrbanTwitch
1 Solution
 
LZ1Commented:
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

0
 
scrathcyboyCommented:
The shadow effect of the "filter" does not work against a background image or color.

What you should be using is GIF images with shadows for this floating effect.

If you want to design universal web pages for all users to see, do NOT use these quirky M$ concepts.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now