Hallo,
ich möchte Codeschnipseln in pre-Elementen einen Rahmen und eine Hintergrundfarbe geben. Der Block soll auch eingerückt sein. Dazu benutze ich folgenden Code:
pre {margin:0 2em; padding:0.4em; border:1px solid #aaa; color:#000; background-color:#ccc;}
/*/*//*/
pre {fontfamily:monospace; fontsize:0.9em; whitespace:pre; borderwidth:0.1px; borderstyle:solid; bordercolor:white;}
/* */
Die zweite Regel innerhalb der Kommentare soll nur vom Netscape 4.x gelesen werden. Durch das Gemurkse über den Rahmen und das explizite whitespace funktioniert die durchgehende Hintergrundfarbe zumindest zufriedenstellend. Allerdings hat Netscape 4.x Probleme mit der relativen Schriftgröße. Je nach Fensterbreite und Textbreite im pre-Element variiert er die Größe nämlich.
Beispieldokument: http://home.t-online.de/home/dj5nu/fanhost/ns4prebg.html
Screenshot in NS 4.8, 15 KB: http://home.t-online.de/home/dj5nu/fanhost/ns4prebg1.png
Wenn der Text relativ kurz ist, wird die Box vergrößert, wenn er länger ist, reicht er teilweise über die Box hinaus, wenn er relativ lang ist, wird die Box vergrößert und die Schrift verkleinert.
Wenn eine feste px-Schriftgröße angegeben wird, ist die Schriftgröße einheitlich. Screenshot in NS 4.8, 13 KB: http://home.t-online.de/home/dj5nu/fanhost/ns4prebg2.png
Mir wäre es prinzipiell gleich, dort punktuell auf px umzusteigen, denn der Rest funktioniert mit em, nur wären dann die wichtigen Codeauschnitte nicht skalierbar, was das gesamte Konzept witzlos machen würde.
Alternativ dachte ich an folgende Methode:
pre {margin:0 2em; padding:0.4em; border:1px solid #aaa; color:#000; background-color:#ccc;}
/*/*//*/
pre {margin:0; padding:0; borderwidth:0; position:relative; layer-background-color:#ccc; left:2em; fontsize:90%;}
/* */
body>pre {margin:0 2em; padding:0.4em; position:static;}
Dadurch ist die Schrift bei relativer Größe zumindest teilweise einheitlich.
Nachteile:
- margin und padding werden fehlinterpretiert. margin wird wie padding interpretiert (zumindest solange der Rahmen deaktiviert ist), wenn eines davon angegeben wird, ist der untere Innenabstand immer größer als die anderen, selbst bei margin:1px 1px 0 1px. Daher ist offenbar nur margin:0; padding:0; möglich.
- Das erste pre-Element nach einem p-Element unterscheidet sich von den übrigen, es wird mehr eingerückt und es hat eine größere Schrift. Die unterschiedliche Einrückung ist auch bei der ersten Methode zu sehen. Das liegt am margin-left des p-Elements davor. Da letztlich entgegen dem Beispieldokument alle pre-Element von entsprechend eingerückten p-Elementen o.ä. umrundet sein werden, könnte ich die Schriftgröße entsprechend verkleinern, nur will ich mir beim Schreiben des Stylesheets nicht Gedanken machen, welche Elemente vor pre-Elementen auftauchen könnten (beispielsweise gleichsam eingerückte Überschriften davor lösen die Vergrößerung nicht aus).
Kennt jemand eine andere Lösung?
Mit Netscapes unter 4.8 habe ich noch nicht geprüft, wer weiß, was da noch lauert.
Mathias
»Ich wollte immer mit zwanzig Händen in die Welt hineinfahren«