position:fixed; bzw. Frames im MSIE simulieren?

[Stefan Einspender]

Hallo ForumsleserInnen,

vorab möchte ich um Entschuldigung bitte, dass ich hier einen Thread
anfange und nicht im Originalthread weitermache (der nicht von mir
angefangen wurde). Am Anfang stand die recht eigenartige Frage von
"isch", wie man Frames durch CSS ersetzen kann und in der Folge kam
mir die Idee, dass man doch position:fixed; im MSIE simulieren kann,
also habe ich etwas gebastelt und bin jetzt bei diesem Ergebnis ge-
landet: http://einspender.de/temp/fixed4.html

http://einspender.de/temp/fixed3.html ist ein Zwischenschritt, wo
Teile der Navigation bei zu kleinem Fenster verschwinden, ausser-
dem sind hier bereits überflüssige CSS-Definitionen rausgekürzt.

http://einspender.de/temp/fixed2.html stammt von Orlando und ist
die modifizierte fixed.html, siehe <?m=91863&t=16356>

http://einspender.de/temp/fixed.html ist die erste Version meines
Versuches, funktionierte leider in Opera nicht, siehe <?m=91559&t=16356>

Absichtlich ist im Moment nur die fixed4.html verlinkt, bitte seht
Euch die Seite mal mit versch. Browsern an und sagt, was klappt
bzw. wo schwere Fehler auftreten. Im Optimalfall soll es so aus-
sehen wie bei Mozilla 1.0, da ist alles wie von mir beabsichtigt.

MSIE 6.0:
-wenn das Browserfenster zu schmal ist, dann wird der Inhalt von
 div#inhalt nicht mehr angezeigt, was kann man da machen
 (dieses Problem halte ich für sehr schwerwiegend)

Opera 6.04:
-bei schmalen Browserfenster und Querscrollen schieben sich die In-
 halte von div#inhalt unter die Navigation
-bei einem zu niedrigen Browserfenster werden Teile der Navigation
 abgeschnitten

Bonus:
-wie kann ich oberhalb von div#inhalt noch einen höhenmäßig fest
 definierten Bereich einbauen, also z.Bsp. 100 Pixel hoch, um dort
 eine Überschrift o.ä. zu platzieren; im Moment bekomme ich dann
 Probleme mit der Höhe von div#inhalt

Soweit erstmal, über gute Resonanz würde ich mich freuen, optimal
wären natürlich Fehlermeldungen mit Lösungsvorschlag, aber auch
ein kurzes "In Browser XY mit OS ABC funktionert's" hilft mir
schon weiter.

Das MSIE-Problem sehe ich im Moment als schwerwiegend an, sollte es
dafür eine Lösung geben, werde ich die Sache in einen Artikel fassen
und SELFHTML zur Verfügung stellen. Wo genau, werden Stammleser
sicherlich wissen ;-)

Viele Grüße,
Stefan

[Kai Lahmann]

hi

Soweit erstmal, über gute Resonanz würde ich mich freuen, optimal
wären natürlich Fehlermeldungen mit Lösungsvorschlag, aber auch
ein kurzes "In Browser XY mit OS ABC funktionert's" hilft mir
schon weiter.

im meinen konqueror (3.0.2) hier kann man das ganze offengesagt "in die Tonne treten" :(

Grüße aus Bleckede

Kai

[Stefan Einspender]

Hallo Kai,

im meinen konqueror (3.0.2) hier kann man das ganze offengesagt "in die Tonne treten" :(

alle vier Varianten? Wenn ja, kennst Du eine Möglichkeit, Konqueror
von bestimmten CSS-Definitionen auszuschließen? Ich weiß, sowas ist
nicht nett, aber es wäre hier u.U. mal sinnvoll, vielleicht findet
man ja auch eine Lösung, wo Konqueror nur unwesentlich benachteiligt
ist.

Hier mal die Links zu allen vier Testseiten:
http://einspender.de/temp/fixed.html
http://einspender.de/temp/fixed2.html
http://einspender.de/temp/fixed3.html
http://einspender.de/temp/fixed4.html

Viele Grüße,
Stefan

[Kai Lahmann]

Hallo Kai,

im meinen konqueror (3.0.2) hier kann man das ganze offengesagt "in die Tonne treten" :(

alle vier Varianten?

jup, er scheint es nicht auf die Reihe zu bringen, das <div> als ein Element aufzufassen.

Wenn ja, kennst Du eine Möglichkeit, Konqueror von bestimmten CSS-Definitionen auszuschließen?

leider nein, der Selector-Support ist der zweitbeste überhaupt und definitiv besser als von Opera - also nichts, was dann nicht auch gleich Opera mitaussperrt..

Grüße aus Bleckede

kai

[AndreasW]

Hallo ForumsleserInnen,

Hallo,

MSIE 6.0:
-wenn das Browserfenster zu schmal ist, dann wird der Inhalt von
div#inhalt nicht mehr angezeigt, was kann man da machen
(dieses Problem halte ich für sehr schwerwiegend)

Opera 6.04:
-bei schmalen Browserfenster und Querscrollen schieben sich die In-
halte von div#inhalt unter die Navigation
-bei einem zu niedrigen Browserfenster werden Teile der Navigation
abgeschnitten

NS 4.73:
beide divs werden untereinander dargestellt.
Ist zwar nicht optimal, aber alle Inhalte können erreicht werden.

Opera 5.01:
linkes div: wenn Fenster zu niedrig, verschwindet der untere Teil.
wenn Fenster zu schmal: rechtes div schiebt sich über linkes.

Andreas

[Orlando]

Hi Stefan,

habe vorhin zu erwähnen vergessen, dass ich ich die bisherige Lösung bereits für genial halte. Jedenfalls ist es die interessanteste Problemstellung seit langem ;)

MSIE 6.0:
-wenn das Browserfenster zu schmal ist, dann wird der Inhalt von
div#inhalt nicht mehr angezeigt, was kann man da machen
(dieses Problem halte ich für sehr schwerwiegend)

Ach, ist das nett - ein wirklich lustiger Bug...

div#inhalt {
 position: absolute;
 left: 200px;
 top: 40px;
 height: 100%;
 right: -15px;
 padding-right: 25px;
 overflow: auto;
}

Durch die absolute Positionierung fällt dieses Problem jedenfalls weg. Der rechte Innenabstand ist notwendig, damit der IE den Inhalt nicht rechts außerhalb des sichtbaren Bereiches darstellt. right: -15px schiebt den Scrollbar an den äußeren Rand, der steht sonst zu weit innen. Dazu später mehr.

Opera 6.04:
-bei schmalen Browserfenster und Querscrollen schieben sich die In-
halte von div#inhalt unter die Navigation

Kann ich nicht nachvollziehen, bei schmalem Fenster (Annahme: 200px) ist zwar nur die Navigation sichtbar, aber das sollte nicht weiter stören. Wer surft schon ernsthaft in solch einem Fenster? PDAs lasse ich mal außen vor, die bekommen dann ohnehin ein eigenes Stylesheet. Jedenfalls schiebt sich bei mir nichts vom Inhalt unter die Navigation.

-bei einem zu niedrigen Browserfenster werden Teile der Navigation
abgeschnitten

Das typische fixed-Problem, schön beschrieben in http://jendryschik.de/wsdev/css/fixed/. Solche Bereiche sollten in der Tat generell eher klein sein, um dieses Problem zu umgehen.

Bonus:
-wie kann ich oberhalb von div#inhalt noch einen höhenmäßig fest
definierten Bereich einbauen, also z.Bsp. 100 Pixel hoch, um dort
eine Überschrift o.ä. zu platzieren; im Moment bekomme ich dann
Probleme mit der Höhe von div#inhalt

S. oben. Durch die absolute Positionierung schaffst du oben Platz für alles, was dein Herz begehrt. Desweiteren ist auch dieser Bereich fixiert *glucks* - ist's zu fassen? Im IE... :) Die Probleme scheinen mit obigem Beispiel eigentlich gelöst, zumindest auf den ersten Blick. Wenn jetzt das Fenster sehr schmal wird, verschwindet "nur" der Scrollbar, da kann man vielleicht noch optimieren (right:). Achja, "brrrr...reit" ist ja wohl eher ein generelles Problem, gelle ;)

Soweit erstmal, über gute Resonanz würde ich mich freuen, optimal
wären natürlich Fehlermeldungen mit Lösungsvorschlag, aber auch
ein kurzes "In Browser XY mit OS ABC funktionert's" hilft mir
schon weiter.

Netscape 4 ist kein Problem, den kann man ja nach üblicher Methode anders bedienen.

Ich habe übrigens noch einen Bereich #thema eingefügt, in dem sich die Überschrift befindet. Außerdem im Stylesheet noch

#inhalt[id] {
 position: absolute;
 left: 200px;
 right: 0;
}

