CSS-Problem mit width:auto + overflow:auto

Hallo erstmal an alle,

ich bin neu hier, sozusagen 'Frischling'. Ich freue mich in eurer Runde zu sein. Die Seite finde ich klasse, deshalb habe ich mich auch registriert, um künftig ggf. mit Rat und Tat beizustehen, wenn ich helfen kann.

Mein erstes Posting ist aber eine Frage - ein Problem, mit dem ich mich nun schon seit vorgestern rumschlage.

Ich bin dabei, ein grafisches Layout in eine funktionierende XHTML-Seite zu bringen. Die Grafik erfordert 2 floating-Rändern links&rechts, eine absolut positionierte Ebene für Bildinhalt in der Mitte und eine für Textinhalt. Der Textinhalt sollte sich der Fenstergröße anpassen. Das macht er auch, nur was er dabei mit dem Text anstellt ist alles andere als nett. Ich habe es mit Firefox 1.0.4 + Netscape getestet (IE lass ich mal vorerst aus dem Spiel), das Verhalten ist (wie erwartet) bei beiden ähnlich: entweder verschwinden die Scroll-Leisten, der Text hat plötzlich keinen Umbruch mehr oder es erscheint nur mehr eine horizontale Scroll-Leiste, obwohl es horizontal nix zu scrollen gibt. Ziel wäre es, dass der Text einfach nur vertikal zu scrollen geht und den Umbruch vollzieht, egal, wie man die Seitengröße nun zieht (auf Wunsch angepasst auf 1024x768) Mehrfaches Aktualisieren verändert die Anzeige des Texts auch. Nachdem ich nun schon einiges probiert habe wie den Blocksatz zu entfernen, overflow auf scrolling zu setzen, min-width einzustellen usw. -immer mit demselben Ergebnis- habe ich nun eine Testdatei erstellt, die unter folgendem Link zu erreichen ist: Testdokument (Die grellen Farben sind nur zur Übersicht) Ich möchte das Textfenster ungern mit einer fixen oder prozentualen Breite ausstatten, da es sonst beim Ziehen der Browserfenstergröße Probleme gibt (Abstand zum schwarzen Rand stimmt nicht mehr, Überlauf über den Rand, etc.)

Ich sehs einfach nicht, wo mach ich denn den Fehler? Für eine Lösung wäre ich unendlich dankbar ;)

Freundlichen Gruß,
Rudy

Hi Jörg,

Danke für die Antwort.

- Ein Entfernen von min-width:1010px; scheint das Problem (bei Firefox) zu beheben, dafür wird die Textbox bei Verkleinerung des Fensters stark zusammen gestaucht;

Das allein löst es leider nicht. Beim Aktualisieren der Seite verschwinden die Scrolleisten wieder.

- auch das Entfernen der Höhenangabe von #textwincontent beseitigt den beschriebenen Effekt

Das allerdings hilft. Nur, woran richtet sich die Höhe der Ebene dann aus? *grübel*

- du könntest versuchen, die divs anders als absolut zu positionieren

Nicht so gut, da die Ebenen sich an dem Hintergrund ausrichten müssen (eine lange s/w-Grafik in Streifenform)

eine konkrete Breitenangabe für #textwincontent schließlich wäre auch für Opera und den IE hilfreich

Jo, der IE bekommt dann schon sein CSS-Pflaster, ich warte immer noch auf einen vollen CSS Support von dem blauen E. Dort wird es eine fixe Breite haben. IE Nutzer sind selbst schuld, darauf weise ich dann auch im Quellcode hin. Da bin ich ziemlich gemein ;) Nur die Nutzer standard-konformer Browser möchte ich mit einer vollen Fensternutzung beglücken, auch wenn Sie in Auflösung 1280x1024 arbeiten.

vielleicht könnte man die Probleme, die dann auftreten auch auf andere Weise lösen?

Ich werd mal sehen, was sich machen lässt. vielleicht verzichte ich auf den fixen Abstand der Floating-Ränder, und standardisiere die Breite wirklich auf 1024x768. Dann bekommen User mit größerer Auflösung eben die volle Hintergrundgrafik zu sehen. Ich werd morgen mal basteln. Schade dass es nicht anders zu gehen scheint.

Vielen Dank vorerst für Deine Hilfe.
Rudy

Ich nutze denselben Browser und dasselbe OS. Ohne die min-width des Containers funktioniert es solange gut, bis man den Browser maximiert und auf Aktualisieren drückt, wahrscheinlich hast Du nur das nicht ausprobiert. Die Testdatei ist dieselbe. Tja, ärgerlich... dass sich das Textfenster nicht zusammenstaucht wäre mir eigentlich erst in zweiter Linie wichtig.

Jetzt habe ich es auf eine andere Art gelöst, mit dem container auf fixer Breite und den margins rechts und links auf auto, den ganzen divs im Inhalt auf fixed bzw. absolute (IE). Musste zwar das halbe css umschreiben, aber nun siehts nach was aus. Dabei ist mir ein neuer Bug aufgefallen ... grrr... das Mausscrollrad funzt auf DIVs net (FF+NS). Aber was solls. Geht das mit Opera? Hab den eben nicht installiert.

Auch bei diesem Beispiel auf dem Div links oben/mitte wo '1_ _1', '2_ _2' drin steht? Der FF checkt alles nur nicht die. Sollte vielleicht mal zwischendurch Browser wechseln. Solangs nicht der IE ist...