www.webdeveloper.com
Results 1 to 8 of 8

Thread: Extra bottom space on iframe layout problem

  1. #1
    Join Date
    Feb 2009
    Posts
    4

    Exclamation Extra bottom space on iframe layout problem

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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    [code]<table border="0" width="100&#37;" height="100%">

    Position the iframes with margins, not absolute.

    Units must be used for all values except zero:
    Code:
    top:120px; left:180px
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Feb 2009
    Posts
    4

    Unhappy

    Quote Originally Posted by Fang View Post
    [code]<table border="0" width="100&#37;" 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
    Last edited by xLilDragonx; 02-13-2009 at 08:03 PM.

  4. #4
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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

  5. #5
    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>

  6. #6
    Join Date
    Feb 2009
    Posts
    4
    Quote Originally Posted by Eye for Video View Post
    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)

  7. #7
    Join Date
    Feb 2008
    Location
    NW Washington State
    Posts
    1,856
    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
    Attached Images Attached Images

  8. #8
    Join Date
    Feb 2009
    Posts
    4
    thanks so much. that will help me solve lots of problems.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles