Forum Moderators: skibum
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]
I think that it is the
div<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?
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]
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.
