iFrame being cut off/no scrolling in IE8

I am trying to create a mini website within a facebook application for my Air Force unit using woobox and/or iFrame Apps. It allows you to create an iFrame within Facebook. The problem I am having is when viewing with our government computers which use IE8, the frame is cut off after a certain height with no ability to scroll. I have spoken with the woobox support team and they have tried putting my html in a div container and forcing a scroll bar but I still have no luck. I have heard this may just be an IE8 issue as other browsers display the content just fine.

Here is the link to the tab that uses woobox - https://www.facebook.com/502LRSJBSA/app_208195102528120

and the on that uses iFrame Apps - https://www.facebook.com/502LRSJBSA/app_156218351098324

Here is the HTML


<style>
  html { 
    overflow-y: scroll; 
    overflow-x: hidden; 
  }
  div.container {
    margin: 0;
    padding: 0;
    max-height: 100%;
  }
  p > img {
    max-width: 792px;
    margin-right: 18px;
  }
</style>
<body>
  <div class="container">
<p align="center">&nbsp;<img src="https://scontent-a-ord.xx.fbcdn.net/hphotos-prn2/t1.0-9/1173863_648973771818869_7505824624196866982_n.png" alt="LGRD Banner" width="810" height="160" /></p>
<p align="center">&nbsp;</p>
<table style="height: 21px;" width="792">
<tbody>
<tr>
<td align="middle">
<p class="p1"><strong>Our Mission</strong></p>
<p class="p1">&nbsp;</p>
<p class="p1">Executes air terminal operations, arranges worldwide movement of personal property, passengers and cargo,</p>
<p class="p1">provides vehicle operations support and prepares, plans and executes contingency/deployment operations. &nbsp;</p>
</td>
<td align="middle">
<p class="p1"><strong>Our Vision</strong></p>
<p class="p1">&nbsp;</p>
<p class="p1">Highly trained professionals determined to provide a wide range of deployment and</p>
<p class="p1">distribution operations with outstanding customer service across the Joint Base San Antonio Enterprise</p>
</td>
<td align="middle">
<p class="p1">&nbsp;<strong>Our Goals</strong></p>
<p class="p1">&nbsp;</p>
<p class="p1"><strong>*</strong>Customer Satisfaction</p>
<p class="p1">&nbsp;</p>
<p class="p1"><strong>*</strong>Deployment Ready</p>
<p class="p1">&nbsp;</p>
<p class="p1">&nbsp; &nbsp;<strong>*</strong>Safe &amp; Efficient Transportation Support &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</p>
</td>
</tr>
</tbody>
</table>
<p align="center">&nbsp;<img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1.0-9/10155283_648985641817682_4114550052254366548_n.png" alt="LGRDO" width="810" height="80" /></p>
<p align="center">&nbsp;</p>
<p align="center"><img src="https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-frc1/t1.0-9/10177255_648993048483608_1187581240381821747_n.png" alt="LGRDX" width="810" height="80" /></p>
<p align="center">&nbsp;</p>
<p align="center"><img src="https://scontent-b-dfw.xx.fbcdn.net/hphotos-ash4/t1.0-9/1684_649043775145202_5397337632421521622_n.png" alt="LGRDC" width="810" height="80" /></p>
<p align="center">&nbsp;</p>
<p align="center"><img src="https://scontent-b-ord.xx.fbcdn.net/hphotos-frc3/t1.0-9/10153801_649261301790116_8848047707690168619_n.png" alt="LGRDA" width="810" height="80" />&nbsp;&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center"><img src="https://scontent-a-ord.xx.fbcdn.net/hphotos-frc1/t1.0-9/10007428_648963418486571_4997825278236839042_n.png" alt="LGRDAS" width="810" height="80" /></p>
<p align="center">&nbsp;</p>
<p align="center"><img src="https://scontent-a-ord.xx.fbcdn.net/hphotos-prn1/t1.0-9/10247283_649271308455782_7291554314985352047_n.png" alt="LGRDAH" width="810" height="80" /></p>
<p align="center">&nbsp;</p>
<p align="center"><img src="https://scontent-a-ord.xx.fbcdn.net/hphotos-prn2/t1.0-9/10254020_649279541788292_860921350533334318_n.png" alt="LGRDAP" width="810" height="80" /></p>
<p align="center">&nbsp;</p>
</div>
</body>

