Kästen floaten davon :(

[Perceptor]

Hallo Leute !

Ich hab leider mal wieder ein Problem. Nach langem Wursteln hab ich es geschafft meine Seite, trotz Float-Einsatz im IE richtig anzeigen zu lassen.

Die Seite findet ihr hier.
Wie ihr sicher sehen könnt schweben die Kästen im Firefox zu weit oben, obwohl sie eigentlich im unteren Kasten sein sollten, was sie beim IE auch sind. Die Kästen sind wie folgt definiert:
(Navibox ist die Box die den Navigator oben beinhaltet und Textfeld ist das Feld mit der gelben Textur im Hintergrund)

/* Textfelddefinitionen */

.navibox {
    text-align: center;
    height: 62px;
    width: 720px;
    position: relative;
    margin: auto;
    top: 1px;
    
}

.textfeld {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
    background-color: #FFDB6C;
    background-position: center;
    text-align: left;
    width: 720px;
    height: 700px;
    position: static;
    margin: auto;
    background-image: url(background.jpg);
    background-repeat: repeat;
    float: none;
    border-top-width: thin;
    border-right-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #B6B6B6;
    border-right-color: #B6B6B6;
    border-left-color: #B6B6B6;
    
}

.header_navigation {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    background-image: url(box.jpg);
    height: 19px;
    width: 145px;
    position: relative;
    text-align: center;
    margin-left: 8px;
    background-repeat: repeat-x;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-top-color: #D26B06;
    border-right-color: #D26B06;
    border-bottom-color: #D26B06;
    border-left-color: #D26B06;
    letter-spacing: normal;
    float: left;
}
.navigation {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #FFC74C;
    text-align: left;
    width: 125px;
    position: relative;
    margin-left: 8px;
    overflow: hidden;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #D26B06;
    border-right-color: #D26B06;
    border-bottom-color: #D26B06;
    border-left-color: #D26B06;
    white-space: normal;
    padding: 10px;
    text-decoration: none;
    list-style-type: none;
    list-style-position: outside;
    clear: left;
    float:left;
}

.header_inhaltsbox {
    background-image: url(box.jpg);
    background-repeat: repeat-x;
    position: relative;
    height: 19px;
    width: 537px;
    margin-left: 170px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #D26B06;
    border-right-color: #D26B06;
    border-bottom-color: #D26B06;
    border-left-color: #D26B06;
    border-top-style: none;
}

.inhaltsbox {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    padding: 10px;
    text-align: justify;
    font-size: 12px;
    color: #000000;
    background-color: #FFC74C;
    width: 517px;
    margin-left: 170px;
    position: relative;
    border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #D26B06;
    border-right-color: #D26B06;
    border-bottom-color: #D26B06;
    border-left-color: #D26B06;
    height: 500px;
    line-height: 15px;
} 

Auf der Seite sind die ganzen Sachen wie folgt aneinandergefügt:

<body>
<?php
include ("navigator.html");
?>

<div class="textfeld">
<br />
<div class="header_navigation">
  Navigation
    </div>
    <div class="header_inhaltsbox">
  Inhalt    </div>
  <div class="navigation">
<a href="" title="punkt1">::. Punkt 1 <br /></a>
<a href="" title="punkt2">::. Punkt 2 <br /></a>
<a href="" title="punkt3">::. Punkt 3 <br /></a>
<a href="" title="punkt4">::. Punkt 4 <br /></a>
<a href="" title="punkt5">::. Punkt 5 <br /></a> 
<a href="" title="punkt6">::. Punkt 6 <br /></a>  </div>
  
  
  <div class="inhaltsbox">
  <span class="headline">News vom Dienstag, den 03 Januar 2006:</span><br /><br />
  Text
  </div>
  </div> 

Kann mir hier vielleicht jemand weiterhelfen? Wäre lieb

[Kropff]

also wenn du in der navibox folgendes angibts

height: 62px; 

brauchst du dich nicht zu wundern.

gruß
peter

[Perceptor]

Okay, jezz funktionierts

Besten Dank!

[Shurakai]

Kleiner Tipp: Du kannst dir ne ganze Menge Schreibarbeit sparen, indem du weniger CSS-Befehle reinpackst. Also z.B.:

   border-top-width: thin;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;

ersetzen durch

border-width: thin;

Hab dir da mal was passendes rausgesucht:

http://de.selfhtml.org/css/eigenscha...m#border_width

Interessant dürfte für dich vor allem sein:

Zwei Angaben: die erste Angabe bedeutet die Rahmendicke für oben und unten, die zweite Angabe die Rahmendicke für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts und links und die dritte die Rahmendicke für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts, die dritte die Rahmendicke für unten und die vierte die Rahmendicke für links.