Div-Box wird in Firefox abgeschnitten und Scrollen funktioniert nicht richtig

  • Hallo,

    ich habe im WWW leider noch nichts brauchbares gefunden, deswegen dachte ich mir, dass ich einfach mal hier nachfrage:

    Ich bastele zur Zeit an einer Homepage und habe folgendes Problem:
    Wenn ich die Seite mit Firefox ansehe, wird die Tabellenzeile meines Contents nicht vollständig dargestellt und das Scrollen in der Div-Box "hängt" irgendwie.
    Im IE und in Chrome klappt das Scrollen perfekt.
    In Safari klappt es leider auch nicht mit dem Scrollrad, aber man kann die Scrollbar mit der Maus herumziehen und es wird alles richtig dargestellt.

    Also eigentlich macht nur Firefox Probleme.

    Hier kann man sich die Seite ansehen:
    http://svenjainmexiko.ohost.de/noviembre.php

    Und hier ist mein Code des Designs:

    Dass es an irgendeinem eingebundenen PHP-Code liegt, kann ja wohl nicht sein, oder?

    Hat jemand 'ne Idee?

    Einmal editiert, zuletzt von showtime (29. Oktober 2012 um 00:09)

  • Hab jetzt mal einen Doctype reingemacht (HTML 4.01 Transitional), aber das Ergebnis bleibt dasselbe.
    Vielleicht sollte ich einen anderen verwenden? Strict? Aber dann müsste ich wahrscheinlich erst noch ein paar Sachen überarbeiten, da dort ja nicht so viel akzeptiert wird, oder?


    Was den fragwürdigen Code angeht:
    Die ersten paar Probleme beziehen sich ja alle auf die Prozentangaben. Ist es denn nicht empfehlenswert, das Layout in Prozentwerten zu gestalten? Ich dachte mir dabei, dass es dann besser mit unterschiedlichen Auflösungen arbeitet als wenn ich absolute Pixel-Werte angebe.

    Einmal editiert, zuletzt von showtime (29. Oktober 2012 um 01:04)

  • Hallo

    Zitat

    Vielleicht sollte ich einen anderen verwenden?

    Welchen der heutzutage 5 üblichen Doctypes du benutzt ist zur Zeit relativ egal. Hauptsache der Quelltext passt dazu und ist fehlerfrei. Der Validator ist nur die Grundlage, die Semantik muss auch stimmen.

    Zum erstellen neuer Seiten kann man aktuell eigentlich immer HTML5 mit CSS3 nehmen.

    Und man sollte die HTML-Elemente von Anfang an richtig anwenden. "br" z. B. ist für einen Zeilenumbruch gedacht, nicht um Abstände zu generieren. Die Abstände werden mit CSS erstellt.

    Zitat

    Ist es denn nicht empfehlenswert, das Layout in Prozentwerten zu gestalten?

    Der W3C-Validator zeigt Fehler auf, keine Empfehlungen. Wenn die Seite nicht wie gewünscht funktioniert sollten die Fehler, aber auch die Warnungen, erst mal komplett beseitigt werden.

    Zitat

    Ich dachte mir dabei, dass es dann besser mit unterschiedlichen Auflösungen arbeitet als wenn ich absolute Pixel-Werte angebe.

    Im Prinzip ja. Aber nicht einfach blind, sondern man sollte schon wissen, was man tut. Im Internet gibt es genügend HTML-Quelltextbeispiele, die man als Grundgerüst für seine eigene Seite verwenden kann. Meist sind in den Quelltextbeispielen auch gleich Korrekturen angewandt, die die Eigenheiten der gebräuchlichsten Browser berücksichtigen.

    Einfach alle Elemente flexibel zu machen funktioniert leider nicht. Und Tabellen als Layout-Element zu benutzen ist seit über 12 Jahren schlicht eine falsche Technik.

    Gruss

    MrMurphy

    Einmal editiert, zuletzt von MrMurphy (29. Oktober 2012 um 06:47)


  • "br" z. B. ist für einen Zeilenumbruch gedacht, nicht um Abstände zu generieren. Die Abstände werden mit CSS erstellt.

    Okay, also werde ich wohl das Layout komplett mit CSS überarbeiten.
    Wenn im Content allerdings mehrere Absätze habe (z.B. nach jedem Blogeintrag), ist das schon okay, oder?


    Zitat


    Der W3C-Validator zeigt Fehler auf, keine Empfehlungen. Wenn die Seite nicht wie gewünscht funktioniert sollten die Fehler, aber auch die Warnungen, erst mal komplett beseitigt werden.

    Also ich habe jetzt eigentlich alle Fehler beseitigt (bis auf die Prozentwerte), außer diesen, den ich nicht so ganz verstehe:
    "NET-enabling start-tag requires SHORTTAG YES"


    Zitat

    Einfach alle Elemente flexibel zu machen funktioniert leider nicht. Und Tabellen als Layout-Element zu benutzen ist seit über 12 Jahren schlicht eine falsche Technik.

    Okay, noch ein Grund das Layout zu überarbeiten.


    Vielen Dank für die Tips
    Svenja

  • Bin gerade dabei das Design in CSS zu überarbeiten (wovon ich noch nicht viel Ahnung habe).

    Ich habe ja im Prinzip 2 Boxen: Links die Navigation und rechts der Content. Die Navigation ist 200px breit und ich möchte, dass der Contentcontainer den Rest der Seite kriegt.
    Wenn ich einen absoluten Wert definiere, gibt es bei einer großen Auflösung einen Abstand zwischen den beiden Containern. Das ist zwar akzeptabel, aber ich finde es nicht so schön. Jedoch überschneiden sich die Container dann bei einer kleineren Auflösung und das ist wirklich nicht akzeptabel.

    Kann man das irgendwie lösen?


    _________________

    Edit:
    Habs geschafft - ich habe einfach noch "left:200px" hinzugefügt und die Breite weggelassen - und es funktioniert genauso wie ich es haben wollte!

    2 Mal editiert, zuletzt von showtime (30. Oktober 2012 um 01:16)

  • Vielen Dank für eure Antworten, ich bin jetzt soweit, dass der Fehler nicht mehr auftaucht und Scrollen bei meinen getesteten Browsern funktioniert. (Hab jetzt eigentlich keine gestaltenden HTML-Elemente mehr im Design)

    Jedoch hätte ich noch eine Frage: Warum funktioniert das Scrollen am Smartphone nicht? (Android Standard Browser)
    Und wie kann ich die Scrollbar so verkleinern, dass sie nur den Bereich des Textes abdeckt? Also der Text ist ja nicht so groß wie die DIV-Box wegen padding - die Scrollbar aber schon! Das sieht nicht so schön aus.


    _________
    Edit:
    Konnte das mit der Scrollbar jetzt lösen (hab ein div im div erstellt)
    Bleibt nur noch das Problem mit der Smartphoneinkompatibilität.

    Einmal editiert, zuletzt von showtime (30. Oktober 2012 um 11:34)