wie gehabt für fixed-fähige Browser, hier wird dann auch der rechte Rand korrigiert - sowie einige weitere Änderungen. Aktuelles Beispiel: http://skop.net/self/fixed5.html mit der Bitte um ausgiebige Tests und Feedback.

Das MSIE-Problem sehe ich im Moment als schwerwiegend an, sollte es
dafür eine Lösung geben, werde ich die Sache in einen Artikel fassen
und SELFHTML zur Verfügung stellen. Wo genau, werden Stammleser
sicherlich wissen ;-)

Na denn - viel Spaß beim Tippen ;p

LG Orlando

--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html

[Stefan Einspender]

Hallo Du,

habe vorhin zu erwähnen vergessen, dass ich ich die bisherige Lösung bereits für genial halte. Jedenfalls ist es die interessanteste Problemstellung seit langem ;)

auf jeden Fall, macht richtig Spaß, wenn man da sieht, was so alles
möglich ist.

<disclaimer>
Es soll jetzt niemand auf die Idee kommen, dass es doch nicht so
schlimm ist, dass MSIE kein position:fixed; versteht, damit wären
noch ganz andere Sachen möglich ;-)
</disclaimer>

right: -15px;

hm ... da bekomme ich etwas Kopfschmerzen, die 15 Pixel beziehen
sich auf die Breite des Scrollbalkens und die ist variabel ...

Naja, vielleicht fällt uns da noch eine andere Möglichkeit ein,
mal abwarten. BTW sind es 16 und nicht 15 Pixel, die der Scroll-
balken standardmäßig breit ist.

S. oben. Durch die absolute Positionierung schaffst du oben Platz für alles, was dein Herz begehrt.

Leider nicht, scroll mal nach unten, der letzte Absatz hat als
Text "ende" und den sieht man leider nicht ... ich habe im Moment
auch überhaupt keine Idee, wie man dieses Problem lösen könnte.
Praktisch soll ja der Inhaltsbereich in der Höhe 100% der Anzeige-
fläche minus eine feste Pixelanzahl sein. OK, vielleicht kann man
da noch paar DIV's verschachteln, aber für diese Idee kann ich mich
nicht so recht begeistern. Dann lieber "nur" die feste Navigation
links und rechts den scrollbaren Bereich, was meinst Du?

Meine Versuche sind jetzt bei http://einspender.de/temp/fixed6.html
gelandet, wobei da eigentlich gegenüber fixed4.html nur noch ein
overflow:auto; für den body zusätzlich mit drin ist. OK, ich gebe
zu, dass die Sache dann ziemlich komisch ausschaut, aber es tritt
erst auf, wenn der Inhalt nicht mehr umzubrechen geht. Der Vorteil
gegenüber fixed5.html ist, dass nach wie vor alle Inhalte erreich-
bar sind, wenn auch etwas ungewöhnlich ;-)

Viele Grüße,
Stefan

PS: Die Sache mit der Überschrift werde ich nicht weiterverfolgen,
    da scheint es zuviele Probleme und Folgefehler zu geben, im
    Moment würde ich mir eigentlich nur noch eine bessere MSIE-
    Lösung wünschen, ideal wäre natürlich ein Queerscrollbalken ...

[Orlando]

Kuckuck ;)

<disclaimer>
Es soll jetzt niemand auf die Idee kommen, dass es doch nicht so
schlimm ist, dass MSIE kein position:fixed; versteht, damit wären
noch ganz andere Sachen möglich ;-)
</disclaimer>

Ja, wem sagst du das. Bisher dachte ich, nur mit JS einen Ausweg basteln zu können. Dann kommst du mir mit solchen Spielereien... schön.

