Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Dec 2011
    Posts
    85
    Thanks
    15
    Thanked 5 Times in 5 Posts

    Help with iframes expanding to 100 percent in DIV

    I have a situation for a page I'm designing for an internal company website. I'm trying to get an iframe to expand to 100% of a div, yet still having difficulty. When I insert the iframe into the div, it will expand to 100% width, but will not expand to 100% height. I've had to hand-write all of it, and I'll admit I've been a little less-than-careful about keeping my code clean. Any suggestions? My HTML and CSS coding is below:

    CSS code:
    Code:
    body {
     margin:0;
     padding:0;
     border:0;			/* This removes the border around the viewport in old versions of IE */
     width:100%;
     height:100%;
     background:#fff;
     min-width:600px;		/* Minimum width of layout - remove line if not required */
    				/* The min-width property does not work in old versions of Internet Explorer */
     font-size:90%;}
    
    a {
     color:#369;}
    a:hover {
     color:#fff;
     background:#369;
     text-decoration:none;}
    
    a.debit:link {color: #006600;}
    a.debit:active {color: #66ff66;}
    a.debit:visited {color: #669933;}
    a.debit:hover {color: #99cc00;}
    
    a.fraud:link {color: red;}
    a.fraud:active {color: orange;}
    a.fraud:visited {color: red;}
    a.fraud:hover {color: orange;}
    
    h1, h2, h3 {
     margin:.8em 0 .2em 0;
     padding:0;}
    
    p {
     margin:.4em 0 .8em 0;
     padding:0;}
    p.one {
      font-family: Arial;
      font-size: large;
      font-weight: bold;
      text-align: center;}
    p.two {
      font-family: Arial Narrow;
      length: 20px
      font-weight: bold;}
    p.three {
      font-family: Arial Narrow;
      font-length: 20px;
      line-height:120%}
    p.four {
      font-family: Arial;
      length: 20px;
      line-height:120%}
    p.bottom {
      font-family: Arial Narrow;
      font-size: medium;
      line-height: 120%}
    ul.one {
      font-family: Arial;
      length: 20px;
      line-height: 120%}
    
    img {
     margin:10px 0 5px;}
     #ads img {
     display:block;
     padding-top:10px;}
    
    /* Header styles */
    
    #header {
     clear:both;
     float:left;
     width:100%;}
    #header {
     border-bottom:1px solid #000;}
    #header p, #header h1, #header h2 {
     padding:.4em 15px 0 15px;
     margin:0;}
    #header ul {
     clear:left;
     float:left;
     width:100%;
     list-style:none;
     margin:10px 0 0 0;
     padding:0;}
    #header ul li {
     display:inline;
     list-style:none;
     margin:0;
     padding:0;}
    #header ul li a {
     display:block;
     float:left;
     margin:0 0 0 1px;
     padding:3px 10px;
     text-align:center;
     background:#eee;
     color:#000;
     text-decoration:none;
     position:relative;
     left:15px;
     line-height:1.3em;}
    #header ul li a:hover {
     background:#369;
     color:#fff;}
     #header ul li a.active,
    #header ul li a.active:hover {
     color:#fff;
     background:#000;
     font-weight:bold;}
    #header ul li a span {
     display:block;}                
    
    /* 'widths' sub menu */
    
    #layoutdims {
     clear:both;
     background:#eee;
     border-top:4px solid #000;
     margin:0;
     padding:6px 15px !important;
     text-align:right;}
    
    /* column container */
    
    .colmask {
     position:relative;	/* This fixes the IE7 overflow hidden bug */
     clear:both;
     float:left;
     width:100%; 		/* width of whole page */
     overflow:hidden;	/* This chops off any overhanging divs */}
    
    /* common column settings */
    
    .colright, .colmid, .colleft {
     float:left;
     width:100%;		/* width of page */
     position:relative;}
    .col1, .col2, .col3 {
     float:left;
     position:relative;
     padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */
     overflow:hidden;}
    
    /* 3 Column settings */
    
    .threecol {
     background:#f4f4f4;	/* right column background colour */}
    .threecol .colmid {
     right:25%; 		/* width of the right column */
     background:#fff; 	/* center column background colour */}
    .threecol .colleft {
     right:50%;		/* width of the middle column */
     background:#f4f4f4;	/* left column background colour */}
    .threecol .col1 {
     width:46%;		/* width of center column content (column width minus padding on either side) */
     left:102%; 		/* 100% plus left padding of center column */}
    .threecol .col2 {
     width:21%; 		/* Width of left column content (column width minus padding on either side) */
     left:31%;		/* width of (right column) plus (center column left and right padding) plus (left column left padding) */}
    .threecol .col3 {
     width:21%;		/* Width of right column content (column width minus padding on either side) */
     left:85%;		/* Please make note of the brackets here: (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */}
    
    /* Footer styles */
    
    #footer {
     background: #4f4f4f;
     color: #ffffff;
     clear:both;
     float:left;
     width:100%;
     border-top:1px solid #000;
    }
    #footer p {
     padding:10px;
     margin:0;
    }
    HTML CODE (stripped of content, as I cannot put the internal company info online):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
    
    
    <head>
    
     <title>Title This</title>
     <link rel="stylesheet" type="text/css" href="redalert.css" media="screen" />
    
    <SCRIPT TYPE="text/javascript">
    <!--
    function dropdown(mySel)
    {
    var myWin, myVal;
    myVal = mySel.options[mySel.selectedIndex].value;
    if(myVal)
       {
       if(mySel.form.target)myWin = parent[mySel.form.target];
       else myWin = window;
       if (! myWin) return true;
       myWin.location = myVal;
       }
    return false;
    }
    //-->
    </SCRIPT>
    
    <script language="JavaScript1.3" type="text/javascript" src="jse_form.js">
    
    </script>
    
    </head>
    
    <body>
    
     <div id="header">
      <p class="three" style="text-align: center;">Header Image  <ul>
       <li><a href="index.html" class="active">Fashion Platform<span>Home Page</span></a></li>
       <li><a href="link1.html">Link<span>One</span></a></li>
       <li><a href="link2.html">Link<span>Two</span></a></li>
       <li><a href="link3.html">Link<span>Three</span></a></li>
       <li><a href="link4.html">Link<span> Four</span></a></li>
      </ul>
      <p id="layoutdims" style="background: #cc0000; color: #ffffff;">Lorem Ipsom</p>
     </div>
     <div class="colmask threecol">
     <div class="colmid">
     <div class="colleft">
     <div class="col1" style="height: 100%;">
    
      <!-- Mid Col Start -->
    
      <!--
    
     <a href="#"></a> | 
    
     <p class="one"><a name=""></a>
     <p class="four"><b><i>Sent </b></i>
     <p class="four">
    
     <p class="four" style="text-align: center;"><a href="documents/"></a>
    
    
      !-->
    
     <!-- THIS IS THE DIV AND IFRAME I AM HAVING ISSUES WITH !-->
    
     <div style="
       clip: rect(0,381,381,0); // right-clip equal to div width plus total border width
                                // bottom-clip equal to div height plus total border height
       position:absolute;       // used for positioning and may or may not be required
       background: #eee;        // background color of div may or may not be seen
       height: 100%;             // height of window (div) that contains the iframe content
       width: 99%;              // width of window (div) that contains the iframe content
       left: 0;                // absolute position of window (div) from the left edge of browser
       top: 0;                 // absolute position of window (div) from the top edge of browser
    ">
    
    <iframe 
       name="frame"
       src="http://nfsb/opsqb" // location of external resource 
       width="99%"              // width of iframe should match the width of containing div
       height="100%"             // height of iframe should match the height of containing div
       marginwidth="0"          // width of iframe margin
       marginheight="0"         // height of iframe margin   
       frameborder="no"         // frame border preference
       scrolling="yes"          // instructs iframe to scroll overflow content
       style="
          border-style: none;  // border style
          border-color: #444;   // border color
          border-width: 0px;    // border width
          background: #FFF;     // background color
    ">
    </iframe>
    
     </div>
     </div>
     <div class="col2">
    
      <!-- Left Column Start -->
    
      <p class="four">Navigation Goes Here
     </div>
     <div class="col3">
      <!-- Right Column Start !-->
    
     <p class="four">Right Column Content Here				
     </div> </div>
     </div>
     </div>
     <div id="footer">
      <p class="three">Developed by me.  Duh.
     </div>
    
    </body>
    
    </html>

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    327
    Thanks
    3
    Thanked 35 Times in 35 Posts
    You're putting javascript comments (starting with //) inside CSS and inside HTML tags. That is bound to cause problems. See http://www.w3schools.com/html/html_iframe.asp.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You also have some other serious coding validation errors which may or may not be causing you some issues. They should be fixed to rule out any code errors. You can run your code through the validator to see the errors.
    Teed

  • #4
    New Coder
    Join Date
    Dec 2011
    Posts
    85
    Thanks
    15
    Thanked 5 Times in 5 Posts
    Part of my problem as far as coding is that I've had to hand-code everything in notepad. The site is hosted on an internal server, so I can't run any validators, nor can I use any layout or design software. In other situations where I've designed sites, I've used Dreamweaver, Photoshop and other software to build the site, tweaked the code, and validated it. Because of the lack of tools and restrictions from IT at my job, this hasn't been an option. It's just been my brain, a keyboard and Notepad the whole way.

    As far as the Javascript comments in the code, that was definitely a mistake, but not one that was on the actual page. I added those for clarity before I posted the code here.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Well you can paste source code right in the validator, which is what I did with your code you posted, to ensure your code is correct. You dont have to have a hosted URL link to do so.
    Teed

  • #6
    New Coder
    Join Date
    Dec 2011
    Posts
    85
    Thanks
    15
    Thanked 5 Times in 5 Posts
    Sorry, I missed the tab for "Direct Input". I'll give that a whirl. Thanks for the help-- I know it's a bit frustrating trying to help someone with limited experience and tools, but I appreciate the community here. I haven't stumbled upon it before, but now that I'm a member I plan on checking in and helping out where at all possible (though there are quie a few many more qualified people here.)

  • #7
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by dougcollins02 View Post
    Sorry, I missed the tab for "Direct Input". I'll give that a whirl. Thanks for the help-- I know it's a bit frustrating trying to help someone with limited experience and tools, but I appreciate the community here. I haven't stumbled upon it before, but now that I'm a member I plan on checking in and helping out where at all possible (though there are quie a few many more qualified people here.)
    Thats what everyone is here for. To help AND learn.

    Some of your coding errors are mismatched opening and closing tags. Meaning if you neglect to close a <div> tag, this could possibly break your layout.
    Teed

  • #8
    New Coder
    Join Date
    Dec 2011
    Posts
    85
    Thanks
    15
    Thanked 5 Times in 5 Posts
    A question, too, to make sure I understand some theory behind relative sizing of iframes. Please excuse any faux pas in terminology...

    I know that for an iframe to be sized relatively (ie 100% compared to 620px) the iframe's parent div, that parent div must also have a specified size. If that div is also relatively sized to 100%, could that cause issues with the iframe sizing?

  • #9
    New Coder
    Join Date
    Dec 2011
    Posts
    85
    Thanks
    15
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by teedoff View Post
    Thats what everyone is here for. To help AND learn.

    Some of your coding errors are mismatched opening and closing tags. Meaning if you neglect to close a <div> tag, this could possibly break your layout.

    Thank you, I appreciate the words of welcome.

    I'll double-check my DIV tags to make sure I had closed them all.


  •  

    Tags for this Thread

    Posting Permissions

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