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>
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.
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.
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.
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.
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.)
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.
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?
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.
Before you post, read our: 
