Jan Haan: Umstellung auf application/xhtml+xml -> Layout kaputt

Grüße!

Ich arbeite seit ein paar Tagen an einer Website, die auch, bis ein paar kleinigkeiten gut lief, bis ich, wegen des nicht funktionieren wollenden UTF-8 im PHP-Code ein header('content-type: application/xhtml+xml; charset=utf-8'); hinzufügte, was auch das gewünschte Ergebnis brachte. Nach ein paar Korrekturen kleinerer Art (Mein Browser nahm das Wörtchen "strict" wohl endlich ernst), besitzt meine Seite nur leider ein Problem:

  1. Sie hat scheinber einen die Seite nicht 100% ausfüllenden body => Hintergrundfarbe ist nicht auf der ganzen Seite vorhanden (nach einem html { background: #bla; } gings im Firefox - nur in Linux Oo - , doch im WebKit/Safari sowie im Firefox auf anderen Systemen immernoch nicht).

  2. Sie funktionierte im IE nie so wie sie sollte (Wie es nach der Umstellung ist, weiß ich nicht, weil ich keinen Zugang zu einem IE habe)

Die URL der Seite ist: http://nonsense.jan.drainmusic.de
Die CSS Datei befindet sich hier: http://nonsense.jan.drainmusic.de/stylesheet.css
Ein Screenshot mit dem Problem gibt es hier:
http://nonsense.jan.drainmusic.de/Screenshot.png (ich meine den weißen Bereich, der definitv unerwünscht ist!)

  1. hi,

    Ich arbeite seit ein paar Tagen an einer Website, die auch, bis ein paar kleinigkeiten gut lief, bis ich, wegen des nicht funktionieren wollenden UTF-8 im PHP-Code ein header('content-type: application/xhtml+xml; charset=utf-8'); hinzufügte, was auch das gewünschte Ergebnis brachte.

    Was soll das mit UTF-8 zu tun haben?
    Wieso sollte UTF-8 nicht "funzen", wenn du "Content-Type: text/html; Charset=utf-8" verwendetest?

    1. Sie hat scheinber einen die Seite nicht 100% ausfüllenden body => Hintergrundfarbe ist nicht auf der ganzen Seite vorhanden (nach einem html { background: #bla; } gings im Firefox - nur in Linux Oo - , doch im WebKit/Safari sowie im Firefox auf anderen Systemen immernoch nicht).

    Dann wirst du wohl eine Mindesthöhe vorgeben müssen.

    1. Sie funktionierte im IE nie so wie sie sollte (Wie es nach der Umstellung ist, weiß ich nicht, weil ich keinen Zugang zu einem IE habe)

    Natürlich nicht - der versteht immer noch kein XHTML als application/xhtml+xml.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hmm, das hilft mir jetzt nicht wirklich weiter, ich denke das Problem liegt daran, dass der Firefox sie erst jetzt als richtige XHTML erkennt, und ie dementsprechend anders rendert. Eine Mindesthöhe will ich auf keinen Fall festlegen, da sie vom Inhalt abhängt und sich rägelmäßig ändert.
      Was mich halt wundert, ist, dass der body vorher immer die Seite ausfüllte und wie ich ihn dazu bringe dies nun wieder zu tun.

      1. hi,

        Hmm, das hilft mir jetzt nicht wirklich weiter,

        Verwundert nicht allzu sehr - wenn du bspw. auf die Rückfrage, warum du "für UTF-8" überhaupt eine Auslieferung als XML zu brauchen _glaubst_, gar nicht eingehst.

        ich denke das Problem liegt daran, dass der Firefox sie erst jetzt als richtige XHTML erkennt,

        Natürlich, erst jetzt wird sie durch den XML-Parser geschickt - vorher wurde sie durch den Tagsoup-Parser gejagt.

        Eine Mindesthöhe will ich auf keinen Fall festlegen, da sie vom Inhalt abhängt und sich rägelmäßig ändert.

        Denk scharf nach - warum heisst eine Mindesthöhe wohl _Mindest_höhe?

        Was mich halt wundert, ist, dass der body vorher immer die Seite ausfüllte und wie ich ihn dazu bringe dies nun wieder zu tun.

        Mit einer Mindesthöhe, oder durch Verzicht auf die ominös begründete Auslieferung des ganzen als XML.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Ich habe mich stark gewundert, warum ich xml für utf-8 brauchte, was mir natürlicherweise sehr komisch vorkam, nur hat der Firefox es nie als utf-8 trotz richtigen <?xml ... und <meta ... Tag erkannt, nun macht er dies. Außerdem denk ich, ist es sowieso besser, wenn ich nun dadurch gezwungen werde, standartkomform zu schreiben.
          Ich wollte dich nicht kritisieren, falls du das so verstanden hast :)
          Eine Mindesthöhe, wird mir da wohl wenig denken, schätze ich mal, da er dann ja _mindestens_ so hoch ist, doch immernoch nicht hoch genug, wenn die Seite darüber hinaus ragt...
          Ich durfte außerdem gerade beobachten, dass diese Problem in einer älteren Gecko Version nicht auftaucht.

          1. Hallo,

            Ich habe mich stark gewundert, warum ich xml für utf-8 brauchte, was mir natürlicherweise sehr komisch vorkam, nur hat der Firefox es nie als utf-8 trotz richtigen <?xml ... und <meta ... Tag erkannt, nun macht er dies.

            Die encoding- und Metaangaben sind zwar sinnvoll, bewirken aber im browser meist nicht, dass der entsprechende Zeichensatz evrwendet wird. Priorität hat der HTTP-Header. Oder der Browser erkennt die Zeichenkodierung automatisch an der Beschaffenheit des Dokuments.

            Außerdem denk ich, ist es sowieso besser, wenn ich nun dadurch gezwungen werde, standartkomform zu schreiben.

            Deine Entscheidung, aber ich würde den Punkt wirklich beachten, dass du damit IE-Benuterz ausschließt (ganz so radikal würde ich es nicht machen).

            Eine Mindesthöhe, wird mir da wohl wenig denken, schätze ich mal, da er dann ja _mindestens_ so hoch ist, doch immernoch nicht hoch genug, wenn die Seite darüber hinaus ragt...

            Wenn die Seite drüber hinausragt wächst die Höhe doch mit. Sonst wäre es Höhe und nicht Mindesthöhe (d.h. mindestens so groß, kann aber wachsen). Wo liegt das Problem bei diesem Begriff?

            Ich durfte außerdem gerade beobachten, dass diese Problem in einer älteren Gecko Version nicht auftaucht.

            Auch Gecko war mal ne Niete. Erstaunliche Besserung, findest du nicht auch?

            gruß;

            1. Guuut! Das hat mir nun wirklich geholfen! Okay, ich hab nun vorerst wieder auf text/html umgestellt, was den IE-Nutzern nun so weit hilft, dass sie gesagt bekommen, dass die Seite nicht funktioniert in ihrem Browser, sie aber doch den Inhalt lesen können.
              Aber es interessiert mich schon, wie ich das mit xhtml umsetzten könnte. Wie meinst du das denn mit der Mindesthöhe? Ich weiß schon was Mindest... heißt, nur kenn ich nur die Angabe einer absoluten Höhe und wenn die Mindesthöhe nun kleiner ist, als das Browserfenster, was passieren kann, dann hab ich wieder nen weißen Rand :(

              Danke!

              1. Hello out there!

                Wie meinst du das denn mit der Mindesthöhe?

                [CSS2 §10.7]

                wenn die Mindesthöhe nun kleiner ist, als das Browserfenster, was passieren kann

                Kann nicht. Es war doch von 100% die Rede, IIRC.

                See ya up the road,
                Gunnar

                --
                „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
              2. Hallo,

                Aber es interessiert mich schon, wie ich das mit xhtml umsetzten könnte. Wie meinst du das denn mit der Mindesthöhe? Ich weiß schon was Mindest... heißt, nur kenn ich nur die Angabe einer absoluten Höhe und wenn die Mindesthöhe nun kleiner ist, als das Browserfenster, was passieren kann, dann hab ich wieder nen weißen Rand :(

                Üblicherweise erstreckt sich in XHTML das html-Element über den ganzen Viewport, während body nur den Inhalt umrahmt.
                In HTML ist es meines Wissens lediglich so, dass sich body bereits über den Viewport erstreckt (also vermutlich das, was du bisher gesehen hast).

                Gruß;

      2. Hallo,

        Hmm, das hilft mir jetzt nicht wirklich weiter, ich denke das Problem liegt daran, dass der Firefox sie erst jetzt als richtige XHTML erkennt, und ie dementsprechend anders rendert.

        Ja, der Firefox erkennt die Seite jetzt erst als XHTML an. In CSS wird definiert, dass sich html und body in XHTML anders verhalten als in HTML. Bei meinen Bedürfnissen hat es bisher immer gereicht, die body-Eigenschaften einfach auf html zu übertragen.

        Es ist zwar gut, Dokumente als echtes XHTML verarbeitet anzeigen zu lassen. Allerdings schließt du den IE aus, wenn du XHTML tatsächlich als application/xhtml+xml versendest, da der diese Dokumente dann zum Download anbieten will.

        Meiner Meinung nach spricht nichts dagegen, XHTML als text/html zu versenden, du soltlest die XHTML-Dokumente nur entsprechend validieren lassen und eventuell als XML-Dokument anzeigen lassen, um zu überprüfen, wie gut du gearbeitet hast :)

        Gruß;

        1. Ja gut, kann ich machen, nur dann würde ich gerne wissen, warum der Firefox meine utf-8 kennzeichnung sonst nicht schluckt.

          Danke für den Hilfreichen Kommentar!

      3. Hi,

        Hmm, das hilft mir jetzt nicht wirklich weiter,

        auch mit der Version 7 kann der IE immer noch kein XHTML. Punkt. Da ist nichts zu helfen, solange Dir niemand eine Zeitmaschine schenkt, mit der Du verhindern kannst, dass dieser Dreck entwickelt wird. Ohne dies wirst Du mit einem Browser zu rechnen haben, der XHTML-Code als fehlerhaftes HTML misserkennt, dessen Fehler er weitgehend korrigieren kann. Der MIME-Type application/xhtml+xml ist ihm gänzlich unbekannt, er schaltet zum Default application/octet-stream.

        Und auf die Gefahr hin, mich zu wiederholen: Punkt.

        ich denke das Problem liegt daran, dass der Firefox sie erst jetzt als richtige XHTML erkennt,

        Nein, Firefox erkennt XHTML als solches schon in sehr "schwachen" Ausprägungen.

        Eine Mindesthöhe will ich auf keinen Fall festlegen, da sie vom Inhalt abhängt und sich rägelmäßig ändert.

        Eine Mindesthöhe, die 100% des Viewports beträgt, wird auch beim Auftreten einer Ragel (was immer das ist) zu einer Höhe von mindestens 100% des Viewports führen, bei beliebig viel oder wenig Inhalt; mit Betonung auf "mindestens". Deswegen nennt man es Mindesthöhe.

        Was mich halt wundert, ist, dass der body vorher immer die Seite ausfüllte

        Ja, das ist in der Tat verwunderlich. Bedenke, dass selbst Firefox einen Quirks-Mode besitzt.

        und wie ich ihn dazu bringe dies nun wieder zu tun.

        Folge einfach den Regeln von CSS. Eine Höhe erscheint nicht plötzlich. Sie wird vergeben.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
  2. hallo,

    1. Sie hat scheinber einen die Seite nicht 100% ausfüllenden body => Hintergrundfarbe ist nicht auf der ganzen Seite vorhanden

    Das kann ich mit Konqueror, Firefox und Opera (alles Linux) nicht nachvollziehen.

    1. Sie funktionierte im IE nie so wie sie sollte

    IE (6 und 7) zeigt gleich gar nichts, sondern fragt, ob ich etwas downloaden möchte. Opera und Firefox zeigen in WinXP und WinVista keinerlei Abweichungen von dem, was sie unter Linux zeigen.

    Ein Screenshot mit dem Problem

    Ist nicht nachvollziehbar. So eine Anzeige bekomme ich nicht.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|