pre und overflow auto
Pre und Overflow Auto, CSS Tipps und Tricks und der IE.
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
wäre langweilig.
Impressum-Datenschutz
How to...
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.
tigion20.04.08 12:32 | # |
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.
Matthias28.04.08 11:58 | # |
Darf ich deinen Hintergrund klauen? Ich verändere ihn zwar noch etwas, aber im Grunde ist es deiner.
Michael26.08.08 16:35 | # |
ja klar immer
ich habe noch andere – ich nehme an Du meinst den Hintergrund beim Code ..
lg
texto26.08.08 20:22 | # |
Ja genau, danke! Werd dich noch erwähnen.
Michael27.08.08 00:16 | # |