Verständnisproblem Float im Firefox

[tattooz]

Hallo Leute,

nachdem ich jetzt eine Stunde lang gegoogelt habe und jede Menge Posts dazu, aber leider keinen Lösungsansatz für mein Problem gefunden habe, wende ich mich nun an euch.

Folgendes Problem: Der IE zeigt (wie ich bereits weiß, fälschlicherweise) die Seite richtig an, der Firefox erkennt das Float nicht an bzw. interpretiert es anders und ich weiß nicht, wo ich ansetzen soll. Alle Versuche, z. B. clear usw. sind bisher gescheitert.

Habe schon versucht eine Klasse .clear mit clear:both; tag einzufügen und in der index.php aufzurufen, aber anscheinend nicht die richtige Stelle gefunden. clear:left oder right ist auch vergebens.

Kann mir jemand bitte sagen, wie ich es hinbekomme, dass die Seite auch im Firefox richtig dargestellt wird. Anbei Screens von der Seite im IE und im FF sowie meine index.php (Layout-Auszug) sowie meine zugehörige CSS-Datei.

************************************************

Problem 1:
Es geht um den Containerbereich "haupt", der zwei Untercontainer "menu_l" (Menü links) und "inhalt" (Inhalt der Seite) enthält. Der Bereich aus dem Container Inhalt wird aber nach den Menüeinträgen nach links gezogen, soll aber in seinem Bereich bleiben.

Problem 2:
Container complete (also der komplette Bildschirm) soll zentriert werden, im IE funkioniert es, im Firefox ist er linksbündig.

Problem 3:
Firefox ignoriert die Margin-left Tags anscheinend?!? Kann das sein?

************************************************

Würde mich über die Lösung der Probleme riesig freuen.

Danke und Gruß

Stefan

Auszug aus index.php:
<div id="complete">
<div id="main">

<div id="header">
<?php include "header.php";?>
</div>

<div id="menu"
style="background- image:url(...);">
<?php include "hauptmenu.php";?>
</div>

<div id="bild"
style="background-image:url(...);">
</div>

<div id="haupt"
style="background:url(...)">

<div id="menu_l">
<?php include "menu_l.php";?>
</div>

<div id="inhalt">
<?php include "inhalt.php";?>
</div>

</div>

<div id="footer">
<?php include "footer.php";?>
</div>

</div>

</div>

--> Auszug Ende

Auszug aus CSS-Datei:
#complete {
text-align: center;
}

#main {
width: 770px;
}

/* Headerbereich */

#header {
width: 770px;
height: 75px;
text-align:center;
vertical-align: middle;
}

/* Menubereich */

#menu {
width: 770px;
height: 55px;
text-align: left;
}

/* Bildbereich */

#bild {
width: 770px;
height: 195px;
text-align:center;
vertical-align: middle;
background-color: #000000;
}

/* Mainbereich */

#haupt {
width: 770px;
}


/* Menubereich links*/

#menu_l {
width: 187px;
float: left;
text-align: left;
margin-left: 3px;
}


/* Inhalt der Seite */

#inhalt {
width: 570px;
text-decoration: none;
text-align: left;
margin-left: 10px;
}

/* Fusszeile */

#footer {
width: 770px;
height: 46px;
text-align: left;
background-color: #00FF55;
float:left;
}

[tattooz]

hier noch die Azeige wie gewünscht aus dem IE

[TobiaZ]

Ich habe den unformatierten Quelltext nicht angesehen, weils mir ein wenig zu viel ist.

Aber ich vermute, dass sich ein margin-left:180px; auf den rechten Container positiv auswirkt.

[Kropff]

oder dem #inhalt ein float: left geben und dem #footer ein clear: left;

peter

[tattooz]

Vielen Dank für die schnellen Antworten.

Habe jetzt folgendes verändert und es funktioniert zum Glück.

/* Mainbereich */

#haupt {
width: 770px;
background:url(pics/main_bg.jpg);
}

/* Menubereich links*/

#menu_l {
width: 187px;
float: left;
text-align: left;
margin-left: 3px;
}

/* Inhalt der Seite */


#inhalt {
width: 570px;
text-decoration: none;
text-align: left;
float: left;
}


/* Fusszeile */

#footer {
width: 770px;
height: 46px;
text-align: left;
background-color: #00FF55;
clear: left;
}


in Kurzform:

Container Inhalt auf float:left; gesetzt
Container Footer auf clear:left; gesetzt

Thread geschlossen