HTML/CSS - Bugs & Hacks - Duplicate Characters Bug
1. Die Abschnitte
- Überblick
- Grundsätzliche Tipps für den IE
- Conditional Comments
- Double Margin Bug
- Three Pixel Text Jog
- Listen Bug
- Duplicate Characters Bug
- Fieldset Bleed Bug
2. Das Problem
3. Der Code
body, div
{
margin: 0px;
padding: 0px;
}
p
{
margin: 0px;
padding: 5px;
}
div.rahmen
{
width: 420px;
margin: 0px auto;
}
div.blubb
{
float: left;
width: 118px;
border: 1px solid #000;
}
div.blubber
{
border: 1px solid #f00;
width: 298px;
float: left;
}
<div class="rahmen">
<div class="blubb">
<p>Blubb</p>
</div>
<!-- Ende Blubb -->
<!-- Anfang Blubber -->
<div class="blubber">
<p>Blubber</p>
</div>
</div>
4. Der Bug
Wir haben zwei Blockelemente, die beide gefloatet werden. Und auf einmal erscheinen wie von Geisterhand ein paar Buchstaben aus dem rechten Bereich unterhalb der beiden Block-Elemente.
5. Ursache
Man glaubt es kaum, es sind die Kommentare! JAWOHL, die Kommentare <!-- Ende Blubb --> und <!--
Anfang Blubber -->. Wichtig daran ist noch zu wissen, dass es beide sind. Einer alleine kann diesen Bug nicht
verursachen. Dazu gibt es im Internet etliche Erläuterungen, die aber meinen zugegebenermaßen geringen Erfahrungen mit diesem
Bug teilweise widersprechen. Ist aber auch nicht so wichtig, Hauptsache man weiß, wie man ihn beseitigt.
6. Die Lösung
Möglichkeit 1
Ihr entfernt einen Kommentar und fertig.
Möglichkeit 2
Solltet Ihr in einer größeren Firma mit einem Template-Entwickler arbeiten, der euch den Kopf abreißt, wenn ihr euch an seinen heiligen Kommentaren vergreift, so hilft dies:
* html div.blubber
{
margin-left: -3px;
}
Das ist nämlich das Problem. Aus irgendeinem unerfindlichen Grund verschiebt der Internet Explorer 6 den Inhalt des rechten Bereichs um 3 Pixel nach rechts und weiß dann nicht, wohin damit. Also fängt er an zu raten und produziert diese herrlichen Geisterbuchstaben.
7. Fazit
Eigentlich hätten die Entwickler von Microsoft für diesen Fehler den "Creative CSS Bug Award" verdient, wenn es nicht so traurig wäre. Beten wir alle zu unserem Schöpfer, dass der Internet Explorer 6 bald das Zeitliche segnet. Und wenn es geht, seinen jungen und auch nicht ganz koscheren Bruder mit der Nummer 7 gleich mitnimmt.
8. Hinweis
Als ich das erste Mal mit diesem Bug konfrontiert wurde, war ich noch stolz wie Oskar. Schaut mal, ich habe es geschafft, das zu
produzieren. Leider verfolgte mich dieser Darstellungsfehler seitdem für eine lange Zeit. Und mittlerweile muss ich auch sagen, dass
es nicht nur an den Kommentaren liegt. Wenn also obiger Hack nicht funktioniert, so solltet ihr wie hier
unter Punkt 8 beschrieben, mit einem zusätzlichen <div style="clear:both"> <div> arbeiten.