right: -15px;

hm ... da bekomme ich etwas Kopfschmerzen, die 15 Pixel beziehen
sich auf die Breite des Scrollbalkens und die ist variabel ...

Variabel? Wusste ich gar nicht. Wie das? Kann man neben der Farbe denn auch die Breite beeinflussen? Ich kenne mich beim IE nicht so gut aus... >;)

Naja, vielleicht fällt uns da noch eine andere Möglichkeit ein,
mal abwarten. BTW sind es 16 und nicht 15 Pixel, die der Scroll-
balken standardmäßig breit ist.

Also bei -17px ist der Balken bei mir genau am Rand. Hab's jetzt auch so eingebaut.

S. oben. Durch die absolute Positionierung schaffst du oben Platz für alles, was dein Herz begehrt.

Leider nicht, scroll mal nach unten, der letzte Absatz hat als
Text "ende" und den sieht man leider nicht ... ich habe im Moment
auch überhaupt keine Idee, wie man dieses Problem lösen könnte.

Was hältst du von http://skop.net/self/fixed7.html?

Praktisch soll ja der Inhaltsbereich in der Höhe 100% der Anzeige-
fläche minus eine feste Pixelanzahl sein. OK, vielleicht kann man
da noch paar DIV's verschachteln, aber für diese Idee kann ich mich
nicht so recht begeistern.

Das Problem ist die gemeinsame Verwendung von Prozent- und Pixelwerten bei der bisherigen Variante mit der Überschrift, wofür es einfach keine reine CSS-Lösung gibt. Daher habe ich #thema mit einer Höhe von 7% definiert - die Werte sind von Fall zu Fall natürlich anzupassen, einen notwendigen Puffer eingeschlossen.

Dann lieber "nur" die feste Navigation
links und rechts den scrollbaren Bereich, was meinst Du?

Einfacher ist diese Variante schon, aber es geht ja hier um eine Machbarkeitsstudie. Dafür würde ich sogar eine JS-Lösung in Kauf nehmen, die die optimale Höhe des Inhalts-Bereiches ermittelt und setzt. Ich denke, jetzt sieht's aber auch ohne schon recht gut aus.

Meine Versuche sind jetzt bei http://einspender.de/temp/fixed6.html
gelandet, wobei da eigentlich gegenüber fixed4.html nur noch ein
overflow:auto; für den body zusätzlich mit drin ist. OK, ich gebe
zu, dass die Sache dann ziemlich komisch ausschaut, aber es tritt
erst auf, wenn der Inhalt nicht mehr umzubrechen geht.

Problematisch ist dies wohl bei eingebunden Bildern, der Fließtext wird wohl eher selten so lange Worte enthalten. Das ist dann allerdings ein ziemlicher Haken.

Der Vorteil
gegenüber fixed5.html ist, dass nach wie vor alle Inhalte erreich-
bar sind, wenn auch etwas ungewöhnlich ;-)

Hast du schonmal in Mozilla dein Mausrad bewegt? Da tut sich nichts... In Opera klappt's allerdings wie gewünscht.

PS: Die Sache mit der Überschrift werde ich nicht weiterverfolgen,
    da scheint es zuviele Probleme und Folgefehler zu geben, im
    Moment würde ich mir eigentlich nur noch eine bessere MSIE-
    Lösung wünschen, ideal wäre natürlich ein Queerscrollbalken

Was hältst du von der aktuellen Variante? Die Überschrift kann man IMHO durchaus stehenlassen, wird ja wohl auch meistens gewünscht sein.

LG Orlando

--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html

[herbalizer]

Moin!

hm ... da bekomme ich etwas Kopfschmerzen, die 15 Pixel beziehen
sich auf die Breite des Scrollbalkens und die ist variabel ...

Variabel? Wusste ich gar nicht. Wie das? Kann man neben der Farbe denn auch die Breite beeinflussen? Ich kenne mich beim IE nicht so gut aus... >;)

Wenn man die Breite vie M$-CSS auch noch beeinfluseen könnte, wäre das Problem nicht da. Ab der gemeine Windowsnutzer kann das Gesamtbild des Windows-GUI ändern und dabei auch die Scrollbalkenbreite vergrößern oder verkleinern.