Any help would be greatly appreciated. My commander is expecting something to show in a week and what I have looks great so far but it of course can’t be seen! These darn government computers will be the death of me. This only happens in internet explorer 8 though, so if you use any other browser it will look fine. Thanks in advance!

HI,

I’m not sure I’m seeing what you are seeing but the content isn’t cut off in my IE8. It is cut-off in chrome though and is due to the max-height:100% combined with the overflow:hidden.

You need to remove the max-height from div.container.

I don;t know if it will be any help for your IE8 issue though.

This is what it looks like on my browser. You can see at the bottom where the second picture is going to start. No scroll bars, no ability to scroll the frame. Which is ironic because in my original post, all of my html I pasted is in a nice frame that I can scroll with no issues.

I deleted the max height from div container as you suggested with no change.

Could this in any way be related to my security zone settings? Maybe IE8 is blocking iFrame content or something? I find it hard to image that I guess. The content is there. If i highlight the content and drag my mouse down it will scroll through the entire frame. For some reason it just doesn’t want to scroll with a mouse wheel or have a manual scroll bar. Nothing works.

Have you triggered compatibility mode by mistake?

IE7 looks like your screenshot but IE8 seems ok which seems to suggest you are running IE8 in compatibility mode as it emulates IE7 in that mode.

I think we need someone else with IE8 to have a look at the page and confirm.

Well I opened up developer tools and was messing around with the browser mode and document mode. When I have browser mode set to IE8 (non-compatibility mode) and Document Mode set it IE7 standards my scroll bar shows up just fine! Is there any way to put code in that forces the users browser to do this? I think it would be frustrating for other members who are not computer saavy to figure this out.

EDIT: I tried using IE8 standards with IE8 browser and the scroll bars stayed there. I guess you were correct. Compatibility mode is the culprit.

You can force ie8 to stay in standards mode with this meta tag but I don’t know if that will make a difference when your page is an iframe but worth a try.


<!-- force IE8+ into standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

It needs to be the first meta tag in the page.

Also be aware that testing browser configuration with the developer tools in IE is pretty much useless as it renders like no version of IE at all. The only real way to test versions of IE is by using the real browser.

assuming i put the tag in the right location, it looks like it did not work. I added it right after the style container and before <body>. I even tried changing it to IE=EmulateIE7 to force 7 specifically with no luck. I can’t understand how it can work in developer tools yet i cant get it to work during normal browsing. So frustrating to say the least. I appreciate you helping with this though.

No you never want to emulate IE7 :slight_smile: Always use the meta tag I gave you and none of the others because they will have severe detrimental effects and as I said it must be the first meta tag on the page or its too late.

e.g. Here:


<!DOCTYPE HTML>
<html>
<head>
<!-- force IE8+ into standards mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
etc...


