4

I've developed a Facebook page tab that doubles up as a website style app:

http://www.facebook.com/pages/ECSid/246158322109906?sk=app_249322331789747

When you visit this app on Chrome, Firefox or Safari the iframe is rendered just fine. However in IE, you are displayed a blank page tab. If I remove all the content from the tab and replace it with some basic HTML, that displays IE and if I view the page tab independently from Facebook it works just fine.

When using IE8's developer tools, it seems load only half of the page tab is loading, almost like it loads the head and gives up. The javascript doesn't appear to have any errors when testing in Chrome and I don't seem to be able to see any errors in IE.

The only other thing that appears in Chrome when testing is this error:

Unsafe JavaScript attempt to access frame with URL http://www.facebook.com/risetoremain from frame with URL...

Any suggestions on how I can get this tab to render in IE?

edcs
  • 3,847
  • 2
  • 33
  • 56

4 Answers4

1

I had the same problem, only the issue for me was facebook was adding an extremely large negative margin to the html element of my page tab. So my content was there, it was just moved over some 3000 pixels. Adding an inline style to my html element worked for me. 

<html xmlns="http://www.w3.org/1999/xhtml" style="margin-left:0 !important;">
CowboyB
  • 100
  • 2
  • 9
1

As your app works in iframe: facebook page tab,
in order to internet explorer works works properly, you should set P3P policy settings by:

for php: <?php header("p3p: CP=\"ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV\"");?>

for asp.net(in global.asax):

protected void Application_BeginRequest(Object sender, EventArgs e)
{

    HttpContext.Current.Response.AddHeader("p3p", "CP=\"CAO PSA OUR\"");

}

otherwise in internet explorer you can't access cookie

after applied P3P, your response header look like this:

Response Headers
Cache-Control   no-cache
Content-Type    text/html; charset=utf-8
Server  Microsoft-IIS/7.0
P3P CP="CAO PSA OUR"
...
asdf_enel_hak
  • 7,474
  • 5
  • 42
  • 84
  • I've added the P3P header to my file, but it still didn't seem to fix the issue. I've tested to see if it's all working and I can see this in the response: p3p:CP="ALL DSP COR PSAa PSDa OUR NOR ONL UNI COM NAV" – edcs Nov 30 '11 at 21:11
  • Sorry, yes - its in the response header. (I'm using php so I copied your php example). – edcs Nov 30 '11 at 21:27
  • Sorry - should have mentioned that the testing is being carried out on a testing server which requires authentication to view, so I can't actually show you the updates I've made... – edcs Nov 30 '11 at 21:41
  • Another update: If I comment out the link to the CSS style sheet, the page loads up just fine (albeit without any styling)! – edcs Nov 30 '11 at 22:48
  • For anyone coming to this page trying to solve this issue, and like OP has issue within the CSS. I also had this issue and fixed is by removing a `* {}` rule – Seb Ashton Jul 05 '12 at 11:51
  • I fixed same problem deleting this two lines from my css file: `html { background-color: white; position: relative; } body { background-color: white; position: relative; }` – Karol Aug 27 '12 at 07:26
  • @Carlos from memory the * { } rule also contained a position relative, so I assume that is the issue as you correctly point out – Seb Ashton Aug 28 '12 at 06:09
  • Yeah - then probably removing position: relative is the solution here. – Karol Aug 28 '12 at 07:16
  • I had same issue. I fixed by adding condition for IE7 and IE8. html {position:relative; *position:absolute; position:absolute\9; height:100%;} – Gaurang Jadia Jan 11 '13 at 22:51
0

I know this is a bit late but we had the same problem and I solved it by adding a doc type to the html. It solved it for IE7 and IE8.

user3062158
  • 1
-3

I had same problem, i just removed the "console.log" from my code.

Joe
  • 1