Extra bottom space on iframe layout problem [Archive]

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...
12247

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

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

html:

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

<body>
<body bgcolor="#D3EFF8">

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

<table border="0" width="100%" height="100%">

<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>


<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>

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

css:

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

<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

<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 :D

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
<img src="images/pika_ninja.png" border="1px #72cbf8">
What are the dimensions?
The table is parsed next, it is at least 500 high
<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:
<html>
<head>
<title>The Roadkill Zone</title>
<link rel="stylesheet" href="theme_style.css" type="text/css" media="screen" />
</head>
<body>
<body bgcolor="#D3EFF8">

<center>
<img src="images/pika_ninja.png" border="1px #72cbf8">
</center>
<table border="0" width="100%" height="100%">

<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>

<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

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
<img src="images/pika_ninja.png" border="1px #72cbf8">
What are the dimensions?
The table is parsed next, it is at least 500 high
<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.
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.