100% height virker ikke i html 4.01
HejHar lavet en hjemmeside der nu er blevet færdig, men fandt ud af at jeg havde glemt at indsætte doctype html 4.01 og nu er det forkert.
Jeg har prøvet på at få bunden helt ned med uden held, og er nu kørt træt i det. Det kunne være rart med nogen friske øjne til at hjælpe mig med dette.
Koden:
----------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test side</title>
<style type="text/css">
html,body,{
margin: 0;
padding: 0;
background: url("gfx/bg_pixel.gif");
font-family: Tahoma;
color: 444;
}
a img {
border: 0;
}
.height {
height: 100%;
}
#header01 {
background: url("gfx/top01.gif") repeat-x;
height: 20px;
}
#header02 {
background: url("gfx/top02.gif") repeat-x;
height: 10px;
}
#header03 {
background: url("gfx/top03.gif") repeat-x;
height: 89px;
}
div#header03_01 {
position: relative;
background: url("gfx/top_banner01.png") no-repeat;
height: 89px;
width: 800px;
left:50%;
margin-left:-400px;
}
div#header03_02 {
position: absolute;
display: block;
right: 0px;
bottom: -3px;
}
#header04 {
background: url("gfx/top04.gif") repeat-x;
height: 10px;
}
#content01 {
background: url("gfx/bg_top.gif") repeat-x;
width:100%;
height: 100%;
}
#content02 {
background:#c5c9cb url('gfx/bg_top02.gif') repeat-x;
position: relative;
width: 820px;
height: 100%;
padding: 10px 5px 0px 5px;
border-left: 5px solid #b4b4b4;
border-right: 5px solid #b4b4b4;
}
#content02{
text-align: justify;
}
#footer {
background: url("gfx/bottombar_01.gif") repeat-x;
height: 150px;
}
#footer_text {
position: absolute;
padding: 50px 0px 50px 0px;
width: 800px;
left: 50%;
margin-left: -400px;
font-size: 11px;
font-weight: bold;
color: white;
}
.left {
float: left;
}
.right {
float: right;
}
.window_left {
width: 495px;
border: 3px solid white;
}
.window_right {
width: 280px;
border: 3px solid white;
}
.window_left_top, .window_right_top {
background: url("gfx/windowbar_top01.gif") repeat-x;;
height: 27px;
}
.window_left_top, .window_right_top {
padding: 0px 0px 0px 5px;
text-align: left;
line-height: 2em;
font-size: 12px;
font-weight: bold;
color: white;
}
.window_left_bottom, .window_right_bottom {
font-size: 13px;
}
.window_left_bottom {
padding: 3px 5px 3px 5px;
text-align: left;
}
.space {
width: 100%;
height: 5px;
}
.hr_bottombar {
height: 0;
border: 0;
border-top: 1px solid #0099cc;
width: 200px;
}
a:link, a:active, a:visited {
color: white;
text-decoration: none;
}
a:hover {
color: white;
text-decoration: underline;
}
</style>
</head>
<body>
<table class="height" border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td id="header01"></td>
</tr>
<tr>
<td id="header02"></td>
</tr>
<tr>
<td id="header03">
<div id="header03_01">
<div id="header03_02">
<a href="?p=tilbud"><img src="gfx/knap/tilbud.gif" alt="" /></a>
<a href="?p=priser"><img src="gfx/knap/priser.gif" alt="" /></a>
</div>
</div>
</td>
</tr>
<tr>
<td id="header04"></td>
</tr>
<tr>
<td class="height" valign="top" align="center">
<div id="content01">
<div id="content02">
<div id="right">
<div class="window_right">
<div class="window_right_top">Udvalgte tilbud</div>
<div class="window_right_bottom">
- Vare 099<br />
- Vare 001<br />
- Vare 187<br />
- Vare 042
</div></div>
</div>
<div class="left">
<div class="window_left">
<div class="window_left_top"><span style="color: #00435f;">30. dec. 2009 07:23</span> "Vi har nu åbnet"</div>
<div class="window_left_bottom">
Det er med stor glæde at vi nu har fået vores hjemmeside op at køre, og vi ser nu frem til de mange spændende udfordringer der måtte komme, samt at lære vores lokale kundekreds bedre at kende.
</div></div>
<br />
</div>
<div class="left">
<div class="window_left">
<div class="window_left_top"><span style="color: #00435f;">30. dec. 2009 07:23</span> "Vi har nu åbnet"</div>
<div class="window_left_bottom">
Det er med stor glæde at vi nu har fået vores hjemmeside op at køre, og vi ser nu frem til de mange spændende udfordringer der måtte komme, samt at lære vores lokale kundekreds bedre at kende.
</div></div>
<br />
</div>
</div>
</div>
</td>
</tr>
<tr>
<td id="footer" align="right">
<div id="footer_text">
<a href="?p=kontakt">Kontakt</a><hr class="hr_bottombar">
<a href="?p=bagom">Om os</a>
</div>
</td>
</tr>
</table>
</body>
</html>
