Source code in Scrollboxen

[rotalever]

Ich hab hier folgendes Konstrukt:

<div class="codehl">Blablalb balb blablabla</div>


.codehl {
max-height: 200px;
border: 1px solid #f1f1f1;
background-color: #f5f5f5;
padding: 0;
overflow: auto;
margin: 0 0 9pt 0;
font-size: 10pt;
font-family: monospace;
}

Teilweise wird noch Code über <ol><li> eingefügt um Zeilen zu nummerieren, aber das spielt hier keine Rolle. Wie man aus dem CSS sieht, möchte ich, dass die Boxen für den Sourcecode maximal 200 pixel hoch sein sollen, bevor sie anfangen zu scrollen. Vorher sollen es einfach ganz normale Boxen sein, damit auch "Einzeiler" gut aussehen. Soweit so gut, es klappt auch in Firefox und Opera perfekt. Das IE das Attribut max-height nicht kennt war mir schon klar, da kann man wohl nichts machen.
Allerdings ist es so, dass manche Zeilen des Codes recht breit/lang sind. Und hier macht es IE6 und Konqueror falsch. Die Zeilen werden komplett auf der Breite dargestellt und das Layout außerhalb des Browserwindows skaliert. Es geht eben alles kaputt. Was muss ich also machen, dass diese beiden Browser dann auch Scrollen? Das seltsame daran ist, dass Konqueror, der ja max-height interpretiert, korrekt einen vertikalen Scrollbalken einrichtet, so dass das div nicht größer als 200px wird, einen horizontalen Balken richtet er aber nicht ein :|. IE macht halt einfach gar keine Scroll-Balken.


Liebe Browserhersteller, gebt euch doch mal mehr Mühe mit eueren Browsern...Aaaaaaaaaaaaaah.

[Sephiroth]

Ja und wieso setzt du dann nicht overflow auf scroll?

[rotalever]

Ja und wieso setzt du dann nicht overflow auf scroll?
Weil es nichts bringt...
Es macht es sogar noch schlechter, denn sonst ist es ja so, wenn nur wenig Code drinsteht, dann soll der ja noch nicht scrollen. Erst bei einer gewissen Menge. Durch overerflow:auto werden zumindest im Firefox und Opera die Scrollbalken dann erst hervorgeholt, wenn entsprechender Content da ist. Aber durch overflow:scroll tut sich in IE und Co. rein gar nichts.

[Sephiroth]

Stimmt, du hast recht, das Problem ist auch hier bei unseren Code-Boxen im Forum ...
Mit einer festen Breite (oder max-width für den IE7) klappt es aber (overflow:scroll ist dann nicht mehr nötig). Anders geht es scheinbar beim IE nicht.

[rotalever]

Stimmt, du hast recht, das Problem ist auch hier bei unseren Code-Boxen im Forum ...
Mit einer festen Breite (oder max-width für den IE7) klappt es aber (overflow:scroll ist dann nicht mehr nötig). Anders geht es scheinbar beim IE nicht.
Aber feste breite geht ja nicht, da dass Layout ja skaliert. Vll. haben die IE6 User dann einfach mal pech :biggrin:

[rotalever]

Habe jetzt so eine halbe Lösung. Vorher hatte ich alle Leerzeichen im sourcecode Leerzeichen durch &nbsp; ersetzt, damit die korrekte Formatierung gezeigt wird. Jetzt hab ich das so umgeändert, dass der nur für zwei Leerzeichen hintereinander &nbsp;&nbsp; schreibt. Dadurch wird zwar nicht das scrollen eingeschaltet, aber der IE bricht jetzt den Text um, sieht zwar nicht perfekt aus, aber sollte reichen.

[Sephiroth]

Habe jetzt so eine halbe Lösung. Vorher hatte ich alle Leerzeichen im sourcecode Leerzeichen durch &nbsp; ersetzt, damit die korrekte Formatierung gezeigt wird. Jetzt hab ich das so umgeändert, dass der nur für zwei Leerzeichen hintereinander &nbsp;&nbsp; schreibt. Dadurch wird zwar nicht das scrollen eingeschaltet, aber der IE bricht jetzt den Text um, sieht zwar nicht perfekt aus, aber sollte reichen.
o.0 pre-tag ahoi!

[rotalever]

o.0 pre-tag ahoi!
Och nee, da müsste ich ja das Source-Code Highlighter Programm umstellen, außerdem kann ich mich erinnern, dass da irgendwas nicht ging, was ich wollte...