✔ Einzeiliger Bereich mit "overflow: auto" (Internet Explorer)

Status
Nicht offen für weitere Antworten.
xxenon

xxenon

Erfahrenes Mitglied
Hi Leute!


"overflow: auto" ist ja gerade für dynamische Inhalte (sprich Gästebuch, Forum, etc.) mit ebenfalls variabler Breite eine feine Sache. Man kann so verhindern, dass irgendjemand durch überbreite Postings das Design der Page zerstört. So weit so gut, nun musste ich allerdings bemerken, dass wenn ich einem Div-Container nur eine Breite zuweise, aber keine Höhe, und der Inhalt nur einzeilig ist, die Darstellung im Internet Explorer unbrauchbar ist. Überhaupt hat der Internet Explorer die unangenehme Eigenschaft, dass er auch die Höhe beschneidet, wenn keine Angabe existiert.

Ich hoffe, irgendwer hat sich dieses Problem schonmal zu Herzen genommen und einen passenden Lösungsansatz dafür parat.

PS.: es gibt in CSS eine Eigenschaft "min-height", die dieses Problem lösen könnte, jedoch bisher nur von Mozilla/Netscape-Browsern unterstützt wird, wo die Darstellung sowieso passt... (siehe SelfHTML)



Abschließend noch ein Codeschnipsel, damit ihr das Ganze schneller nachvollziehen könnt:

Code: 
<html>
<body>
<div style="width: 200px; overflow: auto;">
tyrstbrerstyrstbrerstyrstbrerstyrstbrerstyrstbrerstyrstbrerstyrstbrerstyr
</div>
</body>
</html>


Regards...
 
Möchte noch anmerken, dass ich auch weiß, das das Problem daher rührt, dass der Internet Explorer die Scrollbalken innerhalb des Div-Bereichs einbindet und nicht außerhalb, wie der Mozilla :)


Regards...
 
Hi,

es existiert der sogenannte "Star html Selector Bug". Er bewirkt, dass alle CSS-Definitionen,
die mit * html eingeleitet werden, nur von IEs ab Version 4.x und höher interpretiert
werden.
Damit wäre es möglich, eine Mindesthöhe anzugeben, die nur vom IE ausgewertet
wird.

Die CSS-Formatierung könnte wie folgt aussehen:
Code: 
.testDiv{ width: 200px;
          overflow: auto;}
* html .testDiv{ height: 35px;}
Mit dem zugehörigen HTML-Abschnitt wird auch im IE eine Zeile angezeigt und die
vertikale Scrollbar ist bedienbar.
Code: 
<div class="testDiv">
tyrstbrerstyrstbrerstyrstbrerstyrstbrerstyrstbrerstyrstbrerstyrstbrerstyr<br>
tyrstbrerstyrstbrerstyrstbrerstyrstbrerstyrstbrerstyrstbrerstyrstbrerstyr
</div>
Ich hoffe, dass bringt Dich weiter.

Ciao
Quaese
 
Hi Quaese!

Die Browserweiche ist schonmal ein guter Anfang. Das mit dem "* html" hatt ich schon total vergessen =). Aber wie du selbst sagst, du gibst dem Internet-Explorer eine "Mindesthöhe". Das wäre sinnvoll, aber leider kennt er "min-height" nicht und wenn ich "height" benutze nimmt er das ja als fixe Höhe, also auch wenn der Text sowieso mehrzeilig wäre und ich die Höhenangabe nicht brauchen würde. Das ist irgendwie ziemlich nervig, weil dann muss man ja erst recht wieder jedesmal skrollen ^^.

Vielleicht hast du ja noch ne Idee auf Lager, danke auf jeden Fall.

Regards...
 
Hi,

wenn die Browserweiche schon eingesetzt wird, kannst Du dort auch CSS-Eigenschaften
verwenden, die nur für den IE gelten. Ich denke da insbesondere an overflow-x
und overflow-y.
Wenn Du sie wie folgt einbindest, sollte es funktionieren, wie Du es Dir vorstellst.
Code: 
* html .testDiv{ overflow-x: scroll;
                 overflow-y: visible;}
Ciao
Quaese
 
^^ Muss doch noch mal nerven...

Deine Lösung funktioniert ja soweit sehr gut, aber wenn mein Text jetzt kleiner ist als der Bereich, wird trotzdem die Scrollbar angezeigt :).

Gibts da einen Wert wo er das automatisch checkt? Ich hab mal bisschen rumprobiert, aber da ist nichts dabei rausgekommen^^.


Regards...

EDIT: Wozu brauch ich überhaupt "overflow-y"? Das funktioniert eh ohne genauso?!
 
Hi,

nach langem Tüfteln bin ich hoffentlich zu einem befriedigenden Ergebnis gekommen.

Wird im IE ein Bereich definiert, dessen Breite begrenzt ist, seine Höhe jedoch
dynamisch anwächst, wird die letzte Zeile bzw. der unterste Bereich des Inhalts
nicht angezeigt (wird evtl. vom innenliegenden Scrollbar verdeckt). Aus diesem
Grund muss im IE ein zusätzliches Element zur Höhenregulierung angelegt
werden.

Folgende CSS-Definition ist notwendig:
Code: 
.testDiv{ width: 200px;
          overflow: auto;}
* html .testDiv{ overflow-x: auto;
                 overflow-y: visible;}

.dummy{ line-height: 0pt;
        height: 0px;
        font-size: 0pt;}
* html .dummy{ height: 20px;}
Die ersten beiden Klassen sind klar.

Mit .dummy wird die Höhe des Regulierungs-Elementes auf Null gesetzt.
Damit ist es zunächst nicht zu sehen (wichtig für Opera,Netscape, Mozilla).
Als nächstes wird dem Element über eine erneute Weiche die Höhe von 20px
zugewiesen (entspricht in etwa der Höhe einer Scrollbar). Damit ist
gewährleistet, dass der verdeckte Bereich auch im IE angezeigt wird.

Der HTML-Code könnte wie folgt aussehen:
Code: 
<div class="testDiv">
    Test<br>
    asödlfkaösdklfjaösdlkfjaewopieruqpiewrqvnaödslkuernaökjfd<br>
    Text
  <div class="dummy">&nbsp;</div>
</div>
Das ganze funktioniert im IE5.01, IE5.5, IE6, Mozilla 1.6, Opera 7.22 und Netscape 7.1.
Der IE4 zeigt bei übergrossen horizontalen Inhalten neben der horizontalen Scrollbar
auch die vertikale an.

Ciao
Quaese
 
Also ich glaube darauf wäre ich nie gekommen =))

Vielen Dank jedenfalls für deine argen Bemühungen.
Das wäre doch fast ein Tutorial wert oder? ^^


Regards...

PS: Wenn du mal zufällig in der Gegend bist geb ich dir ein Bier aus :p
 
Muss jetzt doch noch mal nachhaken =)

Du hast mich mit dem Dummy irgendwie inspiriert und jetzt kam ich auf die Idee, stattdessen einfach "padding-bottom" zu verwenden... Sag doch mal was du davon hältst. Ich habs jedenfalls probiert und bei mir gabs damit kein Problem.




Regards...

EDIT: Einziges Problem (bei beiden Methoden) ist, dass wenn keine Scrollbar benötigt wird, ein gewisser Abstand zum umliegenden Text besteht, aber ich glaube, das ist (gerade bei dynamischen Skripten) kein wirkliches Problem. Wollt ich nur der Vollständigkeit halber erwähnen.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück