Follow button - IE CSS filters


#1

Hi,
I have an issue with Internet Explorer CSS filters (IE7 and IE8).
I have the twitter follow button in a div like this:

<div class="content">
...
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/follow_button.html?screen_name=twitterapi" style="width:300px; height:20px;"></iframe>
...

And then the following CSS class on the div:

.content {
filter: progid:DXImageTransform.Microsoft.Shadow(Color=#d4d5de, Strength=1, Direction=0),
        progid:DXImageTransform.Microsoft.Shadow(Color=#d4d5de, Strength=1, Direction=90),
        progid:DXImageTransform.Microsoft.Shadow(Color=#d4d5de, Strength=1, Direction=180),
        progid:DXImageTransform.Microsoft.Shadow(Color=#d4d5de, Strength=1, Direction=270);
}

The issue is that those CSS filters above are changing the appearance of the follow button.
Indeed, the text inside the button is almost transparent.
Why are those filters affecting the look of the iframe?
I tried to cancel the filters just for the iframe but didn’t manage to do it.
Is it a way to display the follow button correctly without deleting the CSS filters of the div?
Thanks,

Nicolas


#2