Hoi synchronicspace,
Ook nog even aan het speuren geweest.
- De "ene fout in regel 36" is de eigenschap name="..." die in de Strict-variant van html/xhtml niet gebruikt mag worden.
- Maar als de eerste name="..." van regel 36 verwijderd is, geeft de html-validator ogenblikkelijk een nieuwe "1 error" aan: nu de name="..." in de volgende regel! - Ze moeten er dus allemaal uit. Foutje van de validator: kijkt niet verder dan z'n neus. :shocked:
- Erger is: slopen we alle "names" er uit (een id="..." zou genoeg moeten zijn), dan werkt het script niet.

Dan moeten we onze toevlucht nemen tot het Transitional Doctype om de html valid te laten zijn. Dat even uitgeprobeerd. Helaas: alle browsers vertonen hun kunsten, maar Safari nog steeds niet.
Proefjestijd voot bug-hunten!
- Eerst de achtergrond-wissel uitgezet, en alle afbeeldingen behalve de eerste uitgeschakeld.
- De charset voor alle veiligheid nog even op utf-8 gezet.
- Toen een gekleurd randje om de <div> gezet, om 'm te kunnen zien.
- Ook voor het gemak nog een randje om het img.
Wat zien we:
- Alle browsers doen keurig wat er gevraagd wordt: de afbeelding laat zich verslepen vanuit de div naar een andere plek op het scherm, de afbeelding laat zich schalen, en als je de div verplaatst, gaat het er op afstand aan geplakte img prachtig mee over het scherm: samen op weg in Internet Explorer (7 in mijn geval), Firefox, Opera.
- Zie hier test 1.
- Maar niet in Safari! En ook niet in Chrome, trouwens.
Door de gekleurde randjes kunnen we echter wel de diagnose bij patiënt Safari stellen:
- De <div> en het <img> zijn ook bij Safari in principe aanwezig en zitten op de goede plaats.
- De <div> laat zich goed verplaatsen, en het <img> gaat ook mee.
- Maar de border om het <img> laat zien, dat het <img> geen hoogte heeft: het is alleen een lijntje met de breedte! Met wat handigheid is wel het groene strookje los te trekken van de <div> en apart te positioneren; daarna ook nog mogelijk: via de <div> gekoppeld verplaatsen. Maar nog steeds geen <img> te zien.
Vandaar dat er zonder borders helemaal niets op scherm komt! Dus de html-broncode ingedoken om te zien hoe dat zit.
- Het <img> heeft alleen een opgegeven breedte. Normaal gesproken zou Safari dan de bij[passende hoogte moeten uitrekenen en het totaal gaan renderen, maar kennelijk gebeurt dat nu niet. Het zou kunnen dat het script in de weg zit.
Daarom zelf bij de in de html verkleinde breedte van de afbeelding de bijbehorende hoogte uitgerekend, en die in de html erbij gezet. Hopend dat de hoogte nu niet het script in de weg zit...
Nu de borders er weer af:
Met goede moed nu de starthoogtes van alle andere afbeeldingen uitgerekend en in de html gezet:
Zo, paasei is gelegd. Hoop dat ie het bij jou ook op deze manier doet.
Met vriendelijke groet,
CSShunter
PS: ik merk nu, achteraf, een verschil in Safari bij lokaal testen van test-1 en testen van hetzelfde bestand vanaf een echte site! - Lokaal is Safari een stuk wispelturiger: soms goed, maar meestal fout. Dat zou misschien te maken kunnen hebben met de Safari-beveiliging voor uitvoeren van javascript op lokale bestanden.
PS2: ben wel reuze nieuwsgierig geworden naar die onzichtbare <div>-verpakkingen: komen daar nog dingen in ofzo?