nik: <div>: korrekte Darstellung erst nach refresh

Hallo

Ich erstellte ein <div> mit overflow:scroll. Diese <div> beinhaltet eine Tabelle, welche mit Daten von einer MySQL DB gefüllt wird. Nun ich habe folgendes Problem:

Im linken Frame kann ich einen Link anklicken, welcher mir diese obige Tabelle im rechten Frame erstellt. Obwohl ich die Grösse des div's mit 100% angegeben habe, wird das div immer grösser als das Fenster. Sobald ich das Frame "refreshe" oder das Fenster in der Grösse ändere sehe ich die korrekte Darstellung. Wie kann ich die Falschdarstellung verhindern?

Mein benutzer Code:
div:  style=overflow:scroll; position: relative;height: 100%;width:100%;margin: 50px;top: 50px;left: 55px;

body: style=padding: 25px 25px 120px 25px

Vielen Dank
Nik

  1. Hallo Nik,

    In welchen Browsern tritt das Problem denn auf?
    Es wäre auch gut, wenn du eine Beispiel URL angeben könntest. Das, was ich hier testhalber nachgebastelt habe funktioniert mit meinem Opera 7 nämlich einwandfrei.

    Grüsse,
      Christian

    --
    Erfahrung ist die Summe der Dummheiten, die man im Bedarfsfall wieder anwendet. (Dieter Hildebrand, Kabarettist)
    1. Salut Christian

      Ich habe IE 6.0. Interessant ist auf noch folgendes Phänomen: Wenn die Tabelle, die innerhalb des div's ist, weniger als 8 Zeilen hat, scheint es zu funktionieren. Bei mehr wieder nicht.

      Leider habe ich aktuel das Beispiel noch auf keinem Server.

      Kann dies etwas mit DocType zusammenhängen?
      Gruss
      Nik

      1. Hallo Nik.

        Ich habe IE 6.0. [...]
        Kann dies etwas mit DocType zusammenhängen?

        Klar kann es das. Probier mal eine transitional Angabe mit oder ohne Angabe der dtd.

        Das Hauptproblem scheint bei den relativen Angaben zu liegen: Du gibst bei der div height:100%; an. Diese Angabe bezieht sich auf die Größe des Elternelements (der body). Nun wird der aber durch deine div vergrößert und letztendlich bleibt alles beim Alten. (jedenfalls mit Angabe der dtd bei Opera7 und Netscape7.1. IE macht alles etwas anders...).
        Wenn du die dtd weglässt scheint das Verhalten der Browser mehr in deinem Sinne zu sein, da height:100%; die verfügbare Höhe bezeichnet. Aber auch hier gibts Unterschiede bei den Browsern.
        Wenn du eine zuverlässige Darstellung mit allen Browsern möchtest scheint mir nur eine absolute Höhenangabe in Verbindung mit Angabe der dtd sinnvoll. Es mag aber sein, dass es durchaus Möglichkeiten gibt dein Problem mit relativen Angaben zu lösen. Vielleicht weiß ja ein anderer Forumsteilnehmer eine Lösung dafür.
        Um auf das eigentliche Problem zurückzukommen: Ich hatte bei keinem der Browser Unterschiede zwischen der ersten Darstellung und der Darstellung nach dem neu laden. Eventuell könnte das daran liegen, dass er die Daten beim ersten Laden noch nicht vollständig hat (Ich hatte das Problem mal mit einem externen Stylesheet in einer frühen Opera7 Version). Ansonsten könnten aber auch da absolute Angaben helfen, da deren Resultate sich im Unterschied zu relativen Angaben im Verlauf des Seitenaufbaus nicht ändern.

        Grüsse,
          Christian

        --
        Erfahrung ist die Summe der Dummheiten, die man im Bedarfsfall wieder anwendet. (Dieter Hildebrand, Kabarettist)
        1. Salut

          Vielen Dank erstmal. Was ich bemerkt habe ist, dass eine absolute angabe der Höhe z.B. height = 100px sicherer ist als in %. Weisst Du wie man die Höhe evtl. über Javascript ausfindig machen kann und diese einsetzen. Ich habe leider keine grosse Ahnung bezgl. Javascript. Wie muss ich das ganze im html-tag angeben etc.???

          Bezgl DocType habe ich auch keine Erfahrung. Kannst Du mir ein Beispiel posten?

          Diese habe ich gefunden (Einsatz in php)

          echo "<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 3.2//EN'>";

          echo "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">";

          echo "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ";

          echo "<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">";

          Was ist korrekt? Der Sinn von den Einzelnen?

          Vielen Dank im voraus
          Nik

          1. Hallo Nik,

            Vielen Dank erstmal. Was ich bemerkt habe ist, dass eine absolute angabe der Höhe z.B. height = 100px sicherer ist als in %. Weisst Du wie man die Höhe evtl. über Javascript ausfindig machen kann und diese einsetzen. Ich habe leider keine grosse Ahnung bezgl. Javascript. Wie muss ich das ganze im html-tag angeben etc.???

            Das ist afaik nur dann möglich, wenn zuvor eine Höhenangabe gesetzt wurde. Und das ist in dem Fall ja nicht besonders hilfreich. Du könntest natürlich die Bildschirmauflösung ausfindig machen und dementsprechend die Höhe wählen. Das schützt dich aber noch lange nicht vor kleinen Browserfenstern etc.
            Im Endeffekt glaube ich, dass Javascript hier mehr schaden kann als helfen.

            Bezgl DocType habe ich auch keine Erfahrung. Kannst Du mir ein Beispiel posten?

            In selfhtml werden die Dokumenttypangaben ausführlich erläutert:
            http://selfhtml.teamone.de/html/allgemein/grundgeruest.htm#dokumenttyp

            Was ich mit dtd Angabe meinte ist '... "http://www.w3.org/TR/html4/loose.dtd">'
            Wenn die URL mit angegeben ist schalten die meisten Browser in den Modus für die Einhaltung der Standards. Andernfalls verwenden sie den Kompatiblitätsmodus zum Verhalten älterer Browser.
            Der Link dürfte das übrige erklären.

            Was ist korrekt? Der Sinn von den Einzelnen?

            Korrekt sind alle deine Beispiele, solange das Dokument dazu passt.

            Grüsse,
              Christian

            --
            Erfahrung ist die Summe der Dummheiten, die man im Bedarfsfall wieder anwendet. (Dieter Hildebrand, Kabarettist)
            1. Hallo

              Hab glaub ich eine Lösung:

              Getestet in IE 6 und Netscape 7.1

              Im  body
              $body->addAttribut('style', 'padding: 25px 150px 70px 0px');

              Im div mit dem Content:
              $div->addAttribut('style', 'overflow:scroll; position: relative;top: 50px;left: 100px;width: 100%; height: 100%;

              Funtioniert dies bei Dir auch? DocType habe ich nichts gesendet.
              Gruss
              Nik

              1. Habe was weiters herausgefunden:

                Ich habe 2 divs nebeneinander. Sobald ich float: left; einfüge, tritt dieses Problem mit dem refresh auf.
                Gruss