By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,089 Members | 2,226 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,089 IT Pros & Developers. It's quick & easy.

Iframe Not Working in IE, but fine in Firefox

P: 6
I am trying to implement a customer survey into our webpages. The survey consists of a javascript file which launches an html file in an iframe. When the user meets certain parameters defined in the js file it launches the iframe. This works fine in Firefox and the iframe is launched perfectly. In IE this does not work at all. When the iframe is supposed to be launched the page goes blank. It does not even continue to load the web page and seems to be trying to open the html file, but does not. It does not throw any errors.

In firefox, the webpage loads and the iframe opens the html without a problem. Any ideas why this would happen? I cannot give you a url to see the error as this is in our development environment, but was hoping maybe someone has some experience with an issue like this and can point me in the right direction. Any help is appreciated. thanks.
Jan 5 '08 #1
Share this Question
Share on Google+
4 Replies


gits
Expert Mod 5K+
P: 5,331
hi ...

post the code that makes the problem ... so that we may have a closer look at it ...

kind regards
Jan 5 '08 #2

P: 6
Here is the html code that should open up in the iframe.

Expand|Select|Wrap|Line Numbers
  1. <!-- Version : DHTML Trigger 4.0 -->
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv=Content-Type content="text/html; charset=utf-8">
  6. <title>Survey Invitation Page</title>
  7. <style type="text/css">
  8. <!--
  9. body, div, table, td {
  10.     font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
  11.     font-size:11px;
  12.     color:#666666;
  13.     background-color:#ffffff;
  14.     margin:0px;
  15. }
  16. .subtitle {
  17.     font-size: 120%;
  18.     color:#000000;
  19.     font-weight:bold;
  20. }
  21. .footnote{
  22.     font-size: 80%;
  23.     font-weight: bold;
  24. }
  25. .OuterTable {
  26.     background: #ffffff;
  27.     border:2px #000000 ridge;
  28.     border-spacing:1px;
  29.     padding:1px;
  30.     width:100%;
  31.     height:100%;
  32. }
  33. .InnerTable {
  34.     border:0px;
  35.     background-color:#ffffff;
  36.     width:100%;
  37. }
  38. -->
  39. </style>
  40. </head>
  41. <body>
  42. <table summary="Outer table for formatting layouts" class="OuterTable">
  43. <tr><td>
  44. <div id="fsrInvite" style="width:100%">
  45.     <table summary="Inner table for formatting layouts">
  46.         <tr>
  47.             <td>
  48.                 <table summary="Inner table for formatting layouts" class="InnerTable">
  49.                     <tr>
  50.                         <td align="right" style="padding: 0px 5px 1px;">
  51.                         <a href="javascript:window.parent.fsr_hideWindow()" title="Clicking this link will close this window." align="right">Close</a>
  52.                         </td>
  53.                     </tr>
  54.                 </table>
  55.             </td>
  56.         </tr>
  57.         <tr>
  58.             <td style="padding: 0px 10px 10px;">
  59.                 <table summary="Inner table for formatting layouts" class="InnerTable">
  60.                     <tr>
  61.                         <td align="left" valign="middle"><img src="sitelogo.gif" alt="Site logo"></td>
  62.                         <td align="right" valign="top"><img src="FSRlogo.gif" alt="ForeSee Results logo"></td>
  63.                     </tr>
  64.                 </table>
  65.             </td>
  66.         </tr>
  67.         <tr>
  68.             <td style="padding: 0px 10px 10px;" align="left" valign="top" width="100%">
  69.                 <span class="subtitle">Thank you for visiting FEMA MIP</span><br><br>
  70.                 You have been selected to take part in a customer satisfaction survey. This survey is conducted by an independent company. <br><br>The feedback obtained from this survey will help us to enhance our website. All results are strictly confidential.
  71.             </td>
  72.         </tr>
  73.         <tr>
  74.             <td>
  75.                 <table summary="Inner table for formatting layouts" class="InnerTable">
  76.                     <tr>
  77.                         <td align="center" style="padding:10px 15px 10px;" valign="middle" width = "50%"><input type="button" class="btn" alt="Clicking continue will launch a customer satisfaction survey in a new browser window." value="Continue" onclick="javascript:window.parent.fsr_hideWindow();javascript:window.parent.Pop();"></td>
  78.                         <!--Remove this line to enable No thanks--
  79.                         <td align="center" style="padding:10px 15px 10px;" valign="middle" width = "50%"><input type="button" class="btn"  alt="Clicking No thanks will close this window." value="No thanks" onclick="javascript:window.parent.fsr_hideWindow()"></td>
  80.                         !--Remove this line to enable No thanks-->
  81.                     </tr>
  82.                     <script type="text/javascript">
  83.                         if (window.parent.fsr_NS8){
  84.                             document.write('<tr><td style="padding:0px;" valign="top" align="center" class="footnote">');
  85.                             document.write('*In Netscape 8+, the survey might open in a separate tab');
  86.                             document.write('</td></tr>');
  87.                         }
  88.                     </script>
  89.                 </table>
  90.             </td>
  91.         </tr>
  92.     </table>
  93. </div>
  94. </td></tr>
  95. </table>
  96. </body>
  97. </html>
And here is the iframe statement in the js file

Expand|Select|Wrap|Line Numbers
  1. <div id="fsr_window" style="position:absolute; left:440px; top:150px; z-index:100; border:0; overflow:hidden; visibility:hidden; filter:revealTrans(Duration=0.5, Transition=23);"><iframe id="cframe" src="/portal51/mapmod/foresee/FSRInvite.html" FrameBorder=0 Scrolling=NO width=400 height=290></iframe></div>
When it tries to launch the iframe the source of the main document only shows the iframe statement above and the screen is blank. This works perfectly in firefox.
Jan 5 '08 #3

Expert 100+
P: 785
Here is the html code that should open up in the iframe.

...

And here is the iframe statement in the js file

Expand|Select|Wrap|Line Numbers
  1. <div id="fsr_window" style="position:absolute; left:440px; top:150px; z-index:100; border:0; overflow:hidden; visibility:hidden; filter:revealTrans(Duration=0.5, Transition=23);"><iframe id="cframe" src="/portal51/mapmod/foresee/FSRInvite.html" FrameBorder=0 Scrolling=NO width=400 height=290></iframe></div>
When it tries to launch the iframe the source of the main document only shows the iframe statement above and the screen is blank. This works perfectly in firefox.
You have put your <iFrame> into a <div>, try to delete this surrounding <div>. If it works afterwards, then you know that this DIV is the reason why your page does not display, and you can put it back and modify it until it works.

I have not tried your code, but from my experience, most likely this is the reason. Your DIV uses "overflow:hidden visibility:hidden", which hides all the content inside. And the given "filter:revealTrans..." may also behave different in different browsers.
Jan 6 '08 #4

acoder
Expert Mod 15k+
P: 16,027
I have not tried your code, but from my experience, most likely this is the reason. Your DIV uses "overflow:hidden visibility:hidden", which hides all the content inside. And the given "filter:revealTrans..." may also behave different in different browsers.
Yes, that would be the reason. The filters only work in IE.
Jan 7 '08 #5

Post your reply

Sign in to post your reply or Sign up for a free account.