Verständnisproblem Float im Firefox

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Verständnisproblem Float im Firefox

    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;
    }
    Angehängte Dateien

  • #2
    hier noch die Azeige wie gewünscht aus dem IE
    Angehängte Dateien

    Kommentar


    • #3
      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.

      Kommentar


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

        peter
        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
        Meine Seite

        Kommentar


        • #5
          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

          Kommentar

          Lädt...
          X