div Layer im Firefox

[Sirena]

Ich versuche jetzt schon seit Stunden das ganze richtig hinzubekommen, aber ich kriegs einfach nicht hin.

Ich hab ein Layout mit Header, 2 divs nebeneinander (Inhalt + Menü) und unten noch ein Footer, der sich automatisch an die Höhe anpasst.

Im IE funktioniert alles, aber im Firefox wird das div des Inhalts falsch angezeigt. Da das Menü kürzer ist, als der Text verschiebt sich das ganze ab dem Punkt, wo das div des Menüs aus ist weiter nach links.
Die 2 divs sind ja mit position: relative gekennzeichnet, weil das sonst mit dem footer nicht geht. Und der Firefox rechnet dann aber mit der position vom linken Rand aus.

Hier mal der Code:

Code: Alles auswählen

#seite, #text, #menu, #header  {
   position: relative;
}

#seite {
   height: 100%;
}

#seite[id] {
        height: auto;
        min-height: 100%;
}

html, body {
   height: 100%;
   margin: 0px;
   padding: 0px;
}

#seite {
   width: 800px;
   min-height: 100%;
}

#header {
   width: 729px;
   height: 302px;
   background-color: #FFFFFF;
   top: 0px;
   left: 0px;
        border: 0px;
   background: url(Bilder/design/header.jpg);
   background-repeat: no-repeat;
}

#menu {
   width: 140px;
   background-color: #FFFFFF;
   left: 15px;
   top: 2px;
   float: left;
   height: 100%;
}

#text {
   width: 540px;
   background-color: #FFFFFF;
   left: 40px;
   right: 0px;
   top: 2px;
        background-color: transparent;
   min-height: 100%;
}

#footer {
   width: 100%;
   height: 20px;
   background-color: #FFFFFF;
   bottom: -2px;
   left: 0px;
   background: url(Bilder/design/bg2.jpg);
   background-repeat: no-repeat;
   position: absolute;
   clear: both;
}

Und html:

Code: Alles auswählen

<div id="seite">
<div id="header"></div>
<div id="menu">Menü</div>
<div id="text">Text</div>
<div id="footer"></div>
</div>

Hoff es kann mir jemand helfen ich bin am verzweifeln...

[Laus]

Hallo

Um den Code richtig zu posten musst du bei HTML in diesem Beitrag deaktivieren ein Häkchen setzen.
Besser wäre allerdings ein Link zur Seite wo man sich das online ansehen kann, dann erspart man sich das ewige kopieren und einfügen um die Sache zu Testzwecken zu untersuchen.

Gruß Xaver

[Sirena]

Ok danke habs editiert.

Hier die Onlineversion:
http://maria.lionne.net/test/

Die ganzen Tests sollen eben in der rechten Spalte bleiben wie bei der ie version..

und noch die css Datei:
http://maria.lionne.net/test/stylenew.css

[Laus]

Hallo

Normale folge von deiner Positionierung. Der FF macht genau was man ihm sagt nur der IE eben nicht.
Zuerst floatet das Div Text wie gewünscht und nach ende des Div Menü ist das Float wieder beendet so wie es sein soll.

Ändere dein Style dahingehend ab.

Code: Alles auswählen

#text {
background-color:transparent;
margin:2px 0px 0px 200px;
min-height:100%;
width:540px;
}

Gruß Xaver

[Sirena]

Ah danke jetzt funktionierts!