nicht angemeldet
Hallo,
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;
}
Matthias Apsel
Der Martin
MudGuard
Gunnar Bittersmann