SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Cambridge, ON, Canada
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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:

    Code:
    iframe	{width:100%; height:100%; border:0}
    which didn't help, and I don't see a problem with my actual HTML:

    Code:
    <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!

  2. #2
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Add quotes around height, width, frame border attributes.

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Cambridge, ON, Canada
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's that simple?! D'oh!

    Thanks!

  4. #4
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 Code:
    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 Code:
    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%; 
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •