Welcome to WebmasterWorld Guest from 3.233.226.151

Forum Moderators: open

Message Too Old, No Replies

Trouble with Iframes height in Firefox/Safari

Need easy fix to small layout problem

     
10:04 am on Aug 13, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 13, 2005
posts:2
votes: 0


Hi,

I've made a small webpage using iframes in a table, and it works nicely in IE, but FF makes my 100% iframe into a small slit... while another in the same document works fine... Any suggestions from somebody with more knowledge and experience?

Here's the code btw:

<HTML>
<HEAD>
<TITLE>blablabla</TITLE>
<META NAME="Author" CONTENT="blablabla">
<META NAME="Keywords" CONTENT="blablabla">
<META NAME="Description" CONTENT="blablabla..">
<LINK REL=stylesheet HREF="stylesheet.css" type=text/css>

<STYLE type="text/css/javascript">
<!--
A{color:#000000;text-decoration:none;
behavior:url(pixel.htc);
filter:progid:dximagetransform.microsoft.pixelate(duration=.4,maxSquare=22, enabled=false);
height:0px}
A:link{color:#000000;text-decoration:none;}
A:visited{color:#000000;text-decoration:none;}
A:hover{color:blue;text-decoration:none;}
-->
</STYLE>

</HEAD>

<BODY TEXT="#000000" BACKGROUND="gifs/bgs/bluedot.jpg" LINK="#FFFFFF" VLINK="#FFFFFF" ALINK="#FFFFFF" topmargin="10" leftmargin="10" bottommargin="10" rightmargin="10">

<STYLE type="text/css">
body {scrollbar-face-color:#E4E4E4;
scrollbar-arrow-color:black;
scrollbar-track-color:white;
scrollbar-shadow-color:black;
scrollbar-darkshadow-color:white;
scrollbar-3dlight-color:white;
scrollbar-highlight-color:black;}
</STYLE>

<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0" ALIGN="center" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD WIDTH="23%" HEIGHT="100%" VALIGN="top">
<BR>
<DIV ALIGN="left">
<IFRAME HEIGHT="100%" WIDTH="100%" SCROLL="no" SRC="menu.html" NAME="menu" FRAMEBORDER="0">
</IFRAME>
</DIV>

</TD>
<TD VALIGN="top">
<DIV ALIGN="center">

<IFRAME HEIGHT="15%" WIDTH="100%" SCROLL="no" SRC="fronttop.html" NAME="header" FRAMEBORDER="0">
</IFRAME>

<P ALIGN="left">
<IFRAME HEIGHT="81%" WIDTH="100%" SCROLL="auto" SRC="front.html" NAME="main" FRAMEBORDER="0">
</IFRAME>
</P>

</DIV>
</TD>
</TR>
</TABLE>

</BODY>
<HTML>

In IE everything works fine, and the layout is as intended.
In FF the header is shown fine, or not at all, and the menu and front are both compressed to an inch high.
In Safari, nothing at all is displayed...

Tryed to search the web for a solution, but the best I could find was others posts here...
So the answer (you) must be out there (here)... ;)

M

[edited by: encyclo at 10:17 am (utc) on Aug. 13, 2005]
[edit reason] fixed sideways scroll [/edit]

12:35 pm on Aug 15, 2005 (gmt 0)

Senior Member from CA 

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 31, 2003
posts:9074
votes: 6


Welcome to the forums co_cb90, and sorry your first post went so long without a reply.

I think that it is the

div
within the "menu" iframe that was causing problems. I have simplified the markup down to the bare minimum and it appears to work in Firefox as well as IE6. It looks like this:

<HTML>
<HEAD>
<TITLE>blablabla</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0" ALIGN="center" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD WIDTH="23%" HEIGHT="100%" VALIGN="top" ALIGN="left"><IFRAME HEIGHT="100%" WIDTH="100%" SCROLL="no" SRC="menu.html" NAME="menu" FRAMEBORDER="0">
</IFRAME></TD>
<TD VALIGN="top" ALIGN="center">
<IFRAME HEIGHT="15%" WIDTH="100%" SCROLL="no" SRC="fronttop.html" NAME="header" FRAMEBORDER="0">
</IFRAME>
<IFRAME HEIGHT="81%" WIDTH="100%" SCROLL="auto" SRC="front.html" NAME="main" FRAMEBORDER="0">
</IFRAME>
</TD>
</TR>
</TABLE>
</BODY>
<HTML>

Does that fix the problem for you, or have I misunderstood the issue?

2:18 pm on Aug 15, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 13, 2005
posts:2
votes: 0


Thanks a bunch!
As far as I can see, this simple solution fixed everything.
I love it when things are solved this easily!

Now I'm going to go and make fun of the University's Helpdesk, for giving me such a long,
inconcrete and totally rubbish solution to my inquiry.

You rock!

M

[edited by: encyclo at 2:51 pm (utc) on Aug. 15, 2005]
[edit reason] No signatures please [/edit]

7:59 pm on Sept 6, 2005 (gmt 0)

New User

10+ Year Member

joined:Feb 23, 2004
posts:3
votes: 0


After much scouring of the Internet, I seem to have solved a similar problem for a page I was working on by setting the html, body, and (in my case) form tags to have a height of 100% in my style sheet, well, and the iframe itself.

This is my stylesheet, and it's the first line that's critical for getting my iframe to fill up the space:

html,body,form
{
height: 100%;
}

body
{
padding: 5px;
margin: 0;
}

body.inIframe
{
padding: 0;
}

iframe
{
height: 100%;
float: left;
padding: 0;
margin: 0;
border: 0;
width: 200px;
overflow: hidden;
}

div
{
height: 100%;
float: left;
}

Not pared to the bone, but you get the idea.

This is the html I used:

<html>
<head>
<title>Select Participant</title>
<link type="text/css" rel="stylesheet" href="myStyle.css"/>
</head>
<body>
<form>
<iframe src="participant.html">
</iframe>
<div>
<table>
<tr>
<th>Blah blah blah...</th>
</tr>
.
.
.
.

Hope this helps someone.