Hvis du sætter style="background:red;" ind på de første to tabeller kan du se at de reserverer en højde, når du så har de to tabeller med en højde og skal definere højden på det nederste element til den resterende plads vil du ikke skulle bruge 100% da - 100% af 100% gør at den fylder hele vinduets højde.
... Der er et par måder at komme rundt om det på ...
1: Du kan sætte de 3 indre tabeller til position:absolute; med et højt z-index og den nederste tabel med et lavt z-index og så top samt left placering. Inden i den sidste tabel lægger du så et element der reserverer start plads til de to andre elementer - det fordrer dog at du ved hvor høje de to første elementer er ...
Eksempel:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<style type="text/css">
html, body, #wrapper
{
height:100%;
padding: 0px 0px 0px 0px;
border: none;
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #eff3ff;
font: normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #e06900;
}
#top {
height:57px;
}
#bottom {
height:69px;
}
#main {
height:100%;
}
#wrapper {margin:0px auto;position:relative;}
</style>
</head>
<body>
<table width="980" border="0" cellpadding="0" cellspacing="0" id="wrapper">
<tr>
<td valign="top" style="height:100%;">
<table width="980" border="0" cellpadding="0" cellspacing="0" style="background:red;height:200px;position:absolute;top:0px;left:0px;z-index:2;">
<tr>
<td id="top" background="gfx/top.jpg">Højde sat til 200px da jeg ikke kender højden</td>
</tr>
</table>
<table width="980" border="0" cellpadding="0" cellspacing="0" style="background:blue;height:100px;position:absolute;top:200px;left:0px;z-index:2;">
<tr>
<td id="menuen" background="gfx/fillmenu.jpg" align="center" valign="top">Højde sat til 100px da jeg ikke kender højden - script fjernet midlertidig da jeg ikke kender effekten fra menuen</td>
</tr>
</table>
<table width="980" border="0" cellpadding="0" cellspacing="0" style="height:100%;position:absolute;top:0px;left:0px;z-index:1;">
<tr>
<td align="center" background="gfx/fill2.jpg" id="main" valign="top">
<div style="height:300px;width:100%;">bagved liggende element - måske skal baggrund rykkes rundt</div>
<br /><br />
<table width="950" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="70"><strong>Hej</strong></td>
<td width="150"><strong>Dav</strong></td>
<td width="150"><strong>Hmm</strong></td>
<td align="left"><strong>Subject</strong></td>
<td width="100" align="right"><strong>Action</strong></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Alternativt kan man nok lave det mere i tabeller med en
tabel opbygning hvor det lyder som noget i stil med:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>
<style type="text/css">
html, body, #wrapper
{
height:100%;
padding: 0px 0px 0px 0px;
border: none;
text-align: center;
margin: 0px 0px 0px 0px;
background-color: #eff3ff;
font: normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #e06900;
}
#top {
height:57px;
}
#bottom {
height:69px;
}
#main {
height:100%;
}
#wrapper {margin:0px auto;position:relative;}
</style>
</head>
<body>
<table width="980" border="0" cellpadding="0" cellspacing="0" id="wrapper">
<tr style="background:red;height:200px;">
<td valign="top">
<table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="top" background="gfx/top.jpg">.</td>
</tr>
</table>
</td>
</tr><tr style="background:blue;height:100px;">
<td valign="top">
<table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="menuen" background="gfx/fillmenu.jpg" align="center" valign="top"><script type="text/javascript" src="menu.js"></script></td>
</tr>
</table>
</td>
</tr><tr background="gfx/fill2.jpg"><td valign="top">
<table width="980" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" id="main" valign="top"><br><br>
<table width="950" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="70"><strong>Hej</strong></td>
<td width="150"><strong>Dav</strong></td>
<td width="150"><strong>Hmm</strong></td>
<td align="left"><strong>Subject</strong></td>
<td width="100" align="right"><strong>Action</strong></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
... Men læg mærke til hvordan IE vs. FF reagerer.
Fjern så doctypen så IE tvinges i quirksmode så den
ikke overholder css ordentligt. Læg mærke til forandringen.
- Jeg anbefaler ikke denne løsning, men ville vise den. En
IE i quirks mode kan give grå hår. M.h.t. at teksten pludselig
bliver størrer ved fjernelse af doctypen kan du prøve at tilføje:
td { font: normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif; }
