hi,
i have done a lot of reading about 100% height..
my problem is that i use 3 rows..
now i have got it working with 3 rows and a layer into the middle row..
but it only works in IE..
if you open this link into your IE browser you will see it working:
EDIT (Moderator): Link Removed
my script is:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<script language="javascript">
var lowY = 21; //bottom cell height
var hiY = screen.availHeight - lowY; //top cell height
</script>
<style>
html,body
{
margin:0;
padding:0;
height:100%;
border:none
}
.table {
margin:0;
padding:0;
height:100%;
border:none
}
.style1 {
font-size: x-small;
font-weight: bold;
}
.style2 {color: #F1944A}
.style3 {font-size: x-small; font-weight: bold; font-family: Verdana, Arial, Helvetica, sans-serif; }
#Layer1 {
position:absolute;
width:100%;
z-index:1;
left: 358px;
height: 100%;
top: 70px;
overflow: auto;
}
</style>
<title>manPIXy</title></head>
<body>
<table width=100% height=100% border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr bgcolor="#000000">
<td width="28%" height="70" valign="top" background="images/index_02.gif" bgcolor="#FFFFFF"><img src="images/index_01.gif" width="263" height="70" alt="logo" /></td>
<td width="100%" height="70" valign="top" background="images/index_02.gif" bgcolor="#FFFFFF"> </td>
</tr>
<tr bgcolor="#000000">
<td valign="top" background="images/index_17.gif" bgcolor="#FFFFFF" id="table"><img src="images/index_17.gif" width="358" height="5"></td>
<td width="100%" valign="top" bgcolor="#000000" id="table"><div id="Layer1">
<p> </p>
<table width="98%" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000">
<tr>
<td width="0" rowspan="2"><img src="images/index_06.gif" width="24" height="29" alt="page"></td>
<td width="100%" height="6" background="images/index_07.gif"></td>
<td width="0" rowspan="2"><img src="images/index_08.gif" width="14" height="29" alt="fd"></td>
</tr>
<tr>
<td width="100%" valign="middle" background="images/index_09.gif"><span class="style1">Header!!</span></td>
</tr>
<tr>
<td width="0" background="images/index_10.gif"><img src="images/index_10.gif" width="24" height="80" alt="j"></td>
<td width="100%" valign="top" bgcolor="#FFFFFF"> </td>
<td width="0" bordercolor="#000000" background="images/index_12.gif" bgcolor="#000000"><img src="images/index_12.gif" width="14" height="80" alt="dss"></td>
</tr>
<tr>
<td width="0" height="10"><img src="images/index_13.gif" alt="td" width="24" height="10"></td>
<td width="100%" background="images/index_14.gif"><img src="images/index_14.gif" alt="ccc" width="389" height="10"></td>
<td width="0"><img src="images/index_15.gif" width="14" height="10" alt="fgg"></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p><p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</td>
</tr>
<tr bgcolor="#000000">
<td height="21" colspan="2" align="right" valign="middle" background="images/index_18.gif" bgcolor="#FFFFFF"><div align="center" class="style3">man<span class="style2">PIX</span>y ® copyright 2006 </div></td>
</tr>
</tbody>
</table>
</body>
</html>
The problem in fire fox is that the layer scales a additional 100% height and 100% width..
how can i make it so that the layer doesn't scale double?
regards,
Fatum
Stumble It!
Tweet This
Bookmark on Delicious
Share on Facebook
Share on MySpace