...filmpje, van test-taampjes, gebruikt;
maar in ie6 gaat het de mist in. 'fixje' nodig denk ik ?
Yak! Altijd dezelfde.
Voor het positioneren van de filmstrook kom ik via de oude trukendoos uit op: "voor de oude IE's overal te pas en te onpas {position: relative;} bij zetten, ook als het niet zou hoeven".
Code:
#menuencontent {
position: relative;
}
#raampjes {
position: relative;
}
Dit kan voor de rest van de browsers geen kwaad.
Al doende viel het me ook op dat de strook nogal pittig omvangrijk is: maar liefst 793kB.
Misschien zou dat IE6 ook geen goed doen. Bij kopiëren & inplakken in tekenprogramma bleek: hé, er zitten zwarte ipv grijze tussenstukjes in. - Dus downloaden en openen in tekenprogramma: ja hoor, het is een png met transparantie in de tussenstukjes. Dat vinden oude IE's ook onverteerbaar.
Dat is ook ongeveer 2,5 keer zo snel voor het downloaden. Nu zou het toch goed moeten gaan in IE6:
Helaas doet IE6 het nog steeds niet goed in mijn Virtual PC: de strook is niet zichtbaar. Bij nadere analyse (rem op de snelheid gezet door 1 beeldje per seconde op te schuiven) blijkt dat er elke nieuwe verplaatsing een flits optreedt voordat het nieuwe beeld getoond wordt; bij snellere snelheid gaan de flitsen kennelijk zo snel, dat er helemaal geen beeld meer getoond wordt.
Maar dat zou ook nog aan de Virtual PC kunnen liggen (hoop ik maar): die is altijd al heel traag en slecht in het renderen.
- Graag reactie gevraagd van mensen die een "echte" IE6 op hun kast hebben staan: is er dan wel een zich mooi verschuivende filmstrook te zien?
Zo nee, dan gaan we over tot een paardenmiddel voor IE6: via een Conditional Comment (zie broncode) de beweging stilzetten en alleen de eerste 4 plaatjes laten zien. *)
In het voorbijgaan heb ik de <h2> met de begroeting gecentreerd gezet, dan komt dat ook in IE6 mooi uit tussen de kleine en de grote afbeelding.
En voorafgaand aan alles heb ik de overbodige </div>'s op het eind er uit gehaald, die voor een prettig gestoorde html-validatie zorgden.
O ja, en die merkwaardige eerste regel:
HTML:
<html xmlns:fo="http://www.w3.org/1999/XSL/Format">
die refereert aan een niet aan de orde zijnde XSL-transformatie (
zie hier) heb ik maar vervangen door een geldig DOCtype:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Zijn opeens die
6 Errors, 29 warnings van de html-validator
gesmolten. :d
Ik pluk nog even wat
andere vraagjes.
ik zie dat jij met een list heb gewerkt voor de thumbnails. en toch komen ze netjes links en rechts van elkaar te staan. en niet onder elkaar. hoe komt dat?
- Via {list-style:none;} en li{float:left;} staan de list-items nu in principe allemaal naast elkaar op dezelfde hoogte: voor zover de breedte strekt. Maar omdat de beschikbare breedte hier de breedte van de box eromheen is, die te smal is om alle kleintjes naast elkaar te laten zien, dropt telkens een item dat er niet op past naar beneden (in de box).
- Zo kan je er ook straffeloos een list-item tussenuit halen (of ertussen plakken).
Dan schuift alles mooi vanzelf een plekje op, zonder dat je iets extra's hoeft te doen. 
ik beschouw je wel als een csswonder maar desondanks: hoe weet jij nou weer dat je, en wat voor, aanpassingen ie 6 vereist? ("voor IE6 nog even een fixje erbij ... klaar!")
"even een fixje erbij" was pure grootspraak.
Ik was het straal vergeten, maar het stond al in de broncode van het voorbeeld
http://home.tiscali.nl/developerscorner/css-discuss/showathover2.htm
Indertijd in 2006 was ik behoorlijk aan het zoeken en kloo*en om te ontdekken waarom IE6 het niet deed. Soms kom je daar gewoon niet achter, maar is iemand (vaak puur bij toeval) wel op een op het oog volstrekt onlogische onwaarschijnlijke oplossing gekomen om IE tot de orde te roepen. Zo stuitte ik op deze fix van Ingo Chao van satzansatz.de, die zich ook bewoog op het internationale forum
cssdiscuss waar ik toen aan deelnam (met
dit type topics en een erg uitgebreide
CSS-wiki, waar je zo ongeveer voor alles terecht kunt). Waarschuwing: pas op, zéér verslavend!
Dus vanzelf ging het niet!
- De standaard info-bron voor IE-bugfixes heeft zich in de loop der jaren ook niet onbetuigd gelaten: je kunt altijd een stukje PIE proeven (Position Is Everything).
href="#topzicht". die heb ik nog niet helemaal. ik zie wel een dun groen lijntje, maar verder wordt er nergens naar boven gescrolld. of mis ik de clou?
Als je een grootbeeld-scherm hebt, zou je inderdaad de clou kunnen missen. Als je je resolutie even op 1024x768px of kleiner zet, en dan op
deze kijkt, komen de grote afbeeldingen onderaan niet helemaal in beeld. Als je dan op een kleintje klikt, wordt de bladwijze #topzicht naar die lege paragraaf in werking gezet, verdwijnt de header uit zicht, en plopt je pagina omhoog tot net boven de grote afbeelding: die nu wel helemaal te bewonderen valt. En de andere grote afbeeldingen dan ook, als je verder over de kleintjes zweeft.
van die parentdivs begin ik nu ook in te zien. wat een inteeltzootje. je kunt dus iets positioneren gerelateerd aan een parentelement?
Correctemento!
- Zie ook hoofdstuk "erfgenamen" van de cursus html en css van web-garden.be.
- Hoe de familie DOM (zo heten ze, kan ik ook niets aan doen) in precies elkaar zit, staat uitgebreid bij w3c op de site: het Document Object Model met een kluitje technische rapporten en standaarden. - Daar kan je wel een uurtje leespauze voor uittrekken.
- Dit is vooral belangrijk als je bv. gaat scripten met javascript: via het DOM kan je elk object (desnoods de 24e neef van de 15e paragraaf binnen een container #familiedom) vastgrijpen om er iets mee te doen.
- Een begrijpelijk overzicht vind je in de DOM-tutorial pagina's bij w3schools.com. Even bladeren, en je krijgt meteen een idee waar het over gaat.
.clearB {
clear: both;
height: 1px;
margin-bottom: -1px;
}
hier begrijp ik niet veel van: clear both. als beide kanten vrij zijn mag je info weergeven. zoiets? maar wat doet het verder?
Dat zit als volgt.
Een {float: left;} en/of een {float:right;} zit buiten wat genoemd wordt de "normal flow": de normale stroom van links naar rechts en van boven naar beneden op een html-pagina.
Als je een {float:left;} hebt, gaat daarna de "normal flow" verder op de overblijven de ruimte: rechts ervan, en zodra er onder de hoogte van de float-box ruimte vrij komt, ook daaronder.
HTML:
<div style="float:left; width: 200px; height: 350px; border: 1px solid fuchsia;">
<p>Een drijvende container</p>
</div>
<p style="margin-left: 0;">De normale zee komt ernaast, en ook eronder
als er veel tekst is. Wil je niet dat de tekst van de normale stroom onder
de drijvende container kan komen, dan moet je deze normal flow een
margin-left geven van de breedte van de container.
Dan heb je twee kolommen.</p>
Wil je nu iets nieuws beginnen, dat altijd onder die twee kolommen begint, dan moet je eerst de drijf-container "clearen":
HTML:
... Dan heb je twee kolommen.</p>
<div style="clear: left;">
<p>Deze regel komt onder de float, en ook onder de ingetikte normal flow ernaast.<br>
Zonder clear zou ie gewoon als volgende paragraaf onder de eerdere p van de normal flow komen.</p>
</div>
Als je tegelijk ook een {float: right;} hebt, komt de normal flow tussen de twee floats in (voor zover de binnenbreedte dat toelaat). Wil je dat niet, dan moet je ze alle twee clearen: {clear: both;}.
Nu resteert geloof ik alleen nog een mooie oplossing voor de breedte van liggende afbeeldingen in de hover-galerij.
Maar dat zal later worden.
Met vriendelijke groet,
CSShunter
___________
*) Langzamerhand (nu binnenkort ook IE9 uit het ei gaat komen) wordt het trouwens wel erg de vraag of we met veel kunst- & vliegwerk nog rekening moeten blijven houden met IE6.
