Embedding Facebook in an IFrame

Question

I have an app that has an IFrame with a page flash overly allowing you to draw on webpages. When I go to Facebook with the application, an overlay pops up covering everything at 50% opacity (Which is fine). The problem is that the overlay is all black in some installations of IE7. Can anyone advise on how to get around this?

Here is my code:

<iframe name="test" ID="test" src="http://www.facebook.com/cyberkruz" height="200" style="width: 100%; height: 100%" allowtransparency="true"></iframe>

Here is the code that they generate that does this.

<div style="z-index: 1000001; position: absolute; filter: alpha(opacity = 50); WIDTH: 9999px; background: black; height: 9999px; top: 0px; left: 0px; opacity: 0.5;" onclick="top.location.href=window.location.href"/>

Is there something I can do with meta tags or something to get the filter alpha to work correctly?

Answer 1

Hum, try this in a css class (order is important) on the iframe :

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity = 50);
opacity: .5;

The first line is the new IE8 syntax, yep another one....

EDIT: The logic should be to move the opacity filter outside the iframe source but after your edit I guess you can't.

Answer 2

If this is a security restriction and your application page is stored locally you might try to add the mark of the web (http://msdn.microsoft.com/en-us/library/ms537628(VS.85).aspx ) to your web page (this will prevent IE to consider it a local page and run local security policy on it )

Answer 3

I suppose this can be solved with CSS...

I don't see why this shouldn't work if You put a div above it, but I belive You that it doesn't work:) As for the solution with weird ie8 namespaces - there is something similiar for ie7. I saw that on MSDN

...but

You can try using PNG background. Not an ordinary PNG, but a 8-bit one that works in ie6 and above and almost everything! It's like a transparent gif, but with opacity instead of full transparency.

read HERE

You'll need to find a tool that creates them. GIMP doesnt (AFAIK)