Forum Moderators: open
1st row: banner
2nd row: nav bar
3rd row: iframe
4th row: options
5th row: footer
This general table has a 100% height.
Structure is as simple as that. 1st, 2nd and 5th rows are fixed in height.
And here comes my problem: I need 3rd row to have the same height as the
iframe and the 4th row should have a variable height according to the 3rd
one.
I'm working on this code and it's almost done but content at 4th row doesn't
work. It's like it has a minor heigth that it should have.
I'm giving away this code. Could anyone help me?
Here's the main code:
MAIN CODE
<html>
<head>
<title>testing...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-color: #333333;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
-->
</style>
</head>
<body>
<table width="775" align="center" height="100%" cellspacing="0"
cellpadding="0" bgcolor="#FFFFFF">
<!-- 1st. row: Banner -->
<tr>
<td width="775" height="66"><img src="images/dm_banner.jpg" width="775"
height="66"></td>
</tr>
<!-- 2nd row: Nav Bar -->
<tr>
<td width="775" height="14">
<table width="775" cellpadding="0" cellspacing="0" bgcolor="#FFF5E5">
<tr>
<td>
OPTION 1 - OPTION 2 - OPTION 3 - OPTION 4
</td>
</tr>
</table></td>
</tr>
<!-- 3rd row: Data from iframe -->
<tr height="100%">
<td width="775">
<iframe src="iframe.htm" WIDTH=775 height="100%" scrolling=No
frameborder="0"></iframe>
</td>
</tr>
<!-- 4th row: options menu -->
<tr width="775" height="100%">
<td>
1. Option 1<br>
2. Option 2<br>
3. Option 3<br>
</td>
</tr>
<!-- 5th row: Footer -->
<tr>
<td width="775" height="39" align="center"><img src="footer.jpg"
width="279" height="39"></td>
</tr>
</table>
</body>
</html>
Here's the iframe page code
IFRAME.HTM
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<table width="775" height="300" align="center" cellpadding="0"
cellspacing="0" bgcolor="EEEEEE">
<tr valign="top">
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>Text 1</td>
</tr>
<tr>
<td>Text 2</td>
</tr>
<tr>
<td>Text 3</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Thanks in advance,
Marcelo.
THINKING AS I TYPE---
The only "sure" way I know of to would be to use javascript to calculate what the cell height measurements should be, after measuring the client's available height.
A regular frameset layout (not inline iframes) would also resolve this issue simply, but as you probably know, framesets can generate other issues.
If you really need this layout as you've stated, and re-design isn't a viable possibility, then I would suggest going to a standard frameset of 5 rows. A frameset WILL behave for you when you plug in those "*" instead of using a table and height=100%.
However, if it was my project, I'd rethink the layout and avoid the need to control the table cell height so precisely.
