css: vaste positionering van blok, ook IE!

Ik heb iets leuks voor elkaar gekregen. zie http://www.marsandmc.nl/publicaties/94vleugelmechaniek.html en dat wil ik graag met jullie delen. Hartverwarmend, niet? De moeilijkheid met vaste positionering van een blok via position:fixed is dat het in IE 5 en 6 niet werkt. Voor jullie geen probleem maar voor de wereld wel. Via de PC-emulator speel ik dan maar de wereld na; inderdaad werkt niet in IE 6, althans niet zondermeer. Na wat zoeken kwam ik op deze site: http://jendryschik.de/wsdev/css/fixed/ en daar staat, wat verborgen, een hele makkelijke oplossing. Er wordt gebruik gemaakt van het gegeven dat IE aan CSS eigenschappen toegekende expressions javascript kan uitlezen, en toepassen (Active Scripting). In de CSS code ziet het er zo uit. Er is een content-kolom in de pagina, de css is niks speciaals maar ik noem 'm maar even: [quote:e1b319a2aa] #content { padding: 6px; border: solid 1px #069; position: absolute;top:4px; left: 4px; width: 570px; height: auto }[/quote:e1b319a2aa] en er is een tweede kolom rechts daarnaast. Die kolom is gefixeerd op de pagina, en dit is de css: [quote:e1b319a2aa] #fixedbox { padding: 3px; border: solid 1px #903; position: fixed; top: 4px; left: 594px; width: 170px; height: 600px; position: expression("absolute"); top: expression(parseInt(document.body.scrollTop + 4));} [/quote:e1b319a2aa] De allereerste ' position:fixed ' wordt door alle browsers gelezen, maar door Win IE 5+6 dus fout geïnterpreteerd: gevolg, een rommeltje. Maar doordat er even later voor IE: position: expression("absolute") staat, wordt er voor IE een absolute positie van het blok afgedwongen. Met top: expression(parseInt(document.body.scrollTop + 4));} wordt vervolgens het blok door IE tijdens het scrollen op de plaats gehouden. Belangrijk: de doctype declaratie mag niet strict zijn, moet transitional zijn (quircks mode). Werkt perfect in osx: firefox 1.04, explorer 5.2, netscape 7.2, safari 1.2.3 en opera 6.03 en 8.0, en dus ook in Windows Explorer 6. NIET getest, de nieuwere Safari, en de oudere Windows Explorer 5, want die heb ik niet. Testresultaten welkom voor deze browsers.

Ankers moeten overigens wel allen in de content-div staan. Ik had eerst een top-anker net onder de body, en top-of-page werkte toen niet in IE6 en Opera 8.

Als je de browser in quirks mode zet (en dat is niet zozeer een kwestie van stict of transitional, maar eerder een kwestie van een declaratie met of zonder URI: http://hsivonen.iki.fi/doctype/ ) dan kan je hele grote problemen krijgen met de rest van je CSS; zeker Internet Explorer gaat soms raar gedrag vertonen.

Wel een belangrijke afweging als je gebruik wilt maken van beschreven techniek.

het werkt in IE6 voor PC, maar het 'flikkert' wel een beetje door de scripting.

Volgens mij zijn er wel andere oplossingen zonder quirks mode en scripting. Ik heb zoiets al eens gedaan - ik ga er even naar op zoek.

Let wel even op de opmerking van tennapel, want die quirks mode kan idd héél wat problemen met zich meebrengen.

[code:1:ef23c8c3c6]#fixedbox { position : fixed; } * html #fixedbox { position : absolute; }[/code:1:ef23c8c3c6] werkt dit niet? natuurlijk moet je bij de bovenste nog de juiste afmetingen enz. toevoegen.

[quote:50e6cf7821] #fixedbox { position : fixed; } * html #fixedbox { position : absolute; }

werkt dit niet?
natuurlijk moet je bij de bovenste nog de juiste afmetingen enz. toevoegen.
[/quote:50e6cf7821]

Nee, dit werkt niet voor wat ik beoog. Die * html #fixedbox wordt door IE alleen gelezen als ik me goed herinner, dat is ook je bedoeling, maar dan wordt dus het blok voor IE gewoon absoluut gezet, blijft bovenin de pagina staan, niet bovenin de viewport.

Of, zou het kunnen werken als ik de html declareer met iets? Heeft het bij jou zo gewerkt?

Alle waarschuwingen tegen quirksmode natuurlijk goed meegenomen, maar ondertussen werkt mijn suggestie dus wel voor mijn pagina’s in alle genoemde browsers… dus ik blijf dit gebruiken tenzij er een nog betere oplossing komt, maar die heb ik tot dusver niet gevonden.
Het ‘flikkeren’ van de statische box tijdens het scrollen heb ik in (de beretrage) IE 6 voor Virtual PC ook waargenomen. Ik weet dat er oplossingen bestaan via javascript waarmee je het herpositioneren kan ‘vertragen’ zodat het scherm zich niet elke miliseconde probeert aan te passen tijdens het scrollen.

Ik heb het gebruikt bij http://www.polymerapplications.be/nl/ om die onderste blok op z'n plaats te krijgen. Maar het is al een tijdje geleden en de situatie is lichtjes anders, dus ik zou het nog eens moeten bezien. Ik heb in alle geval redelijk wat problemen gehad het zo goed te krijgen in alle mogelijke browsers.

Dat ga ik eens bekijken. Ik heb ook nog wat rondgesnuft, en ontdekt dat deze meneer http://limpid.nl/lab/css/fixed/right-sidebar ook aardig bezig is. Maar zijn oplossingen werken weer niet in IE5 Mac dus dan ben ik zoals het nu is toch beter uit. Hoewel hij denk ik op een aardig spoor zit.

Hoeveel uren-dagen-maanden zullen er toch wereldwijd worden verspild aan het trachten recht te zetten van al deze css-incompatibiliteiten, hebben wij niks beters te doen, of moet je hiervoor toch ‘een beetje gek’ zijn…

Je kan je ook afvragen of het 'fixeren' van een sidebar voor een incompatibele browser de inspanning rechtvaardigt. Persoonlijk vind ik van niet, omdat ik de toegevoegde waarde van een gefixeerde sidebar niet zo zie: je krijgt problemen als de sidebar veel langer is dan het canvas (resize je venster maar eens).

Alle javascript oplossingen in IE die ik gezien heb zijn vind ik als gebruiker irritant; het gaat schokkerig of er is een blokje dat als een hondje achter je aanhobbelt: net een paar stappen later.

[quote:3159999269]Je kan je ook afvragen of het 'fixeren' van een sidebar voor een incompatibele browser de inspanning rechtvaardigt.[/quote:3159999269]

Ik denk dat je gelijk hebt: meestal niet. In mijn geval is het dan handig om een inhoudsopgave in beeld te hebben, en te houden. voor een aantal pagina’s slechts, maar ik zou deze constructie voor een eerste pagina / homepage ook nooit toepassen. In dit geval gelden dan de woorden van een van Neerlands denkers: elk voordeel heb z’n nadeel. (of was het andersom…)