Einzeiliger Bereich mit "overflow: auto" (Internet Explorer) @ tutorials.de: Tutorials, Forum & Hilfe

xxenon · 15.06.04 16:43

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...

xxenon · 15.06.04 16:59

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...

**Quaese** · 16.06.04 00:00

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 :

1
2
3

.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

xxenon · 16.06.04 16:53

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...

**Quaese** · 16.06.04 17:33

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 :

1 2	* html .testDiv{ overflow-x: scroll; overflow-y: visible;}

Ciao
Quaese

xxenon · 16.06.04 17:51

Wow, das funkt ja geradezu perfekt...

1000 Dank

Regards...

xxenon · 16.06.04 17:58

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?!

**Quaese** · 17.06.04 00:01

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

xxenon · 17.06.04 00:07

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

xxenon · 17.06.04 00:24

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.

**Quaese** · 17.06.04 10:38

Hi,

hmmm, mit dem padding-bottom ist sicherlich die wesentlich elegantere Lösung.
Ich bin mir sicher, dass ich das auch versucht hatte - allerdings ohne Erfolg
(vielleicht auch schon zu müde). Nachdem ich es jetzt nochmals versucht hatte,
ging es problemlos. Damit kann auf den dummy-Bereich verzichtet werden und
es wird übersichtlicher.

Dank' Dir für den Hinweis.

Ciao
Quaese

forumwurm · 27.07.04 12:26

Original geschrieben von Quaese
...mit dem padding-bottom ist sicherlich die wesentlich elegantere Lösung....

hallo ihr beiden

das könnte die lösung für mein problem sein.

kann nicht einer von euch die padding-bottom-lösung-ohne-dummy für eine css-dummy posten.

thx

**Quaese** · 27.07.04 12:50

Hi,

voilà, die padding-bottom-lösung-ohne-dummy:

Code :

.overflowDiv{ width: 200px;
              overflow: auto;
              border: 1px solid black;
              margin-top: 20px;
              margin-left: 5px;}
 
* html .overflowDiv{ overflow-x: auto;
                     overflow-y: visible;
                     padding-bottom: 20px;}

Ciao
Quaese

forumwurm · 27.07.04 16:23

besten dank.

abgewandelt auf meine bedürfnisse sieht das so aus:

Code :

#mamboMainBody {
    position: absolute;
    top: 200px;
    left: 25px;
          width: 600px;
    height: 400px;
 
   margin:20 0 0 5;
   overflow: auto;
   }
 
* html #mamboMainBody { overflow-x: auto;
                     overflow-y: visible;
                     padding-bottom: 20px;}

aber das funktioniert bei mir nicht. habe ich was falsch übernommen?

**Quaese** · 27.07.04 17:55

Hi,

was genau willst Du machen?

Obiger Thread behandelt einen Container mit dynamischer Höhe. Du weist Deinem
Div jedoch eine feste Höhe zu.
Willst Du einen festen Anzeigebereich, in dem bei übergrossem Inhalt Scrollbars
angezeigt werden, so kann die CSS-Weiche für den IE entfallen.

Code :

#mamboMainBody { position: absolute;
                 top: 200px;
                 left: 25px;
                 width: 600px;
                 height: 400px;
                 margin: 20 0 0 5;
                 overflow: auto;}

Soll sich die Höhe des Div-Containers dynamisch anpassen, so musst Du in Deinem
bisherigen StyleSheet die Zeile height: 400px; löschen.

Ciao
Quaese

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

"Vertrauenswürdige Sites"-Formular im Internet Explorer aktivieren

Horizontale "Anker" mit overflow:auto,

<div style="overflow-y:auto"> nur im IE... Alternativen?

Internet Explorer "speichern symbole" verstecken

Erfahrungen im Bereich der "Rich Internet Applications"

E-Mail:

Abonnieren Abbestellen