Darstellungsprobleme mit Highlight-Source-Pro und IE6

Das Problem tauchte nur im IE6 auf und läßt sich einfach beschreiben: Nach jedem Source-Highlight-Block war der folgende nachfolgende Inhalt um ca. 50 Pixel nach links verschoben; in meinem Falle (nachdem das Eltern <div> mit overflow:hidden; ausgestattet ist) sogar größtenteils unsichtbar. Nach langer Suche bin ich darauf gekommen, dass der IE6 mit den Border-Deklarationen der Klasse „.geshi“ Probleme hat. Eigentlich sollte die linke dicke Rahmenlinie dazu dienen, bei zeilen-nummerierten Quelltexten die Ziffern grauer (#dddddd) als den Rest (#eeeeee) zu hinterlegen.

Defacto funktioniert das aber nicht:

• Zum einen wird in jedem Browser das Padding der <ol>-Liste anhand der ersten (= niederwertigsten) Ziffer bestimmt und eben nicht anhand des Punkts. Das hat dann zur Folge, dass zwar die Ziffer über der graueren Border plaziert werden, der Punkt aber nicht.
• Zum anderen kommt eben der IE6 damit nicht klar und verschiebt reproduzierbar nachfolgenden Source um genau die Border-Breite nach links.

Ich habe jetzt als Lösung die Border-Deklarationen entfernt aus der „all.css“ im highlight-source-pro Ordner der Instanz und ein GIF-Hintergrund (2000×1 Pixel) mit zwei verschieden grauen Bereichen erstellt. Die CSS schaut wie folgt aus:

Neue Klassen für IE6-Kompatibilität
.geshi {
  width: 100%;
  white-space:nowrap;        /* Keinen Zeilenumbruch */
  background:url(b.gif);     /* neu erstellte Grafik, 2000x1, 40px #dddddd, Rest #eeeeee */
  border:1px dotted #666666;
  overflow: auto;            /* Für Mozilla; DIV-Tag wächst mit, daher nur x-bar */
  margin: 5px 0px 5px 0px;   /* Platz oben und unten */
  overflow-x: auto;          /* Für IEs: Einziger Weg, um im IE6 die horizontale Bar zu bekommen */
  overflow-y: hidden;        /* Für IEs: Einziger Weg, die vertikale Bar zu verstecken */
  padding-bottom:20px;       /* Für IEs: Würden sonst die letzte Zeile verschlucken; */
                             /*   Mozilla zeigt eben unten 20px leer an; ist zu verschmerzen. */
  font-family:"Courier New", monospace;
}

.geshi ol { margin-left:22px; padding:0; /* border-left:3em solid #ddd;*/ }
.geshi ol, .geshi ol li { list-style-type:decimal-leading-zero; }
.geshi .head { font-style:italic; font-weight:bold; color:#666; /*border-left:3em solid #ddd;*/ padding:0.5em 0 0 0.5em; }
.geshi.no ol { border-left:none; padding-left:1em; }
.geshi.no .head { border-left:none; padding-left:1em; }
.geshi.no ol, .geshi.no li { list-style-type:none; }

Kleine Anmerkung zum margin-left des <ol>-Selectors: Hier nur 22px, weil die Zählung in den Browsern bei der ersten Ziffer beginnt. Hätten wir beispielsweise die Ziffer „22.“, so würde die Zählung links von der zweiten „2“, also zwischen beiden „2“ern beginnen.

Vorteil: Es klappt auch im IE6 wie gewünscht.

Nachteil: Nicht mehr XHTML-konform; wenn man die Schrift vergrößert, werden irgendwann die Ziffern über den dunkleren grauen Bereich hinauswachsen. Beim Verkleinern passiert das nicht, da hier das padding in Pixeln greift und nicht mit verkleinert wird.