Can't get IFRAME to fill DIV in IE, works fine in FF

[amilardovic]

I'm not sure if I'm posting this in the right forum, I'm assuming the problem is CSS related...

I am in the process of revamping my site (to get out of using frames), I did need to, however, use an IFRAME.

If you take a look at my site at http://www.crolinks.com/cromusic2/ie.php I finally got the site to look (practically) the same in IE as in FF (minus rounded corners). However, if you click on Title in my menu and then on any letter, the IFRAME in the gray DIV block fills the width properly, but not the height. I set both to 100%, so I'm not sure what the problem is.

I tried creating a CSS rule:

iframe	{width:100%; height:100%; border:0}

which didn't help, and I don't see a problem with my actual HTML:

<div class="round10" style="position:absolute; top:105px; left:260px; right:5px; bottom:5px; border:solid 10px #cccccc; background:#cccccc; overflow:hidden;">
<iframe src="blank.htm" name="lyrics" id="lyricsPort" height=100% width=100% frameborder=0></iframe>
</div>

Any help would be appreciated!

[cid8600]

Add quotes around height, width, frame border attributes.

[amilardovic]

It's that simple?! D'oh!

Thanks!

[bulevardi]

If you still have other problems with the layout of Iframes, I found a nice trick for positioning the iframes.
The second example fixes the height-bug so it's sticky until the bottom of the page.

To get iFrames neatly layouted by CSS, try the following code:

For 2 horizontal iFrames (or a 2 column layout) next to each other with a fixed navigation and a flexible content page (100% stretched width), try using this:

HTML: 

<div id="leftcontainer">
<iframe id="leftframe" src="nav.html" name="nav" frameborder="0"></iframe>
</div>

<div id="rightcontainer">
<iframe id="rightframe" src="content.html" name="content" frameborder="0"></iframe>
</div>


CSS:

body {
  margin: 0 auto; padding: 0; 
  overflow: hidden;
}

#leftcontainer { 
  width: 220px; 
  height: 100%;
  display: inline-block; float: left;
}

#rightcontainer { 
  width: *; 
  height: 100%;
  display: inline-block; float: left;
}

#leftframe, #rightframe { 
  width: 100%; 
  height: 100%;
}

----

For 2 vertical iFrames (or a 2 row layout) next to each other with a fixed navigation and a flexible content page (100% stretched height to the bottom), use this code below.
The fix contains a container wrapper and the frames must be positioned "absolute". To stretch the iframe to the bottom correctly, the padding-bottom needs to equal the amount of pixels of the navigation frame.
Without the container, the navigation-frame will dissappear when clicking a link. So that's why we need a container, positioned relative.

HTML:

<div id="container">
<div id="topcontainer">
<iframe id="topframe" src="nav.html" name="nav" frameborder="0"></iframe>
</div>

<div id="bottomcontainer">
<iframe id="bottomframe" src="content.html" name="content" frameborder="0"></iframe>
</div>
</div>


CSS:

body {
  margin: 0 auto; padding: 0; 
  overflow: hidden;
}

#container {
 position: relative;
}

#topcontainer {
  height: 200px; 
}

#bottomcontainer {
  height: *; 
}

#topframe {
  position: absolute; 
  top: 0px; left: 0px; 
  height: 200px; width: 100%;
}

#bottomframe { 
  position: absolute;
  top: 200px; left: 0px;
  padding-bottom: 200px;
  height: 100%; width: 100%; 
}