XHTMLforum - vertical stretching

Ich weiß es is viel blah blah dabei und sachen die net gebraucth werden, aber so is es im FF lauffähig und so soll die erste Version ausschauen. Nur mal zum vorführen, ABER im IE läuft's net auch net im internen Webbrowser von der Entwicklungsumgebung!!

css:

body {
color: #003060; /*black; */
height:100%;
/*background-color: white;*/
background-color:#003060;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding:0;

}

*{
margin: 0px;
padding: 0px;
font-size: inherit;
}

html{
height:100%;
margin:0;
padding:0;
}

a{
color: #003060;
/*color: black;*/
font-family:Helvetica,Arial,sans-serif;
text-decoration:none;
}

p{
margin-top:20px;
}

#header {
background-color:#CCFFCC; /*HELLGRÜN*/
height:50px;
width:100%;
/*margin-top:1em;*/
/*text-align:center;*/
text-indent:2em;
vertical-align:middle;
padding-top:20px;
color: #003060;

}

#menu {
position:relative;
/*top:271px;*/
top:15px;
left:50px;
text-indent:1em;
vertical-align:middle;
/*word-spacing:20px;*/
color: #003060;

}

html * submenu{
height:100%;
}
#submenu {
/*position:relative;
top:100px;
left:0px;*/

/*margin-top:10px;
margin-left:2px;*/

float:left;
width:200px;
background-color:#003060;
/*bottom: 30px;*/
padding-left:20px;
horizont-align:left;
padding-top:15px;
min-height:100%;
/*height:700px;*/
padding-bottom:30px;
margin-right:20px;
margin-bottom:0; /* auto;*/
height:100%;

}

#clearfloats{
clear:both;
}
#content {

width:100%;
padding:15px;
min-height:100%;
padding-bottom:30px;
margin-left: 220px;/*10px;*/
background-color:white;
/*padding-left:200px;*/

}

#footer{
/*top: 970px;*/
width:100%;
background-color:#CCFFCC; /*HELLGRÜN*/
height:30px;
float:left;
/* width: 100%;
background: #CCFFCC;
position: absolute;
bottom: 0 !important;
bottom: 0px; /* For Certain IE widths */
/* height: 40px;

padding: 0 1em;
line-height: 30px;*/
bottom-margin:10px;
}

#bereich {
/*position:absolute;*/
padding:20px;
width:50%;
float:left;
/*height:200px;*/
/*width:200px;*/
}

#bereich2{
margin-left:50%;
/*padding:20px; */
top:0px;
right:0px;
padding:2em;
width:50%;
float:right;
/*height:200px;*/

}

#logobereich{

left:0px;
top:0px;
padding:0;
/*width:500px;*/
width:100%;
background-color:white;

}

#titelbereich{
position:relative;
left:500px;
top:0px;
/*left:501px;
/*margin-right: 5em;*/
padding:0;
/*min-width:16em;*/
width:100px;
margin:0px;
background-color:white;

}

div#InhaltTitle h1 {

/*margin: 0 0 1em;*/

font-size: 2em;
font-style: oblique;
font-variant: small-caps;
font-weight:bold;
text-shadow:black 3px 2px;
font-family:"Century Schoolbook";

text-align:middle;
}
/*div.clear{

clear:both;
height:0;
font-size:0;
line-height:0;

}*/

div#Inhalt h1 {
font-size: 1.5em;
/*margin: 0 0 1em;*/
float: right;
}

div#InhaltF h2{
font-size: 0.5em;
margin:0em;
float:left;
/*margin-top:20px;*/

}

div#InhaltC h1 {

/*margin: 0 0 1em;*/

font-size: 2em;
font-style: oblique;
font-variant: small-caps;
font-weight:bold;
text-shadow:black 3px 2px;
font-family:"Century Schoolbook";

text-align:middle;
}

div#InhaltC2 h2 {

/*margin: 0 0 1em;*/

/*margin-top: 40px;*/
margin-top:4pc;
font-size: 1.5em;
font-style: normal;

font-family:"Century Schoolbook";

text-align:middle;
}

ul#Navigation li {
display:inline;
/*margin:20px;*/
}

ul#Navigation {
margin:0px;
/*border: 1px solid black;*/
color: #003060; /*color:black;*/
font-style:italic;
display: inline;
}

ul#Navigation a {
padding: 0.2em;
text-decoration: none; font-weight: bold;
display: inline;

}

ul#Navigation a:hover {
color:#404040; /*silver;*/
}

/* ul#Navigation a:vistited{

}

u1#Navigation a:active{

}
*/

ul.NavigationSub{
/*list-style: square;*/
list-style-image: url(../img/aufz.jpg);
margin:5px;
}

ul.NavigationSub {
width: 10em;
margin: 0; padding: 0.6em;
/*border: 1px solid black;*/
background-color:#003060;/*sandoz-blau;*/
color:#CCFFCC; /*white;/*dots list*/
font-style:italic;
/*display: list-item;*/
}

ul.NavigationSub li {
padding-left:0.1em;
}

ul.NavigationSub a {
padding: 0.2em;
text-decoration: none; font-weight: bold;
/*border: 1px solid black;
border-left-color: white; border-top-color: white;
color: maroon; background-color: #ccc;*/
background-color:#003060;
display: list-item;
color:#CCFFCC; /*white;*/

}

ul.NavigationSub a:hover {
/*border-color: white;
border-left-color: black; border-top-color: black;
color: white; background-color: gray;*/
background-color:#003060;
color:silver;
}

/*ul.NavigationSub a:visited{

background-color:#003060;
color:red;

}*/

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="../css/common2.css"/>
<title><ui:insert name="title">TITLE</ui:insert></title>
</head>
<body >


<div id="logobereich">
<table style="margin-left:0px; margin-top:0px; border-style:none;">
<td>
<img src="../img/testpic4.jpg" alt="x"/>
</td>
<td style="width:100%; padding-right:40px;">
<h1 style="text-align:right; font-size:3em; font-family:'Century-Schoolbook';font-style:oblique;font-weight:bold;">TITLE</h1>
</td>
</table>

</div>

<div id="header">
<ul id="Navigation" style="margin-top:50%;cursor:pointer"> 
<li><a>Vertrag anlegen</a></li>
<li><a>Mitarbeiter anlegen</a></li>
</ul>
</div>

<div id="submenu">
<ui:insert name="submenu" style="color:#CCFFCC">#submenu</ui:insert>

<ul class="NavigationSub" style="cursor:pointer">
<li><a>Administration</a></li>
<li><a>Antrag stellen</a></li>
<li><a>Pandemie</a></li>
<li><a>Dashboard</a>
<ul class="NavigationSub" style="cursor:pointer">
<li><a>Aufgaben</a></li>
<li><a>Anträge</a></li>
</ul>
</li>

</ul>

<div id="clearfloats"></div>

</div>
<div id="content">
<ui:insert name="content">#content</ui:insert>

<table>
<tr>
<td>
<h1 style="margin: 5px">Testfall 1 - geben sie was ein, checkboxen, usw.</h1>
<form action="input_text.htm" style="margin:5px">
<p>Vorname:<br/><input name="vorname" type="text" size="30" maxlength="30" value="fixed ;)" readonly/></p>
<p>Zuname:<br/><input name="zuname" type="text" size="30" maxlength="40"/></p>
</form>

<form action="textarea.htm" style="margin:5px">
<p>Geben Sie einen mehrzeiligen Text ein:<br/>
<textarea name="user_eingabe" cols="50" rows="10"></textarea>
</p>
</form>

<form action="input_radio.htm" style="margin:1px">
<p>Geben Sie Ihre Zahlungsweise an:</p>
<p>
<input type="radio" name="Zahlmethode" value="Mastercard"/> Mastercard<br/>
<input type="radio" name="Zahlmethode" value="Visa"/> Visa<br/>
<input type="radio" name="Zahlmethode" value="AmericanExpress"/> American Express
</p>
</form>

<form action="input_checkbox.htm" style="margin:5px">
<p>Kreuzen Sie die gewünschten Komponenten an:</p>
<p>
<input type="checkbox" name="komponente" value="pc"/> PC<br/>
<input type="checkbox" name="komponente" value="maus"/> Maus<br/>
<input type="checkbox" name="komponente" value="monitor"/> Monitor
</p>
</form>

</td>
<td valign="top">
<h2>Wählen Sie aus ...</h2>

<form action="select.htm" style="margin:5px">
<p>
<select name="top5" size="5" multiple>
<option>pkt 1</option>
<option>pkt 2</option>
<option>pkt 3</option>
<option>pkt 4</option>
<option>pkt 5</option>
</select>
</p>
</form>
</td>
</tr>
</table>


</div>

<div id="footer">
#footer
<div id="InhaltF">
<h2>Ende</h2>
</div>
</div>

</body>
</html>