Forum Moderators: not2easy
I'm testing some HTML using the DropShadow filter, but I find that the border of the object with the shadow gets in the way of content (especially, links). Here is some sample code:
<html>
<head>
<style>
.ds {
border: 10pt solid green;width: 100px;height: 100px;font-size: 8pt;
filter:progid:DXImageTransform.Microsoft.dropshado w(Color='#66000000', Positive='true', OffX=15.0, OffY=15.0);
}
.ds a { color: red;z-index: 100;}
</style>
</head>
<body>
<span class=ds>
<a href=#>A link</a>
</span>
</body>
</html>
On IE6, if you try to click on the link, you won't be able to - the border's shadow of the parent SPAN is in the way. You can click only on the link's shadow, though it gets tricky, and not so intuitive ...
Is there a way to place the link 'above' the SPAN border's shadow, so it becomes clickable?
I've tried adding doctype (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >), changing the SPAN to DIV (for the size to be correct) and still no luck.
Thanks!
Simple answer to me seems like why don't you just add a margin to your shadowed element? (or even the link(s)) that way the link(s) will be bumped down so it's not in the way.
Lastly though, you probably know IE is the only browser which supports such an effect. It's not a great idea to use for that reason. The alternate browser market - especially firefox - is increasing all the time, and/because IE6 is a really lousy browser.
There is a special thing you can do to get firefox support the same thing IE does though too, I think a google search should work.
