[Firefox] Problem mit der Formatierung der Höhe

[lightning2007]

Hallo zusammen,

ich habe ein Problem im Firefox 2 mit der Höhenangabe auf http://www.gras14.de/test/ - IE 6 funktioniert...

Der main Bereich ist in die linke Seite (Inhalt) und die rechte Seite (Navigation) aufgeteilt.
Betritt man die Seite ist alles gut. Wählt man aber den Link "A" minimiert sich die Höhe. Wähle ich dann den Link "Page 1" ist wieder alles ok...

Das entsprechende css sieht wie folgt aus. Die ID #content bildet den Rahmen von Inhalt (Klasse .links) und Navigation (.rechts).

body {
margin:0;
padding:0;
text-align:center;
font-family: verdana, arial, helvetica, sans-serif;
color:#fff;
font-size:13px;
text-decoration:none;
background-image: url(gfx/bg.gif);
}

#content {
position:relative;
margin:auto;
width:806px;
text-align: left;
background-image: url(gfx/bg_schwarz_middle2.gif);
background-position: left;
background-repeat: repeat-y;
min-height:100%;
}

.rechts {
margin: 0 20px 0 0px;
font-size:16px;
color:#e2007a;
font-weight:bold;
min-height:100%;
}

.links {
width:525px;
float:left;
margin: 0 13px 0 25px;
min-height: 500px;
}

Weiß jemand woran das komische Verhalten der Höhe liegt? Kennt jemand eine Lösung hierfür?

Vielen Dank und gute Nacht!
Michael

 

[Maik]

Hi,

wie es scheint, muss die Floatumgebung mit Hilfe der clear-Eigenschaft aufgehoben werden:

.bottom {
                position:relative;
                width:806px;
                height:49px;
                background-image: url(gfx/bg_schwarz_bottom.gif);
                background-position: left;
                background-repeat: none;
                margin-bottom:-50px;
                clear:left;
    }