Hintergrundfarbe für pre im NS 4 bei relativen Schriftgrößen

[molily]

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

[Cyx23]

Hallo Mathias,

sobald hier bei pre per border nachgeholfen wird taucht das Problem irgendwo auf, zumindest mit relativen Grössen und ggf. auch nach Verändern der Schriftgrösse. Du kannst versuchen über Angaben zum body den Wechsel der Schriftgrösse abzufangen, aber eigentlich sollte es eine zuverlässigere Möglichkeit geben.
Einige sonst sehr schöne mögliche Lösungen würden hier Abschneiden oder gleich vollständiges Fehlen von Text im pre bewirken wenn der zu lang ausfällt.

M.E. entweder ganz verzichten auf Hintergrundfarbe (in voller Breite), oder die pre relativ positionieren ohne border und per JavaScript + Resizebugkorrektur nachträglich clip.width anpassen, sähe ordentlich aus aber käme solch eine Korrektur überhaupt in Frage?

Grüsse

Cyx23

[MudGuard]

Hi,

pre {fontfamily:monospace; fontsize:0.9em; whitespace:pre; borderwidth:0.1px; borderstyle:solid; bordercolor:white;}

Daß in dieser Zeile keine einzige korrekte CSS-Property steht, ist Dir bekannt?

pre {margin:0; padding:0; borderwidth:0; position:relative; layer-background-color:#ccc; left:2em; fontsize:90%;}

Immerhin ein Fortschritt: 3 der benutzten CSS-Eigenschaften existieren (margin, padding, left).

cu,
Andreas

[molily]

Hallo Andreas,

pre {fontfamily:monospace; fontsize:0.9em; whitespace:pre; borderwidth:0.1px; borderstyle:solid; bordercolor:white;}

Daß in dieser Zeile keine einzige korrekte CSS-Property steht, ist Dir bekannt?

Das ist beabsichtigt. Aus dem Kontext gekürzt ist der Sinn natürlich nicht erkennbar. Obige Regel befindet sich zunächst einmal in einem Kommentar und wird die Validität somit so oder so nicht beeinflussen. Regeln in der Kommentarkonstruktion /*/*//*/ ... /* */ werden fälschlicherweise von Netscape 4 und Opera 5 interpretiert, alle anderen Browser sehen zwei gewöhnliche Kommentare. Die gemäß CSS »falsche« Notation der Eigenschaftsnamen versteht Netscape 4, Opera 5 aber nicht, somit gelten diese Deklarationen nur für Netscape 4. Das ist das Ziel der Ausnutzung des Parsingfehlers einerseits und der Notation ohne Bindestriche andererseits.

pre {margin:0; padding:0; borderwidth:0; position:relative; layer-background-color:#ccc; left:2em; fontsize:90%;}

Immerhin ein Fortschritt: 3 der benutzten CSS-Eigenschaften existieren (margin, padding, left).

Siehe oben. Die vermeintliche CSS-Regel ist lediglich Kommentartext. Anders gesagt, wenn etwas nach bestimmten Kriterien nicht existiert, kann im Nichtexistierenden a priori nichts gemäß denselben Kriterien existieren bzw. es entzieht sich jeder Erkenntnis. ;)
Was meine Absichten angeht, ist es im Gegenteil ein Rückschritt, da sich diese Eigenschaften (zumindest als zusammenfassende) nicht anders schreiben lassen und deshalb ein Zurückrudern für Opera 5 über die besagte dritte Regel nötig ist, welche die (gemäß CSS nicht vorhandenen) Deklarationen in /*/*//*/ ... /* */ wieder rückgängig macht.

Mathias

[Cyx23]

Hallo Andreas,

pre {fontfamily:monospace; fontsize:0.9em; whitespace:pre; borderwidth:0.1px; borderstyle:solid; bordercolor:white;}
pre {margin:0; padding:0; borderwidth:0; position:relative; layer-background-color:#ccc; left:2em; fontsize:90%;}

[ ..]

Immerhin ein Fortschritt: 3 der benutzten CSS-Eigenschaften existieren (margin, padding, left).
Daß in dieser Zeile keine einzige korrekte CSS-Property steht, ist Dir bekannt?

das ist da ja im Kommentar (/*...) vollkommen valide, und die http://www.lipfert-malik.de/webdesign/tutorial/css.html#BrowserweichenComments von Kristof Lipfert entwickelte CSS-Weiche mit Kommentar und Verwendung einer NC4/JavaScript-Syntax nimmt Rücksicht auf Browser die hier ebenfalls den Kommentar auswerten.

Grüsse

Cyx23