Bitte, bitte helft mir! IE, DIV & Scrollbars
Christopher
- css
Hallo,
also vorweg, ich brauche wirklich dringend eure Hilfe. Ich habe wegen diesem Problem auch schonmal hier gepostet, aber kam mit der Antwort leider nicht zurecht. Also erstmal zu meinem Problem. Als Beispiel hier mal ne Internet-Seite die das verdeutlicht :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Test</title>
<style type="text/css" media="screen"><!--
body { margin: 0; padding: 0; overflow: hidden }
#inhalt { position: absolute; top: 50%; right: 5px; bottom: 5px; left: 50%; overflow: auto; border: solid 2px black }
--></style>
</head>
<body bgcolor="#ffffff">
<div id="inhalt">Test Zeile 01<br>
Test Zeile 02<br>
Test Zeile 03<br>
Test Zeile 04<br>
Test Zeile 05<br>
Test Zeile 06<br>
Test Zeile 07<br>
Test Zeile 08<br>
Test Zeile 09<br>
Test Zeile 10<br>
Test Zeile 11<br>
Test Zeile 12<br>
Test Zeile 13<br>
Test Zeile 14<br>
Test Zeile 15<br>
Test Zeile 16<br>
Test Zeile 17<br>
Test Zeile 18<br>
Test Zeile 19<br>
Test Zeile 20<br>
Test Zeile 21<br>
Test Zeile 22<br>
Test Zeile 23<br>
</div>
</body>
</html>
Unter Mozilla/Firefox passiert da folgendes => Es wird ein Rechteck gezeichnet was genau in der Seitenmitte beginnt und bis 5 Pixel an den rechten/unteren Rand reicht. Das ganze ist eingerahmt damit man es auch "sieht". Wenn das Browser-Fenster zu klein ist um den ganzen Text in dem Rechteck anzuzeigen, dann wird AUTOMATISCH ein Scrollbalken eingeblendet.
SUPER, so soll es auch sein!!
Problemkind:IE
Starte ich da ganze im Internet-Explorer passiert leider folgendes. Erstmal wird ein Rechteck gezeichnet was auch in der Seitenmitte anfängt. Soweit sogut, leider geht das Rechteck NICHT bis 5 Pixel an den rechten Rand, sondern ist nur so breit wie der Text in der Box.
Fehler Nummer 1
Das nächste Problem ist das die Box auch nicht bis 5 Pixel an den unteren Rand geht, sondern nur so hoch ist wie der Text.
Fehler Nummer 2
Ist das Browser-Fenster jetzt zu klein um den ganzen Text in der Box darstellen zu können passiert folgendes. Die Box wird trotzdem gezeichnet und "verschwindet" am unteren Rand, d.h. der IE zeichnet die Box so hoch wie es "eben sein muss", bedenkt dabei aber nicht das die Seite aufhört. Einen Scrollbalken vermisse ich natürlich auch, wobei das das Hauptproblem ist, ich bekomme es nicht hin das der IE automatsich in einem DIV einen Scrollbalken anzeigt, das geht NUR wenn ich bei Breite/Höhe einen FESTEN Pixelwert eintrage, was bei diesem Beispiel aber absoluter Schwachsinn ist und auch nicht möglich.
Fehler Nummer 3!!!
Also, das ist mein Problem. Mir wurde hier schon gesagt das das mit dem IE so auch nicht möglich wäre und das ich mit einem Tabellen-Layout arbeiten müsse. Nur weiß ich nicht wie ich das in dem Fall machen soll, egal was ich auch versuche, ich schaffe es nicht im IE ein vergleichbares Ergebnis zu erzielen wie im Firefox. Auch mit Tabellen nicht.
Deswegen meine große Bitte an euch, kann jemand mein Beispiel von oben nehmen und es so ändern/bzw. ein neues machen, das es das gleiche Ergebnis liefert wie im Firefox? D.h. kann mir jemand ne Seite zeigen, ein Beispiel geben wie ich es anstellen muss, damit ich im IE ne Box bekomme, die bis kurz vor den Seitenrand geht (und nicht weiter oder kürzer) und die bei bedarf(!) automatsich(!) einen Scrollbalken einblendet???
Bitte ich weiß das ist sonst nicht die feine Art andere für sich arbeiten zu lassen. Aber ich habe hier im Forum die Posts durchsucht und auch schon gegooglet, aber entweder bin ich zu doof oder ich weiß auch nicht, ich schaffe es nicht. Und dabei steht und fällt damit mein ganzes Web-Projekt.
Also nochmal, bitte helft mir und gebt mir gleich ein ganzes Beispiel anstatt einer "normalen" Antwort wie => Tabellenlayout, bitte .....
Also erste Idee:
#inhalt {
position:absolute;
top:50%;
left:50%;
height:50%;
width:50%;
padding-right:5px;
padding-bottom:5px;
overflow:auto;
border:solid 2px black}
Allerdings geht die Box bis zu den Rändern, nur der Text nicht ...
Zweite Idee:
#inhalt {
position:absolute;
top:50%;
left:50%;
height:50%;
width:50%;
margin-left:-5px;
margin-top:-5px;
overflow:auto;
border:solid 2px black}
Passt an den Ränder, allerdings startet die Box nicht exakt mittig, sondern um 5px nach oben und links verschoben ...
Leider beides nicht exakt, was du wolltest ;-)
Liebe Grüße, Stefan
Also auf 5 Pixel verschoben kommt es mir nicht an, das wäre nicht schlimm.
Werde deine 2 ideen nachher gleich mal testen und wenn Sie funktionieren werde ich mich freuen, hehe. Aber bist du dir sicher das der IE die Box auch nicht "über" die Seite hinaus zeichnet wenn der Text zu lange ist, sondern auch wirklich eine Scrollleiste anzeigt?
Weil wenn ich mir die CSS-Definition anschaue, dann habe ich so meine Bedenken das der IE da einen Scrollbalken hinmacht.
Naja, werde es nachher versuchen, auf alle Fälle schonmal vielen Dank, ehrlich! Danke :)
Zur Not bau noch
overflow:auto;
ein. Dann klappt das mit dem Scrollbar bestimmt :-)
Stefan
einfach:
#inhalt {
position:absolute;
bottom:5px;
right:5px;
height:50%;
width:50%;
overflow:auto;
border:solid 2px black}
;-) Stefan
Achja, ein Problem gibt es aber noch.
Im Beispiel habe ich die Box einfacherhalber in der Mitte anfangen lassen und somit genau 50% Höhe & Breite angeben können.
Was ist aber jetzt, wenn ich die Box bei einem bestimmten Pixelwert anfangen lassen, also :
#inhalt { position: absolute; top: 100px; right: 5px; bottom: 5px; left: 200px; overflow: auto; border: solid 2px black }
also so! Im Firefox wird er ein Rechteck vom Punkt 200,100 bis 5Pixel vor den rechten/unteren Rand gezeichnet.
Im IE habe ich das gleiche Problem wie oben beschrieben, er macht es einfach nicht. Und mit Porzentangaben kann ich ja jetzt nicht mehr arbeiten.
Also was tunt in obigem Beispiel???
Hallo Christopher
Also nochmal, bitte helft mir und gebt mir gleich ein ganzes Beispiel anstatt einer "normalen" Antwort wie => Tabellenlayout, bitte .....
Dein Problem besteht darin, dass der IE nur jeweils eine Angebe für die
vertikale und für die horizontale Positon akzeptiert.
Vielleicht hilft es dir, wenn du dir das Beispiel "Header und Foter fest"
ganz genau ansiehst, dass ich weiter unten gepostet habe.
Auf Wiederlesen
Detlef