Gruß Herbalizer

[Stefan Einspender]

Hallo Orlando,

Variabel? Wusste ich gar nicht. Wie das? Kann man neben der Farbe denn auch die Breite beeinflussen? Ich kenne mich beim IE nicht so gut aus... >;)

wie herbalizer schon sagt, da kann auch jemand 123 Pixel als Breite
eingestellt haben und wir werden nix dagegen machen können. Wobei
man wohl idR schon von den 16 Pixeln ausgehen kann, die da Standard
sind.

Was hältst du von http://skop.net/self/fixed7.html?

Mein Favorit ist nach wie vor http://einspender.de/temp/fixed6.html
und zwar nicht, weil er von mir ist *g*, sondern weil er sehr spät
wirklich Inhalt verloren gehen, obwohl ich zugebe, dass schon vor-
her die Sache mit dem doppelten Scrollbalken etwas ungewöhnlich ist.

Daher habe ich #thema mit einer Höhe von 7% definiert - die Werte sind von Fall zu Fall natürlich anzupassen, einen notwendigen Puffer eingeschlossen.

Was zum Problem wird, wenn jemand ein festes Layout will, weil da
irgendwelche Grafiken o.ä. reinpassen müssen. In meinem TuT werde
ich deshalb diese Sache weglassen, aber Du kannst ja dann später
gern noch einen zweiten Artikel schreiben ;-)
Allerdings werde ich auch deutlich darauf hinweisen, dass diese
Sachen auch Machbarkeitsstudien sind und für den professionellen
Einsatz nur nur gründlichen Tests genutzt werden sollten.

Einfacher ist diese Variante schon, aber es geht ja hier um eine Machbarkeitsstudie. Dafür würde ich sogar eine JS-Lösung in Kauf nehmen, die die optimale Höhe des Inhalts-Bereiches ermittelt und setzt. Ich denke, jetzt sieht's aber auch ohne schon recht gut aus.

Framelayout Teil 2? ;-)

Problematisch ist dies wohl bei eingebunden Bildern, der Fließtext wird wohl eher selten so lange Worte enthalten. Das ist dann allerdings ein ziemlicher Haken.

Diesen Punkt werde ich in meinem Artikel deutlich erwähnenen, wenn
man solche und ähnliche Sachen beachtet, kann man es ja einsetzen.

Hast du schonmal in Mozilla dein Mausrad bewegt? Da tut sich nichts... In Opera klappt's allerdings wie gewünscht.

Stimmt, ist mir auch schon aufgefallen, vielleicht bekomme ich die
Ursache heraus. Auf jeden Fall ein weiterer Nachteil dieser MSIE-
kompatiblen Lösung :-/

Was hältst du von der aktuellen Variante? Die Überschrift kann man IMHO durchaus stehenlassen, wird ja wohl auch meistens gewünscht sein.

Framelayout Teil 2? ;-)

Viele Grüße,
Stefan

[Orlando]

Hi Stefan,

[Scrollbar-Breite]

wie herbalizer schon sagt, da kann auch jemand 123 Pixel als Breite
eingestellt haben und wir werden nix dagegen machen können. Wobei
man wohl idR schon von den 16 Pixeln ausgehen kann, die da Standard
sind.

womit nur eine JS-Lösung (Außenmaß minus Innenmaß des Fensters abzüglich einiger Pixel) absolut zuverlässig ;) sein dürfte.

Was hältst du von http://skop.net/self/fixed7.html?

Mein Favorit ist nach wie vor http://einspender.de/temp/fixed6.html
und zwar nicht, weil er von mir ist *g*,

Na dann ist's ja gut ;)

sondern weil er sehr spät wirklich Inhalt verloren gehen,

Mit dem Hinweis auf einen notwendigen Puffer im Kopfbereich ist IMHO auch meine meine meine Variante durchaus vertretbar. *g*

Daher habe ich #thema mit einer Höhe von 7% definiert

Was zum Problem wird, wenn jemand ein festes Layout will, weil da
irgendwelche Grafiken o.ä. reinpassen müssen.

Prozentangaben sind immer eine relativ relative Angelegenheit, aber mit einer entsprechenden Warnung sehe ich da kein Problem.

