Div wird im IE6 nach unten verschoben

[Timmer]

Hey, ich hab ein kleines Problem, im IE6 wird mein Naviagions-DIV nach unten verschoben. Das gleiche passiert mit einem anderen DIV. Die DIVs haben rechts und links auch einen DIV. Ich habe die DIVs gefloatet, nicht absolut positioniert oder so.

index.php

<div id="bg_top_left"></div>
  <div id="bg_top_right"></div>
  <div id="navigation">
   <a href="index.php?site=home" id="home"></a>
   <a href="index.php?site=aktuelles" id="aktuelles"></a>
   <a href="index.php?site=projekte" id="projekte"></a>
   <a href="index.php?site=uebermich" id="uebermich"></a>
   <a href="index.php?site=kontakt" id="kontakt"></a>
   <a href="index.php?site=impressum" id="impressum"></a>
  </div>
  <div id="content">
   <?php 
    if(isset($_GET['site'])){
     include('site/'.$_GET['site'].'.php');
    }else{
     include('site/home.php');
    }
   ?>
  </div>
  <div class="clear"></div>
  <div id="bg_bottom_left"></div>
  <div id="bg_bottom_right"></div>

style.css

/*Navigation*/
#navigation {background:transparent url(images/navbar.jpg) no-repeat scroll 0 0;height:40px;width:609px;margin-left:89px;}
 #home {background:transparent url(images/navbar.jpg) no-repeat scroll -19px 0;height:40px;width:44px;overflow:hidden;float:left;margin-left:19px;}
 #home:hover {background:transparent url(images/navbar.jpg) no-repeat scroll -19px -40px;}
 #aktuelles {background:transparent url(images/navbar.jpg) no-repeat scroll -101px 0;height:40px;width:65px;overflow:hidden;float:left;margin-left:38px;}
 #aktuelles:hover {background:transparent url(images/navbar.jpg) no-repeat scroll -101px -40px;}
 #projekte {background:transparent url(images/navbar.jpg) no-repeat scroll -204px 0;height:40px;width:60px;overflow:hidden;float:left;margin-left:38px;}
 #projekte:hover {background:transparent url(images/navbar.jpg) no-repeat scroll -204px -40px;}
 #uebermich {background:transparent url(images/navbar.jpg) no-repeat scroll -302px 0;height:40px;width:77px;overflow:hidden;float:left;margin-left:38px;}
 #uebermich:hover {background:transparent url(images/navbar.jpg) no-repeat scroll -302px -40px;}
 #kontakt {background:transparent url(images/navbar.jpg) no-repeat scroll -420px 0;height:40px;width:55px;overflow:hidden;float:left;margin-left:41px;}
 #kontakt:hover {background:transparent url(images/navbar.jpg) no-repeat scroll -420px -40px;}
 #impressum {background:transparent url(images/navbar.jpg) no-repeat scroll -513px 0;height:40px;width:77px;overflow:hidden;float:left;margin-left:38px;}
 #impressum:hover {background:transparent url(images/navbar.jpg) no-repeat scroll -513px -40px;}
 
/*Hintergrundreste*/
#bg_top_left {background:transparent url(images/bg_top_left.jpg) no-repeat scroll 0 0;height:134px;width:89px;float:left;}
#bg_bottom_left {background:transparent url(images/bg_bottom_left.jpg) no-repeat scroll 0 0px;height:70px;width:89px;float:left;margin-top:-50px;}
#bg_top_right {background:transparent url(images/bg_top_right.jpg) no-repeat scroll 0 0;height:134px;width:90px;float:right;}
#bg_bottom_right {background:transparent url(images/bg_bottom_right.jpg) no-repeat scroll 0 0;height:70px;width:90px;float:right;margin-top:-50px;}

Die "Hintergrundreste" sind die 4 DIVs jeweils rechts und links neben dem Navigations-DIV und dem anderen DIV.

Kann mir jemand sagen, woran das liegen könnte?

[EDIT]

Ach ja, der Link zur Seite: http://www.timmaeh.de/test1/

 

[roddy]

du könntest ja ein alternatives stylesheet für den ie6 einbinden da früher oder später sowieso noch weiter probleme auftauchen werden

das geht z. B. so

head>
  <link type="text/css" rel="stylesheet" href="./css/default.css">

     <!--[if IE 6]>
       <link type="text/css" rel="stylesheet" href="./css/default_ie.css">
     <![endif]-->
</head>

 

[Timmer]

Ja ich weiß, wie man das macht, aber wie fixe ich mein Problem im IE6? Sollte ich da einfach absolut positionieren? Dann funktioniert es mit der dynamischen Höhe aber nicht mehr...

 

[neuroleptika]

#navigation passt nicht zwischen die beiden Floats.
Du brauchst kein width für #navigation.


Besser:
Verschachtele die Elemente.
Bisher ordnest du die Elemente im Tabellenmuster an (Zeile für Zeile).

 

[Timmer]

Besser:
Verschachtele die Elemente.
Bisher ordnest du die Elemente im Tabellenmuster an (Zeile für Zeile).

Weil es so für mich übersichtlicher ist. Wie meinst du das mit verschachteln? Kann mir darunter nichts vorstellen...

 

[neuroleptika]

<div id="bg-top">
<div id="bg-bottom">

<div id="inhalt">
Inhalt
</div>

</div>
</div>

#bg-top für die obere Grafik mit background-position: top; und width: 788px.
#bg-bottom für die untere Grafik mit background-position: bottom;
#inhalt bekommt margin-left und margin-right.

Zerschneiden mußt du die obere und untere Grafik nicht.

 

[Timmer]

Zerschneiden mußt du die obere und untere Grafik nicht.

Doch, da die Höhe der Seite dynamisch ist. Ich probiers mal so aus.

[EDIT]

Naja, also ich hab große Probleme damit, weil er nicht das macht, was ich will ^^ Und im IE wird jetzt garkein Content mehr angezeigt.

Siehe: http://www.timmaeh.de/test2/

 

[neuroleptika]

Doch, da die Höhe der Seite dynamisch ist. Ich probiers mal so aus.

Nur eine Grafik für oben und eine für unten.
In der oberen kann auch der Schriftzug schon enthalten sein.