Bernd: Verschiebungen bei Firefox

Hallo!
Nachdem ich jetzt die (Design)-Tabelle aus meiner Seite heraus genommen habe und dabei bin, einzig mit Div-Containern zu werkeln, komme ich nicht weiter.
IE und Opera stellen alles wie gewünscht dar, nur beim firefox verschiebt sich alles. Zu sehen unter

http://www.rosdorf.info/imp.php

Kann mir da einer bitte weiterhelfen?

Vielen Dank!

  1. Hi,

    Nachdem ich jetzt die (Design)-Tabelle aus meiner Seite heraus genommen habe und dabei bin, einzig mit Div-Containern zu werkeln,

    was auch der falsche Weg ist.

    IE und Opera stellen alles wie gewünscht dar,

    gebe der Seite einen vollständigen Doctype, dann wird zumindest der Opera sie hoffentlich richtig falsch darsellen.
    Elimiere zunächst einmal Deine <div class="empty"></div> und berücksichtige das korrekte Box-Modell bei den Breitenangaben.

    freundliche Grüße
    Ingo

    1. ...danke erst einmal!

      Nachdem ich jetzt die (Design)-Tabelle aus meiner Seite heraus genommen habe und dabei bin, einzig mit Div-Containern zu werkeln,

      was auch der falsche Weg ist.

      Inwieweit? Nachdem was ich gelesen habe, sind Tabellen aus verschiedenen Gründen überholt (aufgeblähter Quelltext, längere Ladezeiten, etc.), weshalb Div-Container den Vorrang erhalten sollten. Ausnahmen z.B. Fußballtabellen, etc.

      Elimiere zunächst einmal Deine <div class="empty"></div> und berücksichtige das korrekte Box-Modell bei den Breitenangaben.

      Das habe ich gemacht, also ersteres. Letzteres habe ich mir gerade per google etc. zu Gemüte geführt. Dass bei einem Browser Werte abgezogen werden, die der andere kumuliert. Wenn ich die Werte bei mir aber jetzt herabsetze, ändert sich nach wie vor nichts. Ehrlich gesagt stehe ich da noch ein wenig auf dem Schlauch...

      1. Hallo Bernd

        Inwieweit? Nachdem was ich gelesen habe, sind Tabellen aus verschiedenen Gründen überholt (aufgeblähter Quelltext, längere Ladezeiten, etc.), weshalb Div-Container den Vorrang erhalten sollten.

        Da hast du etwas Falsches gelesen.
        Der Sinn eines CSS-Layouts besteht nicht darin, Tabellen durch Divs zu
        ersetzen, sondern die verschiedenen HTML-Elemente entsprechend ihrer
        Bedeutung zu verwenden und dann mittels CSS zu formatieren.

        In deinem HTML sehe ich keine Überschriften, keine Listen, nur ein paar
        Links, ein paar Bilder (die wohl eher Listenpunkte statt Inhalt sind) und
        zur Abwechslung mal einen Absatz und Unmengen von Div.
        Das ist keine HTML-Seite sondern ein Div-Suppe.

        Lies mal:
        meine Herangehensweise und nochmal
        meine Herangehensweise

        Übrigens wozu dienen eigentlich die vielen height:100% in deinem CSS?

        Auf Wiederlesen
        Detlef

        --
        - Wissen ist gut
        - Können ist besser
        - aber das Beste und Interessanteste ist der Weg dahin!
      2. Hallo Bernd!

        Was Ingo meinte war, dass Du versuchen solltest an Stelle der Tabelle semantisches Markup zu verwenden. Deine navigation könnte/sollte eine Liste sein. Von der Darstellung her leere Elemente wie Divisions solltest Du nur im Notfall einsetzen.

        Mit einem vollständigen Doctype meint Ingo, dass Du eben einen wie zum Beispiel: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> setzen sollst. Das führt dann auch dazu, dass der IE zumindest in den aktuellen Versionen das Boxmodell richtig interpretiert.

        Hoffe das hilft Dir ein wenig.

        Ansonsten musst Du Dich noch mit einigen der Grundlagen von CSS Layouts auseinander setzen.

        Schönen Gruß

        Afra

        1. Mit einem vollständigen Doctype meint Ingo, dass Du eben einen wie zum Beispiel: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> setzen sollst. Das führt dann auch dazu, dass der IE zumindest in den aktuellen Versionen das Boxmodell richtig interpretiert.

          So blöd es sich anhört, auch das wusste ich nicht. Habe dann aber ne ausführliche Beschreibung im Internet gefunden, wie da was und warum und mit nem Tantek-Hack und so weiter.

          Ansonsten musst Du Dich noch mit einigen der Grundlagen von CSS Layouts auseinander setzen.

          Das ist mir gestern auch bewusst geworden, dass da noch erhebliche Mängel vorhanden sind. Gibt es denn eine Seite, von der man sagen kann "so wirds gemacht, das sieht gut aus"? Würde mich mal interessieren, wie eine vorbildliche Seite so gestrikt ist (in der Praxis).

          Ich habe dann noch ne Frage: Beim jetzigen Versuch
          http://www.rosdorf.info/imp.php stellen Firefox und Opera einen ca. 1cm breiten Rand um meinen Header da. Womit ist das zu begründen und wie bekommt man das weg? Das hat doch nichts mit dem Box-Modell zu tun, oder?

          Danke vielmals, Gruß

          1. Hallo Bernd!

            Du mischt in Deiner Seite immer noch munter ausgelagtertes CSS mit alten Auszeichnungen und inline Styles. Einen Doctype der den Besucherbrowser dazu zwingt weniger Fehler zu machen hast Du auch noch nicht definiert.

            Das Dokument validiert immer noch nicht. Eventuell liegt es daran?

            Dein menu könnte auch so aussehen: (dies wäre zumindest keine Divsuppe)

            <ul id="menu">
            <li><a href="">AKTUELL</a></li>
            <li><a href="">Startseite</a></li>
            <li><a href="">News</a></li>
            ...
            </ul>

            Die Pfeile könntest Du mit CSS als Hintergrund in die Anker vor den Text stellen (padding)

            Einfach mal nachdenke wo man sparen könnte...

            Schönen Gruß

            Afra

            1. Hallo und noch mal danke!

              Ich denke, dass das so keinen Zweck hat. Zur Zeit habe ich noch Klausuren am Boppes und da fehlt einfach die Zeit, sich intensiv mit der Sache zu beschäftigen. (keine Angst, ich mache beruflich nichts mit Webdesign, das ist ein hobby und ich bekomme auf kein Geld für irgendetwas). Ich lasse das also erst einmal ruhen und gehe dann im März mit gebündelter Energie an die Sache.
              Eine bitte hätte ich jedoch noch: Kannst Du mir mal eine Hand voll brauchbarer Links mit auf den Weg geben für CSS, dieses "semantisches Markup" usw. Ich will mich ja nicht rausreden, aber ich habe den Eindruck, dass einem dabei im Netz auch viele Sachen über den Weg laufen, die nicht so ganz korrekt sind. Den Doctype habe ich nämlich z.B. als "korrekten" gefunden und mich darauf verlassen.
              Ich hätte gerne etwas, worauf ich aufbauen kann, damit ich nicht alle zwei Tage alles wieder überdenken muss.

              Nochmals vielen Dank!

              Gruß

              1. Hallo Bernd!

                Viel Erfolg mit den Klausuren.

                Ich hätte gerne etwas, worauf ich aufbauen kann, damit ich nicht alle zwei Tage alles wieder überdenken muss.

                Es gibt so viel dazu und vieles ist in Stücken nützlich. Anfangen solltest Du aber sicherlich hier:

                http://de.selfhtml.org/navigation/css.htm
                Dann kannst Du heir schauen:
                http://de.selfhtml.org/css/index.htm

                Wenn Du dann die Grundlagen verstanden hast, kannst Du Dir auch andere Seiten anschauen, die hier beschrieben sind:
                http://aktuell.de.selfhtml.org/links/css.htm

                Ich habe bewusst nur selfHTML Links gepostet, da bei anderen Seiten im Web die Meinungen oft weit auseinander gehen.

                Das alles hättest Du aber auch selbst finden können.

                Schönen Gruß

                Afra

                1. Das alles hättest Du aber auch selbst finden können.

                  Danke für die Links! Und das Problem mit dem selbst finden ist das, was Du angesprochen hast: Es gibt so viel (zu viel). Bei Self HTML finde ich manchmal alles etwas unübersichtlich, weil es eben so detailliert ist.
                  Nochmals vielen Dank, Gruß!

              2. Hi,

                brauchbarer Links mit auf den Weg geben für CSS, dieses "semantisches Markup" usw.

                zunächst mal findest Du in http://de.selfhtml.org/html/text/logisch.htm einige Elemente, die Du vielleicht noch gar nicht kennst, aber kennenlernen solltest. Hx, P und andere Standardelemente sind hier natürlich nicht aufgeführt.

                http://de.selfhtml.org/css/layouts/ zeigt Dir zwar schlichte Beispiele, aber mit sinnvoller (und sehr einfacher) HTML-Auszeichnung.

                Im Prinzip solltest Du Dich bei jedem DIV fragen, ob es a) erforderlich ist und b) nicht vielleicht ein passendees Element genuzt werden kann.

                Den Doctype habe ich nämlich z.B. als "korrekten" gefunden und mich darauf verlassen.

                dann solltest Du Dir http://de.selfhtml.org/css/formate/box_modell.htm#standardkonform genauer ansehen.

                freundliche Grüße
                Ingo