Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
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*
 

 
 <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 2:58am
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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:
 
background
{
}
 
.Iframe1
{
    border-style:none;
    width:100%;
    height:100%;
    overflow:none;
}
  Permalink  
Comments
Zaki Imtiaz at 17-May-13 9:42am
   
Nah..it doesn't work. Exactly the same output
Rate this: bad
good
Please Sign up or sign in to vote.

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.
<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.
  Permalink  
Comments
Zaki Imtiaz at 20-May-13 1:20am
   
No sir. When I introduced a meta tag, it didn't work as well. :(
Amitosh Swain at 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 at 21-May-13 1:19am
   
hmm..let me try this.

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



Advertise | Privacy | Mobile
Web03 | 2.8.141220.1 | Last Updated 17 May 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100