Florian: Problem: Weißer Rand von <body>

problematische Seite

Hallo erstmal, nachdem mir gestern schon so schnell und gut bei meinem Fehler mit JS geholfen wurde, habe ich wieder einen Fehler gefunden. Diesmal kein JS, sondern CSS und/oder HTML.

Mein Problem ist Folgendes: Auf meiner Website wird seit gestern Abend ein weißer Balken hinter meiner Navigationsleiste angezeigt. Ich habe herausgefunden, dass dies eigentlich der von hinten "durchscheinende" <body> ist (denn wenn ich die font-size für body auf 0 setze, ist der Balken weg).

Vielleicht kann sich das jemand mal anschauen... ich bin ja eher am rumbasteln als am Fehler lösen.

  • Florian

Hier noch mal die Struktur:

flozzed.de flozzed.de flozzed.de/css flozzed.de/css flozzed.de/inc flozzed.de/inc

akzeptierte Antworten

  1. problematische Seite

    @@Florian

    Hier noch mal die Struktur:

    Du glaubst nicht wirklich, dass die Dateistruktur hier hilfreich wäre, oder?

    Ein Blick in den Quelltext deiner problematischen Seite ist es:

    1. Fehler:

    <html lang="en">
    

    Dein Seiteninhalt ist nicht auf englisch, sondern auf deutsch. Also muss die Angabe der Sprache lang="de" lauten.

    2. Fehler:

    <head>
        <!-- … (viel Zeugs) -->
        <![endif]-->	<meta charset="utf-8">
    </head>
    

    Die Angabe der Zeichencodierung muss in den ersten 1024 Bytes des Dokuments erfolgen. Bei dir sind es aber 1699 Bytes. Die Zeichencodierung als allererstes im head angeben.

    3.Fehler:

    </head>
    
    <!-- Navigation -->
    	<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    

    Hier wird implizit ein body-Element geöffnet, da nav in dieses reingehört.

        </nav>
    <body id="page-top">
    

    Es darf nur einen body geben. Das <body>-Start-Tag muss vor dem <nav>-Start-Tag stehen.

    Korrigiere die Fehler. Wenn das Darstellungsproblem noch auftritt, dann meldest du dich wieder.

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. problematische Seite

      Du glaubst nicht wirklich, dass die Dateistruktur hier hilfreich wäre, oder?

      Ich dachte, es könnte sich bei dem Fehler um irgendwas handeln, dass ich mit den <?php include(...); ?> falsch gemacht habe... Aufgrund der Tatsache, dass ich wenn ich <?php include(inc/nav.php); ?> entfernt habe, der weiße Balken auch verschwunden ist. Das hängt aber dann vermutlich mit dem 2. <body> Element zusammen, dass ich damit versehentlich geöffnet habe...

      Ich habe den <body> Tag nun über die Navigation gesetzt:

      <body id="page-top">
      
      <!-- Navigation -->
      	<?php include("inc/nav.html"); ?>
      

      und die html lang auf "de" gesetzt:

      <!DOCTYPE html>
      <html lang="de">
      

      sowie das <meta charset="utf-8"> ziemlich direkt an den Anfang gesetzt.

      Das Problem ist weiterhin vorhanden, was mache ich falsch? Habe ich bei der Fehlerbehebung wieder einen Fehler eingebaut?

      1. problematische Seite

        Hallo Florian,

        Das Problem ist weiterhin vorhanden, was mache ich falsch? Habe ich bei der Fehlerbehebung wieder einen Fehler eingebaut?

        https://validator.nu/?doc=http%3A%2F%2Fflozzed.de%2F

        Bis demnächst
        Matthias

        --
        Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
        1. problematische Seite

          https://validator.nu/?doc=http%3A%2F%2Fflozzed.de%2F

          Auch wenn diese Seite nützlich ist, hatten die Fehler scheinbar nichts mit meinem Problem zu tun... Nach entfernen von fast allen Errors bleibt der weiße Balken bestehen.

          1. problematische Seite

            Hallo Florian,

            https://validator.nu/?doc=http%3A%2F%2Fflozzed.de%2F Auch wenn diese Seite nützlich ist, hatten die Fehler scheinbar nichts mit meinem Problem zu tun... Nach entfernen von fast allen Errors bleibt der weiße Balken bestehen.

            Dann kann die Fehlerursache ‚invalides HTML‘ ausgeschlossen werden, und wir können uns jetzt anderen Fehlerquellen zuwenden.

            Bis demnächst
            Matthias

            --
            Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
          2. problematische Seite

            Hallo Florian,

            Vor <nav id steht &#65279;.

            http://stackoverflow.com/questions/9691771/why-is-65279-appearing-in-my-html

            Bis demnächst
            Matthias

            --
            Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
            1. problematische Seite

              Vor <nav id steht &#65279;.

              http://stackoverflow.com/questions/9691771/why-is-65279-appearing-in-my-html

              Vielen Dank! Das Problem ist nun behoben :)

              1. problematische Seite

                Hallo Florian,

                Vielen Dank! Das Problem ist nun behoben :)

                Schau trotzdem noch mal in den Validator.

                Bis demnächst
                Matthias

                --
                Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
            2. problematische Seite

              @@Matthias Apsel

              Vor <nav id steht &#65279;.

              Nein, da steht keine Zeichenreferenz.

              Und was zum Geier ist 65279? Die dezimale Angabe von Codepoints ist zu nichts gut.

              Ah, U+FEFF. Ja, da steht ein BOM mitten im Quelltext, wo es nichts zu suchen hat.

              Wie hast du’s gefunden?

              Irgendwas mit Whitespace musste der weiß gebliebene Bereich ja zu tun haben.

              LLAP 🖖

              --
              „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
              „Hat auf dem Forum herumgelungert …“
              (Wachen in Asterix 36: Der Papyrus des Cäsar)
              1. problematische Seite

                Hallo Gunnar Bittersmann,

                Vor <nav id steht &#65279;.

                Nein, da steht keine Zeichenreferenz.

                Stand damals.

                Wie hast du’s gefunden?

                Quelltextansicht des Browsers [strg+u] (windows)

                Irgendwas mit Whitespace musste der weiß gebliebene Bereich ja zu tun haben.

                Ja, nachdem es kein margin oder padding irgendeines der beteiligten Elemente war. Und der Tipp mit unsichtbarem Whitespace kam bereits vom TO: Der Streifen verschwände, wenn die Schriftgröße auf Null gesetzt wird.

                Bis demnächst
                Matthias

                --
                Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                1. problematische Seite

                  @@Matthias Apsel

                  Wie hast du’s gefunden?

                  Quelltextansicht des Browsers [strg+u] (windows)

                  Quelltextansicht im Firefox (OS X) hat kein BOM gezeigt:

                  Screenshot

                  Den betreffenden Abschnitt in Richard Ishidas Unicode code converter kopiert: Da isses.

                  Screenshot

                  LLAP 🖖

                  --
                  „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                  „Hat auf dem Forum herumgelungert …“
                  (Wachen in Asterix 36: Der Papyrus des Cäsar)
        2. problematische Seite

          @@Matthias Apsel

          https://validator.nu/?doc=http%3A%2F%2Fflozzed.de%2F

          Übersetzt: Die Entity-Referenzen müssen mit ; abgeschlossen werden: unregelm&auml;&szlig;ig.

          Allerdings sollten hier gar keine Entity-Referenzen [1] verwendet werden, sondern die richtigen Zeichen: unregelmäßig. Umlaute und ß sind keine Sonderzeichen.

          Das & hingegen ist in HTML ein Sonderzeichen und muss escapet werden (&amp;):
          <a href="https://www.youtube.com/watch?v=Am8eE8T0IPs&amp;list=UL" class="video-box" target="_blank">.

          Außerdem wird angemeckert, dass span keinen flow content (wie p etc.) enthalten darf (sondern nur phrasing content). Zum Gruppieren von flow content brauchst du ein anderes Element wie div.

          LLAP 🖖

          --
          „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
          „Hat auf dem Forum herumgelungert …“
          (Wachen in Asterix 36: Der Papyrus des Cäsar)

          1. Ich hinke hinterher. Der Artikel wird demnächst an der Stelle auch wieder auf deutsch verfügbar sein. In der Zwischenzeit gibt’s die Übersetzung der vorigen Version des Artikels noch von mir. ↩︎