Kommentare in HTML verursachen Ausgaben
0 0 0 
Felix Riesterer
1 0 0 
Matthias Apsel
0 
Der Martin
0 
MudGuard
0
0 Matthias Apsel
0
Kommentare in HTML verursachen Ausgaben
Gunnar BittersmannHallo,
der folgende Quelltext liefert unerwünschte Ausgaben im IE9. Kritisch ist der Kommentar <!-- Ende von inhalt --> weiter unten. Dieser Kommentar verursacht eine Ausgabe wie im Bildschirmfoto dokumentiert.
Wenn ich den Kommentar entferne, verschwindet die gesamte markierte Zeile. Wenn ich weitere Kommentare hinzufüge, verlängert sich die unerwünschte Ausgabe jeweils um 2 Zeichen. Dabei wird der Inhalt des Footer-Bereichs rückwärts verwendet. Der nächste Kommentar ließe also "ter" erscheinen.
Aus pädagogischen und didaktischen Gründen will ich den Kommentar nicht entfernen.
Wer kann mir diesen Effekt erklären? Wie kann ich die unerwünschte Ausgabe verhindern, ohne den Kommentar zu entfernen?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css"/>
<title>Die Oktonauten</title>
</head>
<body>
<div id="wrapper">
<div id="kopf">
<h1>
<a href="index.php"><img src="images/logo2.png" width="64" /></a>
Die Oktonauten
</h1>
</div>
<div id="navi">
<h3>Figuren</h3>
<ul>
<li><a href="barnius.php">Käptn Barnius</a></li>
<li><a href="kwasi.php">Kwasi</a></li>
<li><a href="peso.php">Peso</a></li>
</ul>
<h3>Fahrzeuge</h3>
<ul>
<li><a href="okto.php">Oktopod</a></li>
<li><a href="gup-a.php">GUP-A</a></li>
<li><a href="gup-b.php">GUP-B</a></li>
</ul>
</div>
<div id="inhalt">
<h2>Käptn Barnius</h2>
<img src="images/barnius240.png" alt="Käptn Barius" />
<h3>Eigenschaften</h3>
<ol>
<li>Kommandant</li>
<li>Eisbär</li>
<li>Sehr stark</li>
</ol>
</div> <!-- Ende von inhalt -->
<div id="footer">Footer</div> <!-- Ende von footer -->
</div> <!-- Ende von wrapper -->
</body>
</html>
Hier der Inhalt der CSS-Datei:
div {
float: left;
}
#kopf {
width: 40em;
background-color: #b5f6f2;
}
#navi {
width: 10em;
background-color: #f47f2f;
}
#inhalt {
width: 30em;
color: #006600;
}
#footer {
width: 40em;
background-color: #b5f6f2;
}
#wrapper {
width: 40em;
background-image: url(images/wrapper_bg.png);
}
body {
background-color: #b5f6f2;
}
#navi ul {
list-style-type: none;
margin: 0.5em;
}
#navi a {
border-left: 0.5em solid #4030b1;
display: block;
text-decoration: none;
padding: 2px;
padding-left: 4px;
background-color: #4030b1;
color: #ffffff;
}
#navi a:hover,
#navi a:active {
background-color: #9EB39A;
border-left: 0.5em solid #000000;
}
a img {
border: none;
}
#kopf h1 {
color: #40c0db;
font-family: Arial;
}
#kopf a {
text-decoration: none;
}
-
Hier der Link zum Bildschirmfoto
-
Dieser Kommentar verursacht eine Ausgabe wie im Bildschirmfoto dokumentiert.
Welches Bildschirmfoto?
Das U+FEFF am Anfang der Zeile ist das einzig ungewöhnliche was mir auffällt (nebst einem fehlenden alt-Attribut).
-
Lieber suit,
Das U+FEFF am Anfang der Zeile
wo siehst Du das (und wie??)?
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Lieber suit,
Das U+FEFF am Anfang der Zeile
wo siehst Du das (und wie??)?
Kopier den Inhalt des Postings in einen Texteditor und schaus dir an - es ist unzweifelhaft da. Direkt am Anfang der Zeile - da ist ein ZERO WIDTH NO-BREAK SPACE gefolgt von 6 Leerzeichen.
-
Prima, dann hat das Kind einen Namen. Aber kann dieses BOM denn wirklich diese Ausgabe erzeugen? Und warum erscheint die Ausgabe nicht, wenn ich den Kommentar entferne?
Und was hat das ganze mit den Zeichensätzen zu tun? Ich dachte, ich hätte ein wenig Durchblick, aber der trübt sich gerade mächtig ein. Hier noch einmal die genaue Beschreibung meines Projekts.
Die Dateien liegen auf einem Webserver, ich glaube Apache. Falls das wichtig ist, besorge ich mehr Infos.
Meine Seiten folgen alle dem gleichen Muster. Es wird der Kopfbereich includet, dann kommt der eigentliche Inhalt der Seite, dann der Rest. Hier am Beispiel Kwasi (aus Notepad++):
<?php include 'kopf.inc.php';?>
<h2>Kwasi</h2>
<?php include 'fuss.inc.php';?>
Die Datei kopf.inc.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css"/>
<title>Die Oktonauten</title>
</head>
<body><div id="wrapper">
<div id="kopf">
<h1>
<a href="index.php"><img src="images/logo2.png" width="64" alt="Oktonatuen-Logo"/></a>
Die Oktonauten
</h1>
</div><div id="navi">
<h3>Figuren</h3>
<ul>
<li><a href="barnius.php">Käptn Barnius</a></li>
<li><a href="kwasi.php">Kwasi</a></li>
<li><a href="peso.php">Peso</a></li>
</ul><h3>Fahrzeuge</h3>
<ul>
<li><a href="okto.php">Oktopod</a></li>
<li><a href="gup-a.php">GUP-A</a></li>
<li><a href="gup-b.php">GUP-B</a></li>
</ul>
</div> <!-- Ende von navi --><div id="inhalt">
Die Datei fuss.inc.php:
</div><div id="footer">Footer</div> <!-- Ende von footer -->
</div> <!-- Ende von wrapper --></body>
</html>Die Dateien kopf.inc.php und fuss.inc.php sind tatsächlich UTF-8 codiert.
Jetzt habe ich folgende zwei Fälle.
Fall 1 am Beispiel der index.php. Laut Meta-Tag im Kopf sei der Quelltext UTF-8, tatsächlich ist er aber ANSI. Das Ergebnis ist dem Augenschein nach korrekt, wie hier zu sehen:
Und hier der zweite Fall. Wieder laut Meta-Tag UTF-8 und im Dateisystem tatsächlich auch UTF-8. Seltsamerweise gibt es hier ungewöhnliche Effekte, siehe Bild.
-
Wie bereits erwähnt verursachen nun Kommentare die Ausgabe unterhalb des Bereichs mit dem Inhalt Footer.
-
Im Navigationsbereich werden die Links auseinandergezogen.
Die Kwasi-Datei hat im Browser dann auch tatsächlich zweimal den U+FEFF , jeweils vor dem eingefügten Quelltext.
Ich verstehe nicht, warum ich Schwierigkeiten habe, wenn Dateien tatsächlich die richtige Codierung aufweisen, und diese Schwierigkeiten nicht vorhanden sind, wenn die Codierung versehentlich nicht stimmt.
BTW: Ich habe mich registriert, aber ich finde die Anmeldung nicht :-(
-
Om nah hoo pez nyeetz, Monash1!
Speichere die Dateien einfach als UTF ohne BOM und schon gibt es auch kein BOM.
BTW: Ich habe mich registriert, aber ich finde die Anmeldung nicht :-(
Benutzerspezifische Ansicht
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo,
Prima, dann hat das Kind einen Namen. Aber kann dieses BOM denn wirklich diese Ausgabe erzeugen? Und warum erscheint die Ausgabe nicht, wenn ich den Kommentar entferne?
tja, die Wege des IE sind unergründlich ...
Und was hat das ganze mit den Zeichensätzen zu tun?
Nichts. Aber dafür mit Zeichencodierungen.
Meine Seiten folgen alle dem gleichen Muster. Es wird der Kopfbereich includet, dann kommt der eigentliche Inhalt der Seite, dann der Rest.
Ja. Und wenn du die Dateien alle als UTF-8 mit BOM gespeichert hast, hat auch jede include-Datei diese Marke am Anfang, die mitten im Dokument nichts zu suchen hat. Am Dokumentanfang dagegen stört sie den Browser nicht, wohl aber den PHP-Interpreter, wenn du noch irgendwelche HTTP-Header ausgeben möchtest.
Die Dateien kopf.inc.php und fuss.inc.php sind tatsächlich UTF-8 codiert.
Die Hauptdatei auch?
Fall 1 am Beispiel der index.php. Laut Meta-Tag im Kopf sei der Quelltext UTF-8, tatsächlich ist er aber ANSI.
Das meta-Element interessiert normalerweise nicht; die Angabe, die der Server im HTTP-Header liefert, hat Vorrang. Wie sieht die aus?
Und hier der zweite Fall. Wieder laut Meta-Tag UTF-8 und im Dateisystem tatsächlich auch UTF-8. Seltsamerweise gibt es hier ungewöhnliche Effekte, siehe Bild.
Kann es sein, dass dein Server als Codierung irgendeine ISO-Latin-Variante angibt, etwa ISO-8859-1? Das wäre natürlich problematisch, wenn die tatsächliche Codierung UTF-8 ist. Dann müsstest du aber auch mit Umlauten Darstellungsprobleme haben.
Ich verstehe nicht, warum ich Schwierigkeiten habe, wenn Dateien tatsächlich die richtige Codierung aufweisen, und diese Schwierigkeiten nicht vorhanden sind, wenn die Codierung versehentlich nicht stimmt.
Das verstehe ich auch (noch) nicht; dafür haben wir noch zu wenig Einblick in deine Konfiguration. Vielleicht ist es auch wirklich nicht rational erklärbar, sondern tatsächlich ein IE-Bug.
BTW: Ich habe mich registriert, aber ich finde die Anmeldung nicht :-(
Hat Matthias ja schon gesagt. Alternativ: Einfach /my/ in der URL-Zeile ergänzen.
Ciao,
Martin--
Küssen ist die schönste Methode, eine Frau zum Schweigen zu bringen.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
Hi,
Prima, dann hat das Kind einen Namen. Aber kann dieses BOM denn wirklich diese Ausgabe erzeugen? Und warum erscheint die Ausgabe nicht, wenn ich den Kommentar entferne?
Wieviele Kommentare hast Du insgesamt pro Seite?
Es gab mal (IE 6) Probleme, wenn sehr viele Kommentare in einer Seite drinwaren.<!DOCTYPE html>
ok, also HTMl5.
<div id="navi">
HTML5 kennt das nav-Element. Also <nav> statt <div id="navi">.
</div> <!-- Ende von navi -->
Dann stünde hier </nav> - und der Kommentar wäre überflüssig ...
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
-
-
-
Welches Bildschirmfoto?
Der Link war in meinem ursprünglichen nicht dabei. Jetzt hier (s. oben).
-
-
Om nah hoo pez nyeetz, Monash!
Wenn ich den Kommentar entferne, verschwindet die gesamte markierte Zeile. Wenn ich weitere Kommentare hinzufüge, verlängert sich die unerwünschte Ausgabe jeweils um 2 Zeichen. Dabei wird der Inhalt des Footer-Bereichs rückwärts verwendet. Der nächste Kommentar ließe also "ter" erscheinen.
- Mit welchem Programm bearbeitest du das HTML?
- Ist das tatsächlich der Quelltext, der beim Browser _ankommt_?
Matthias
--
1/z ist kein Blatt Papier.
-
Hallo Matthias,
- Mit welchem Programm bearbeitest du das HTML?
Ich setzte Notepad++ ein. Ich muss schon sagen, dass mir dieses skurrile Zeichen sehr verwundert. Woher es kommt kann ich nicht sagen. Bewusst eingegeben habe ich es nicht. Hier muss ich die Quellen genauer untersuchen.
- Ist das tatsächlich der Quelltext, der beim Browser _ankommt_?
Ja, ist der Quelltext aus dem IE9. Die Quelldatei besteht eigentlich aus zwei PHP-include-Anweisungen, die jeweils Kopf mit Navibereich und Fuß laden, sowie dazwischen dem eigentlichen Inhalt. Das skurile Zeichen befindet sich tatsächlich an der Schnittstelle zwischen dem Inhalt und dem include().
Leider kann ich erst morgen auf die Dateien zugreifen. Dann gibt es weitere Infos.Vielen Dank erst einmal an dieser Stelle für zahlreiche Beiträge!
Monash
-
-
Ja, ist der Quelltext aus dem IE9. Die Quelldatei besteht eigentlich aus zwei PHP-include-Anweisungen, die jeweils Kopf mit Navibereich und Fuß laden, sowie dazwischen dem eigentlichen Inhalt. Das skurile Zeichen befindet sich tatsächlich an der Schnittstelle zwischen dem Inhalt und dem include().
Dann ist es ziemlich unzweifelhaft ein Byte Order Mark
-
Kopiere ich die beiden Zeilen
</ol> </div> <!-- Ende von inhalt -->nach Notepad, so erhalte ich dort
</ol> ? </div> <!-- Ende von inhalt -->mit einem rätselhaften Fragezeichen.
Gruß H.
-
Kopiere ich die beiden Zeilen
</ol>
</div> <!-- Ende von inhalt -->
> nach Notepad, so erhalte ich dort > ~~~html </ol> > ? </div> <!-- Ende von inhalt -->mit einem rätselhaften Fragezeichen.
8 Bit Single-Byte Zeichencodierung - das ist schon ein Hund, gell :)
https://forum.selfhtml.org/?t=212036&m=1447735
Es handelt sich hierbei um U+FEFF ZERO WIDTH NO-BREAK SPACE
-
Om nah hoo pez nyeetz, suit!
Ergänzung:
Es handelt sich hierbei um U+FEFF ZERO WIDTH NO-BREAK SPACE
Die Linksammlung des SELFHTML-Wikis, die ich persönlich noch nicht zum Stöbern anregend finde, enthält an der entsprechenden Stelle einen Link zu einem String-Analyser, mit dem man solche und auch andere Zeichen identifizieren kann.
Matthias
--
1/z ist kein Blatt Papier.
-
Die Linksammlung des SELFHTML-Wikis, die ich persönlich noch nicht zum Stöbern anregend finde, enthält an der entsprechenden Stelle einen Link zu einem String-Analyser, mit dem man solche und auch andere Zeichen identifizieren kann.
Was ist hier der Unterschied zu UniView?
Das "Copy & paste"-Feld (rechts) tut doch genau dasselbe (darum wohl auch ein Link darauf) :)
Ich vermute, Ishida hat einfach zu viel Freizeit :D
-
Om nah hoo pez nyeetz, suit!
Was ist hier der Unterschied zu UniView?
Es ist wesentlich aufgeräumter.
Die Ergebnisse sehen schicker aus ;-)
Der Klick auf die Lupe führt zum Analyser.
Das "Copy & paste"-Feld (rechts) tut doch genau dasselbe (darum wohl auch ein Link darauf) :)
tus doch :p
Matthias
--
1/z ist kein Blatt Papier.
-
@@suit:
nuqneH
Ich vermute, Ishida hat einfach zu viel Freizeit :D
:-) Die fülle ich ihm schon.
Qapla'
--
„Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
-
-
-
-