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;
}

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.

Der IE erschwert lesen.
Firefox liefert mehr unteren Rand..

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.

tigion

20.04.08 um 12:32

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.

Matthias

28.04.08 um 11:58

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.