Don’t take anything that you see in developer tools as true because they are so far out its not true. Use a VM or the real browsers for testing (or [URL=“http://ietester.com/”]even IE tester as a last resort) but never the emulation in the developer tools.

However, the problem may be that as your page is in an iframe it may be affected by the parent page anyway which you can’t do anything about as it isn’t your page.

Anyway as I said I see IE8 working OK anyway so lets hope someone with IE8 can also take a look to confirm.

Well, i hope i can figure something out soon. Is it possible it would have anything to do with security zone settings? Government firewall? etc. It is a DoD computer system that im having the issues on. Seems odd you have no issues with it but I do. So strange.

It may be that your system has a policy of enforcing quirks mode on all documents (either by accident or on purpose) and in IE that will affect child iframes also.

If this is the case then I’m not sure there is anything you can do about it.

Try removing this from your css.


 html { 
    overflow-y: scroll; 
    overflow-x: hidden; 
  }

And then force zoom on the container.


.container{zoom:1.0;position:relative}

If that doesn’t work then you could maybe you could put a px height on your container and apply overflow:auto

I don’t think it will make any difference but I’m out of ideas.:slight_smile:

where in the code should i add the .container{zoom:1.0;position:relative}

In the same place as the snippet you posted.

i.e. here:


<style>
  html { 
    overflow-y: scroll; 
    overflow-x: hidden; 
  }
  div.container {
    margin: 0;
    padding: 0;
   [B]zoom:1.0;
   position:relative;[/B]
  }
  p > img {
    max-width: 792px;
    margin-right: 18px;
  }
</style>

No luck it seems. I really do appreciate your time and effort. I can’t believe that our computer systems are causing such a stink with this content. Especially since your IE8 can display it just fine. Thats military intelligence for ya.

Yes, I think its some sort of proxy issue forcing quirks mode on the page. IE8 is quickly on the way out and a lot of people are dropping support for it now. My bank has dropped support for IE8 just recently and you need IE9 at least to access online banking.

There probably is a solution but the problem is that it can only be tested on your specific system so everything we do from here is just a guess I’m afraid.

Not sure why it works but putting all this junk in front of my content it finally scrolls and looks just fine in IE8 now. What I did was find a iFrame Tab in the developers page that actually had a scroll bar and kind of reverse engineered the code to fit my content. After a lot of trial and error it finally works. Could you help explain why this works now?

<style type="text/css">* { margin: 0; padding: 0; border: 0; }
html {
overflow: scroll;
margin: 0px;
    padding: 0px;
    border: 0px;
}
div.frames,
iframe.iframeapp {
clear: both;
}
iframe.iframeapp {
margin: 0px;
    padding: 0px;
    border: 0px;
}
iframe.iframeapp, img {
border:0;
margin:0;
padding:0;
}
</style>
<div style="height:750px; overflow:scroll;">

Hi,

It’s a little hard to tell why its working now for you as it not now working for me in IE8 :slight_smile:

In IE8 I get no vertical scrollbar and no obvious way to scroll the content. You can scroll the content using the mouse wheel so the scrollbar is probably cut off and not visible.

In modern browsers (Firefox and Chrome) we get two vertical scrollbars which makes it awkward to scroll because the inner scrollbar is not visible until you scroll the whole thing sideways and then you can see the vertical scrollbar.

I’m guessing that removing the overflow-x and y from the html element and the fact that you put the content in your page inside a scrollbar is helping your version of IE8 to work. If all you care about is the version of IE8 that you have there and you don’t need to cater for other browsers then it looks like you have a solution :slight_smile:

If you wanted to narrow down the trigger then you could probably do that quite easily now by removing one rule at a time and testing.

e.g. First remove the scrolling div wrapper and see what happens. If nothing changes then you don’t need that div.

If it breaks then you know that it was the extra scrolling div that was needed.

If it works without the div then try removing the overflow-scroll from html and replace it with your original rules for html. I’ve a feeling the trigger is here somewhere.

Eventually you should be able to narrow the problem down exactly. Unfortunately I can’t do that from here because I can’t replicate your set up otherwise I’d do it as its quite intriguing :slight_smile:

im not sure if you viewed it before or after i changed it just recently after i fixed it. The “Start Here” tab app does not allow style tags or wrappings at all. It adds its own default html and mine pretty much starts at <div>. So all I did was add the overflow-y:scroll and overflow-x:hidden and position: fixed to my div container. Ive tested it in safari, chrome, and IE8. no vertical scroll bar but i can scroll vertically and no horizontal scroll bar but there is no need for it the whole page is shown. Let me know what you see now. The “Start Here” tab i use now is at https://www.facebook.com/502LRSJBSA/app_156218351098324 Just click on the LGRD link. That is what i have been testing all this on. The LGRD tab is the other one. Both should look good now. Thank you!

Hi,

Yes that link seems to be working ok. I originally clicked the link in your first post which was the one that was broken.

It looks like you have found a solution but why it should suddenly start working is a little bit of a mystery. It could be the styles you added just triggered something to make it work but there is no logic to it as it should have worked originally anyway (and did work ok for me in IE8).

There could have been a cache issue which has cleared now but we will never know :slight_smile:

It just shows that perseverance often pays off :wink:

Well whatever fixed it, i sure appreciate your help and patience. Thanks a lot! Take care!