In IE10, Iframe does not adjust its Precentage (%) width and height according to its parent

Question

0.00/5 (No votes)

See more:

Interestingly, I have worked this example by braking in it a very small part and found out the problem.

In IE10, if an <iframe> is present inside a , the height width attributes of an Iframe given in percentage doesn't pay much heed to the height width of its parent.

Like in the following example, iFrame with the id 'test' takes height width = 100%. While its parent's height is 1px. *When you run this in IE10, the frame appears to be very large in height and shoes anomolous behavior*

JavaScript

<HTML>
   <HEAD>


   </HEAD>
   <BODY id="WESWinDesktop"  >
   <table id=WESStructure width="100%" height="100%" border="2" cellpadding="0" cellspacing="0">
   <tr>
       <td id="WESMainWinTitleBarCont" height="1px">     this is 'td' for iframe
               <iframe  id="test" src="" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
       </td>
     </tr>

     <tr>
       <td id="WESMainWinMenuBar" height="20">       menu bar
       </td>
     </tr>
     <tr>
       <td height="100%" >content

       </td>
     </tr>
     <tr>
       <td id="WESMainWinStatus" height="20">    status bar
       </td>
     </tr>
   </table>

   </BODY>
   </HTML>

I have tried the same thing by putting a

instead of a

but the behavior is the same. So I guess there is something wrong IE10 interprets width height attributes of an iframe.

Much Help needed guys!

Thanks in advance.

Posted 17-May-13 1:58am

Zaki Imtiaz

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

BBBwex · Answer 1 · 2013-05-17T03:20:00

I haven't worked with IE10, (or IE in general very little), but I did have little problems before with codes between various browsers.

For styling, you're bettor off using a CSS sheet and style your Iframe from there and let the browser sort it out then... It got me over the little differences between the browsers reading style attributes defined in tags

eg

<iframe  id="test" src="" frameborder="0" class="Iframe1" />

and in your CSS file:

CSS

background
{
}

.Iframe1
{
    border-style:none;
    width:100%;
    height:100%;
    overflow:none;
}

AlphaDeltaTheta · Answer 2 · 2013-05-17T16:56:00

Solution 2

If you drop a doctype declaration in html, ie falls back to ie6/ie7 mode that had this bug. In order to correct this you need to add the following meta tag.

HTML

<meta http-equiv="X-UA-Compatible" content="IE=10" />

You can replace 10 with any version or "Edge" to always use latest version. Your code works fine in IE10 standards mode. you can change the mode in F12 developer tools.

Posted 17-May-13 16:56pm

AlphaDeltaTheta

Comments

Zaki Imtiaz 20-May-13 1:20am

No sir. When I introduced a meta tag, it didn't work as well. :(

AlphaDeltaTheta 20-May-13 21:19pm

Then try with IE=9 and setting the mode in devtools.
When I ran your code, I first ran into the same problem. But later on changing the display mode in the browser F12 devtools to IE10 from IE7 quirks, it worked fine without a glitch!
Also add a doctype declaration to the head of your html.
Here is more about doctype declarations, choose one according to your html version and try.
Good Luck!

Zaki Imtiaz 21-May-13 1:19am

hmm..let me try this.