In meinem TuT werde
ich deshalb diese Sache weglassen, aber Du kannst ja dann später
gern noch einen zweiten Artikel schreiben ;-)

Meinst du nicht, ein Zweizeiler als Hinweis zum zweiten Beispiel könnte da reichen? Aber gut, ich könnte ja Variante 1 als Einführung verlinken. Schau'n mer mal.

Allerdings werde ich auch deutlich darauf hinweisen, dass diese
Sachen auch Machbarkeitsstudien sind und für den professionellen
Einsatz nur nur gründlichen Tests genutzt werden sollten.

ACK, unbedingt.

[Machbarkeitsstudie]

Framelayout Teil 2? ;-)

Was willst du mir wohl damit sagen? *pfeif*

Problematisch ist dies wohl bei eingebunden Bildern, der Fließtext wird wohl eher selten so lange Worte enthalten. Das ist dann allerdings ein ziemlicher Haken.

Hast du schonmal in Mozilla dein Mausrad bewegt?

Stimmt, ist mir auch schon aufgefallen, vielleicht bekomme ich die
Ursache heraus. Auf jeden Fall ein weiterer Nachteil dieser MSIE-
kompatiblen Lösung :-/

Schön wäre es, dem IE ein Stylesheet vorzusetzen, das Mozilla nicht findet - das wird aber nicht funktionieren. Diese 'conditional comments' (http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp) will ich nämlich nicht verwenden, bei denen stellt's mir naturgemäß die Nackenhaare auf.

Was hältst du von der aktuellen Variante?

Framelayout Teil 2? ;-)

Na wenn _dir_ das so wichtig ist, mache ich mich halt nochmal wichtig. *g*

LG Orlando

--
SELF-TREFFEN 2002
http://www.rtbg.de/selftreffen/
http://www.megpalffy.org/temp/penneninhh.html

[peterS.]

gruss Stefan,

Fabrice Pascal hat auf seinen css-bug-seiten ebenfalls
   einen interessanten artikel zu diesem thema verfasst:
   http://www.fabrice-pascal.de/artikel/posfixedie6/;

und da ich hier schon fuer ihn werbe, moechte ich sowohl
   auf den css-bugring aufmerksam machen, dem er angehoert
   http://www.fabrice-pascal.de/bugbase/index.php,
   als auch die mailingliste "CSS-Design" nicht unerwaehnt
   lassen;

Mailingliste CSS-Design
   Listenhomepage mit Listenregeln:
   http://www.css-design.de/mailingliste.shtml

Austragen: mailto:[e-mail]
   Eintragen: mailto:[e-mail]

by(t)e by(t)e - peterS. - [e-mail]

[Stefan Einspender]

Hallo Peter,

freut mich, von Dir wieder mal etwas zu lesen :-)

http://www.fabrice-pascal.de/artikel/posfixedie6/;
   http://www.fabrice-pascal.de/bugbase/index.php,

danke für die beiden Links, werde ich mir bei Gelegenheit mal näher
anschauen, kannte ich bisher noch nicht.

http://www.css-design.de/mailingliste.shtml

http://de.groups.yahoo.com/group/css-design/message/12 zeigt Dir,
dass mir diese Mailingliste nicht unbekannt ist, allerdings war
diese Nachricht bisher meine einzige, ich hatte mich kurz danach
erstmal wieder abgemeldet, irgendwie erschien mir die Mailingliste
nicht so interessant. Wo Du sie mir jetzt extra empfiehlst, werde
ich wohl demnächst mal wieder einschauen :-)

Viele Grüße,
Stefan

[peterS.]

hallo again Stefan,

..., allerdings war diese Nachricht bisher meine einzige, ich
hatte mich kurz danach erstmal wieder abgemeldet, irgendwie
erschien mir die Mailingliste nicht so interessant. Wo Du sie
mir jetzt extra empfiehlst, werde ich wohl demnächst mal wieder
reinschauen :-)

geduldiges warten und mitlesen lohnt sich wegen der beitraege
   von 3 bis 4 autoren;

Viele Grüße,

bis zum SELF-Treffen?

Stefan

tschoe - peterS. - [e-mail]