0

My IFrame doesn't fill the cell in Explorer but does in Chrome. What gives? To fix in Explorer I have to hard code px the height and width. Any ideas why this is happening?

    <style type="text/css">
        .styleTbl
        {
            margin-bottom:10%;
            margin-left:10%;        
            width:80%;

        }

    .styleBg
    {
        background: #00aced;

    }
    .style_logo
    {
        width:80%;
        margin-left:10%;
    }
    .styleObj img
    {
        width: 100%;
    }
    iframe 
    { 
        background-color:#ffffff;
        border-color:#eee9e9 ;
        border-width:4px;
        height: 99%;
        width:99%;
        margin:1px;
    }


  </style>
</head> 
<body class="styleBg" onLoad="GetNewsSource()"> 
    <table class="style_logo">
        <tr>
            <td>
                <img alt="logo_banner Missing" class="style_logo" longdesc="Banner" src="logo_banner1.png" align="left"/>    
            </td>
            <td>
                <img alt="spinning_wheel" longdesc="Gif" src="Live.gif"style="height: 110px; width: 180px; " align="middle"/>
            </td>
        </tr>
    </table>
    <br />
    <table class="styleTbl">
        <tr>
            <td height="100%" width="50%" rowspan="2">
                <iFrame src="index.html"scrolling="no"></iFrame></td>
            <td class="styleObj">
                <img alt="png1" class="styleObj" longdesc="png1" src="png1.png"/></td>
        </tr>
        <tr class="styleRow">
            <td class="styleObj">
                <img alt="png2"  class="styleObj" longdesc="png2" src="png2.png"/></td>
        </tr>
        <tr>
            <td>
                <img alt="png3"  width=100% longdesc="png3" src="sentiment.png"/></td>
            <td class="styleObj">
                <img alt="png3"  class="styleObj" longdesc="png3" src="png3.png"/></td>
        </tr>
    </table> 

</body> 
</html>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Fearghal
  • 10,569
  • 17
  • 55
  • 97

1 Answers1

0

The issue is with using both percentages and pixel measurements for your iframe. Let's say you have a container width of 1000px. 99% of this is 990px, however applying a 1px margin to this results in a total internal width of 992px, leaving 8px for white space.

If you wanted to code this so no gaps would show, you should use a percentage for the margin also; 0.5% would return 4px for both sides in this example, leaving 0px of white space.

I suggest changing IFrame styling code to:

iframe 
{ 
    background-color:#ffffff;
    border-color:#eee9e9 ;
    border-width:4px;
    height: 99%;
    width:99%;
    margin:0.5%;
}
JaanRaadik
  • 571
  • 3
  • 11
  • What do you suggest for the IFrame style? – Fearghal Dec 17 '13 at 12:49
  • I tried the following but same result, chrome still shows correctly. iframe { background-color:#ffffff; border-color:#eee9e9 ; border-width:0.5%; height: 99%; width:99%; margin:1%; } – Fearghal Dec 17 '13 at 12:53
  • No Fearghal that is incorrect, that would add 1% to each side of the element, leading to a total width of 101%. I suggest 0.5% margin, so 0.5% is added to each side, totalling 100%. – JaanRaadik Dec 17 '13 at 12:54
  • Tried that, same result. it is not a case of 1px here and there, the Iframe width fills cell but height is < a third so some bigger issue is happening. If i set height to anything it ignores it. :s – Fearghal Dec 17 '13 at 12:57
  • Given that the issue is the height and not the width, you would have to use some styling to make the child element(The Iframe) fill the height in every browser. What doctype are you using? – JaanRaadik Dec 17 '13 at 12:59
  • I believe this issue was addressed already at http://stackoverflow.com/questions/5867985/iframe-auto-100-height, Rudie's answer. – JaanRaadik Dec 17 '13 at 13:05
  • Nasapc123 - tried that too, same issue. If i set the parent td of iFrame to a hard coded px, it enlarges it. Doc type is – Fearghal Dec 17 '13 at 13:15
  • Try just using – JaanRaadik Dec 17 '13 at 13:21