pre und overflow auto

Ich nutze hier ziemlich oft den pre Tag, da ich Code anzeigen mag. Um die jeweiligen Code Zeilen so anzeigen zu können, wie sie auch benutzt werden sollen, gebe ich den pre Tag ein overflow auto. Dies sieht in meiner style.css dann so aus:

pre{
font-size:0.9em;	
width:420px; 
overflow:auto; 
line-height:2.8em;
}</pre>

Funktioniert prima. Vor allem die Angabe line-height macht das Lesen vom Code entschieden einfacher als wenn man keine line-height Angabe macht.

Problematisch wird dies im Internet Explorer, da der bei einziligem Code, den pre Tag extrem niedrig anzeigt aber sofort einen vertikalen Scrollbalken liefert, wie hier am Bild zu sehen ist. Das zweite Bild zeigt dieselbe pre Zeile im Firefox, der eindeutig mehr unterem Rand liefert, der das Lesen erleichtert und natürlich keinen vertikalen Scrollbalken. ;-)

so zeigt FF overflow auto
so zeigt FF overflow auto
so zeigt der IE overflow auto, unlesbar
so zeigt der IE overflow auto, unlesbar


Lösbar ist dies nur, indem man dem IE genug padding-bottom gibt, damit auch dieser Browser lesbaren Text mit pre und overflow auto liefert. Er bringt zwar dann immer noch den meist völlig unnötigen vertikalen Scrollbalken , aber leichter lesbar ist es allemal.

pre{font-size:0.9em;
padding-bottom:20px;
width:420px; 
overflow:auto; 
line-height:2.8em;}


Artikelhistorie

Erstveröffentlichung:Oktober 12, 2005 @ 21:13

…. ein Leben ohne IE.. ;-) wäre langweilig.
6

6 Beiträge zu “pre und overflow auto

  1. Kommentar Autor
    tigion
    Kommentar

    Ich hab das Problem bei mir für den IE6 mit ‚width: 100%‘ und ‚overflow: scroll‘ beim Codebereich gelöst. Gibt man explizit mit ’scroll‘ an das beide Scrollbalken verwendet werden sollen, sieht er auch entsprechenden Platz für den unteren horizontalen Scrollbalken vor.

    Kleiner Nachteil ist natürlich, dass damit im IE6 immer die Scrollbalken zu sehen sind, was mich nicht wirklich stört. :)

  2. Kommentar Autor
    Matthias
    Kommentar

    Gute Idee mit dem ’scroll‘ und den IE Usern kann man ruhig mal etwas optisch nicht so schönes präsentieren. Damit diese endlich mal aktuellere Browser Versionen verwenden.

  3. Kommentar Autor
    Michael
    Kommentar

    Darf ich deinen Hintergrund klauen? Ich verändere ihn zwar noch etwas, aber im Grunde ist es deiner.

  4. Kommentar Autor
    Monika
    Kommentar

    ja klar immer ;)

    ich habe noch andere – ich nehme an Du meinst den Hintergrund beim Code ..

    lg

  5. Ping Schöner coden und quoten - GreenSmilies