Extra bottom space on iframe layout problem

**xLilDragonx** · 02-12-2009 11:47 PM

hey ppls i just started to make an iframe layout for my site with tables.

at first it looks ok...
iframe1.gif

but then wats this empty space of nothingness doing under the stuff on top??????

iframe2.gif

----------------------------------------------

html:

Code:

<html>
<head>
<title>The Roadkill Zone</title>
<link rel="stylesheet" href="theme_style.css" type="text/css" media="screen" />

<body>
<body bgcolor="#D3EFF8">
<!-- Your layout Image -->
<center>
<img src="images/pika_ninja.png" border="1px #72cbf8">
</center>

<table border="0" width="100%" height="100%">
<!-- The content frame -->
<tr>
<td width="714" height="500" valign="center">
<iframe frameborder="0" border="0" width="225" height="335" src="content.html" name="content" style="position:absolute; 

top:120; left:180" scrolling="auto" allowtransparency="true">
</iframe>
</td>

<!--Navigation Frame-->
 <td width="92" height="348" valign="center">
<iframe frameborder="0" width="92" height="340" src="navigation.html" name="navigation" style="position:absolute;
top:120; left:430" scrolling="auto" allowtransparency="true">
</iframe>
    </td>
</tr>
</table>

<!--end of iframes-->

</body></html>

----------------------------------------

css:

Code:

body 
	{
	scrollbar-base-color:#D3EFF8; 
	scrollbar-face-color:#98CCE0;
	scrollbar-track-color:#D3EFF8;
	scrollbar-arrow-color:#FFFFFF;
	scrollbar-darkshadow-color:#54A2C0;
	scrollbar-highlight-color:#FFFFFF;
	scrollbar-shadow-color:#D3EFF8; 
	scrollbar-3dlight-color:#54A2C0;
	overflow-x: hidden; 
	color: #2D88A5;
	font: 11px verdana;
	background-attachment: fixed;
	background-position: center center;
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	cursor: crosshair;
	}
 
a 
	{
	text-decoration: none;
	color: #186E89;
	font-weight: bold;
	font-size: 11px;
	cursor: crosshair;
	}

a:hover
	{
	text-decoration: none;
	color: white;
	cursor: crosshair;
	}

**Fang** · 02-13-2009 02:56 AM

[code]<table border="0" width="100%" height="100%">

Position the iframes with margins, not absolute.

Units must be used for all values except zero:

Code:

top:120px; left:180px

**xLilDragonx** · 02-13-2009 07:57 PM

Originally Posted by Fang

[code]<table border="0" width="100%" height="100%">

Position the iframes with margins, not absolute.

Units must be used for all values except zero:

Code:

top:120px; left:180px

it still didnt work. the bottom space hadnt disappeared yet

any more suggestions will do. also, can you help me with the margins part? margins and padding has always been my only weak point in html

thanks anyways

**Eye for Video** · 02-13-2009 08:47 PM

Without actually seeing page and images, I'd say it's kind of hard to tell you what the problems are, but here's my observations.
This image sits above the table

Code:

<img src="images/pika_ninja.png" border="1px #72cbf8">

What are the dimensions?
The table is parsed next, it is at least 500 high

Code:

<td width="714" height="500" valign="center">

So it would seem that the combined height of the body would now be image + table.
Since the iframes are absolute positioned, they still display at 120 from the top, but in natural flow would be placed in table under the image, much farther down the page.
A quick test with your code and a 200 X 200 image displays a large blank space under the iFrames, just like you have.
My suggestions, don't use the table, do all positioning with CSS, including image.
But that's just my opinion.
EfV

**Coyotelab** · 02-13-2009 10:16 PM

You need to close your head tag before start body tag:

Code:

<html>
<head>
<title>The Roadkill Zone</title>
<link rel="stylesheet" href="theme_style.css" type="text/css" media="screen" />
</head>
<body>
<body bgcolor="#D3EFF8">
<!-- Your layout Image -->
<center>
  <img src="images/pika_ninja.png" border="1px #72cbf8">
</center>
<table border="0" width="100%" height="100%">
  <!-- The content frame -->
  <tr>
    <td width="714" height="500" valign="center">
    <iframe frameborder="0" border="0" width="225" height="335" src="content.html" name="content" style="position:absolute; 
	top:120; left:180" scrolling="auto" allowtransparency="true"> 
	</iframe></td>
    <!--Navigation Frame-->
    <td width="92" height="348" valign="center"><iframe frameborder="0" width="92" height="340" src="navigation.html" name="navigation" 	style="position:absolute; top:120; left:430" scrolling="auto" allowtransparency="true"> 
    </iframe></td>
  </tr>
</table>
</body>
</html>

**xLilDragonx** · 02-14-2009 01:13 AM

Originally Posted by Eye for Video

Without actually seeing page and images, I'd say it's kind of hard to tell you what the problems are, but here's my observations.
This image sits above the table

Code:

<img src="images/pika_ninja.png" border="1px #72cbf8">

What are the dimensions?
The table is parsed next, it is at least 500 high

Code:

<td width="714" height="500" valign="center">

So it would seem that the combined height of the body would now be image + table.
Since the iframes are absolute positioned, they still display at 120 from the top, but in natural flow would be placed in table under the image, much farther down the page.
A quick test with your code and a 200 X 200 image displays a large blank space under the iFrames, just like you have.
My suggestions, don't use the table, do all positioning with CSS, including image.
But that's just my opinion.
EfV

can u show me how the css would be done?

o and the dimesnions of the img is 714 x 500 (width x height)

**Eye for Video** · 02-14-2009 10:24 AM

Here is a quick sample of what your CSS might look like and may not be the complete style, just for basic positioning. The margins are not exact but simplly to give you the idea.

Code:

body {
	border: 0px;
	margin: 0px;
	padding: 0px;	
}
#main_container {
	width: 714px;
	height: 500px;	
	background-image:url(images/pika_ninja.png);
	border:none;
	padding: 0px;
	margin-left: auto;
	margin-right: auto;
}
#iframe1 {
	width:200px;
	height:300px;
	border:none;
	margin-left:40px;
	margin-top: 100px;
	float:left;
	background-color: #005500;
}
#iframe2 {
styles go here
}

Second iframe will be similar to first but diff margins. Give iframe a background color and no content while you work out the positioning, then remove background color and add content (only after all positioning is done). Stick both iframe divs inside main container.
If contents don't fit and you want scroll bar, put overflow:auto in iframe style.
Best wishes,
EfV

**xLilDragonx** · 02-15-2009 01:40 PM

thanks so much. that will help me solve lots of problems.

Thread: Extra bottom space on iframe layout problem

Thread Tools

Display

Extra bottom space on iframe layout problem

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions