unterschiedliche Darstellung im IE7 und FF3 und weitere Probleme

[Rayne]

Hallo.

Ich bin gerade dabei, eine neue Website zu gestalten und habe das Grundgerüst bereits aufgebaut und auch schon mit Inhalt gefüllt.
Hier ersteinal der aktuelle Stand: http://www.sky-divezone.de/Other/WIKO/

Ich habe momentan 7 Probleme:

1.) Im FF 3 sieht soweit alles recht ok aus. Im IE 7 allerdings klebt die Sub-Navi (home, impressum, sitemap) oben am Rand. Warum? http://s4b.directupload.net/file/d/1582/x69rix9k_jpg.htm

2.) Im FF 3 sieht soweit alles recht ok aus. Im IE 7 allerdings befinden sich bei der Haupt-Navi die list-style-types (kleinen Pfeile) direkt an den Wörtern. Im FF siehts richtig aus. Warum?

3.) Ich möchte der Haupt-Navi einen gewissen Abstand zum Header geben. Verwende ich dazu margin-top (#Huelle-Navi ul li), dann wird der Abstand zwischen den einzelnen Menüpunkten immer größer. Woran liegt das? Wie vergrößere ich den Abstand zur oberen Kante richtig? http://s3b.directupload.net/file/d/1582/u63zbt4q_jpg.htm

4.) Im Footer am Ende der Seite steht ein kleiner Text, den ich ganz gern horizontal und vertikal mittig ausgerichtet hätte. Vertikal ist jedoch am wichtigsten. Warum geht das nicht per vertical-align: middle? Ich sehe bei einem Reload zwar, dass sich der Text ein Mü nach unten verschiebt, aber das ist vielleicht 1px. Wie muss es richtig heißen?

5.) Sobald sich der Inhalt nach unten verlängert, bleibt die Navi stehen. Was muss ich verändern, damit sich Navi und IInhalt parallel verschieben? http://s3b.directupload.net/file/d/1583/e4ku3qmf_jpg.htm

6.) Im Content-Bereich zwischen der Überschrift und dem Datum ist zu viel Platz. Ich weiß gar nicht, wo dieser Leerraum herkommt. Wie bekomme ich das Datum näher an die Überschrift heran?

7.) Kein richtiges Problem, aber mich wunderts: Da ich fast überall 2 Divs nebeneneinander habe, musste ich mit float arbeiten. Allerdings hat es nur geklappt, wenn ich dem linken Element float:left und dem rechten Element float:right gegeben habe
War das schon immer so? Müsste es nicht genau umgekehrt sein und müsste nicht nur das erste Element ein float besitzen?

Hier das StyleSheet:

/* -------------------------------------------------------------------------------------------------------------------> allgemein */
html {
height: 100%; /*nötig, um ein DIV auf 100% Höhe zu bringen */
}

Body {
/* -------------------------------------------------------------------------------------> Farben */
background: #eaf4da;

/* -------------------------------------------------------------------------------------> Schrift */
font-family: Arial;
font-size: 12px;
/* line-height: 1.3em;
word-spacing: 0.3em;*/

/* -------------------------------------------------------------------------------------> Abstände */
margin: 0px;
height: 100%; /*nötig, um ein DIV auf 100% Höhe zu bringen */
}

/* -------------------------------------------------------------------------------------> Links */
a { text-decoration: none; }
a:link { color: #B5DBFF; }
a:visited { color: #B5DBFF; }
a:hover { color: #B5DBFF;
text-decoration: underline; }
a:active { color: #B5DBFF; }

/* -------------------------------------------------------------------------------------> Listen */
/*li {
list-style-image: url(Bilder/Liste.png);
margin-left:25px;
margin-right:10px;
line-height: 13px;
}*/

/* -------------------------------------------------------------------------------------> Formulare */
input {
font-family: Verdana;
font-size: 12px;
color: #2969AD;
background-color: #FFFFFF;
border-color: #FFFFFF;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
}

Textarea {
font-family: Verdana;
font-size: 12px;
color: #2969AD;
background-color: #FFFFFF;
border-color: #FFFFFF;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-bottom-style: solid;
}

/* -------------------------------------------------------------------------------------------------------------------> Huelle-gesamt */
#Huelle-gesamt {
position: relative;
margin-right: auto;
margin-left: auto;
margin-top: 40px;
width: 820px;
height: auto;
background: #FFFFFF;
}

/* -------------------------------------------------------------------------------------------------------------------> Rand oben */
#Rand-oben {
width: 820px;
height: 19px;
background: url(Bilder/Schatten-oben.gif);
}

/* -------------------------------------------------------------------------------------------------------------------> Huelle-klein */
#Huelle-klein {
width: 820px;
height: auto;
background: url(Bilder/Schatten-mitte.gif) repeat-y;
}

/* -------------------------------------------------------------------------------------------------------------------> Sub-Navi */
#Sub-Navi {
width: 600px;
height: 40px;
background: #3e4d55;
margin-left: 20px;
float:left;
color: #FFFFFF;
}

#Sub-Navi ul li {
margin-left:10px;
display: inline;
font-weight: bold;
font-size: 13px;
}

#Sub-Navi a {
color: #FFFFFF;
}

#Sub-Navi a:hover {
text-decoration: none;
color: #8cca42;
}


/* -------------------------------------------------------------------------------------------------------------------> Login */
#Login {
width: 180px;
height: 40px;
background: #3e4d55;
margin-right: 20px;
float:right;
color: #FFFFFF;
text-align: right;
}

#Login ul li {
margin-right: 10px;
display: inline;
font-weight: bold;
font-size: 13px;
}

#Login a {
color: #FFFFFF;
}

#Login a:hover {
text-decoration: none;
color: #8cca42;
}

/* -------------------------------------------------------------------------------------------------------------------> Header-klein */
#Header-klein {
width: 30px;
height: 200px;
background: #3e4d55;
margin-left: 20px;
float:left;
}

/* -------------------------------------------------------------------------------------------------------------------> Header */
#Header {
width: 740px;
height: 180px;
background: #9fe039 url(Bilder/Header.jpg) no-repeat;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
float:right;
}

/* -------------------------------------------------------------------------------------------------------------------> Navi */
#Huelle-Navi {
width: 250px;
height: auto;
background: #3e4d55;
margin-left: 20px;
float: left;
color: #FFFFFF;
}

#Huelle-Navi h1 {
margin-top: 30px;
margin-left: 50px;
margin-bottom: 20px;
font-weight: bold;
font-size: 17px;
text-transform: uppercase;
color: #8cca42;
}


#Huelle-Navi ul li {
margin-left: 30px;
margin-right: 20px;
font-weight: bold;
font-size: 14px;
line-height: 25px;
text-align: right;
border-bottom: 1px dashed #667e8b;
list-style-image: url(Bilder/Liste-over.gif);
}

#Huelle-Navi a {
color: #FFFFFF;
display: block;
}

#Huelle-Navi a:hover {
text-decoration: none;
color: #8cca42;
}

/* -------------------------------------------------------------------------------------------------------------------> Content */
#Huelle-Content {
width: 530px;
height: auto;
background: #FFFFFF;
margin-right: 20px;
float: right;
}

#Huelle-Content h1 {
margin-top: 30px;
margin-left: 40px;
margin-right: 20px;
font-weight: bold;
font-size: 17px;
text-transform: uppercase;
color: #8cca42;
border-bottom: 1px dashed #667e8b;
}

#Huelle-Content h2 {
margin-left: 40px;
margin-bottom: 20px;
font-weight: bold;
font-size: 12px;
color: #8cca42;
}

#Huelle-Content p {
margin-left: 40px;
margin-right: 20px;
color: #787878;
line-height: 1.3em;
word-spacing: 0.3em;
}

#Huelle-Content a {
color: #8cca42;
font-weight: bold;
}

/* -----------------------------------------------------------------------------------------------------------------> Footer */
#Huelle-Footer {
width: 780px;
height: 30px;
background: #3e4d55;
margin-top: 10px;
margin-right: 20px;
margin-left: 20px;
}

#Footer-Copyright {
color: #bdbdbd;
text-align: center;
vertical-align: middle;
}

/* -------------------------------------------------------------------------------------------------------------------> Rand unten */
#Rand-unten {
width: 820px;
height: 19px;
background: url(Bilder/Schatten-unten.gif);
}

/* -------------------------------------------------------------------------------------------------------------------> clear - Float aufheben */

.clear {
clear: both;
}

Hier der HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="styles.css">
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>test</title>
</head>
<body>
<div id="Huelle-gesamt">
<div id="Rand-oben"></div>
<div id="Huelle-klein">
<div id="Sub-Navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
<div id="Login">
<ul>
<li><a href="#">Login</a></li>
</ul>
</div>
<div class="clear"></div>
<div id="Header-klein"></div>
<div id="Header"></div>
<div class="clear"></div>
<div id="Huelle-Navi">
<h1>Navigation</h1>
<ul>
<li><a href=&q