jce editor, IE doet moeilijk

Status
Niet open voor verdere reacties.
Hoi jeel2008,
Dit is best een lastige. ;)
  • Als je in IE met de muis over de vlinder beweegt, zie je in de statusbalk wel de link waar een klik naartoe zou moeten gaan.
  • Maar een klik werkt niet, en het hoveren over het plaatje geeft ook geen verandering van cursor te zien (van pijltje naar handje).
  • Hoveren over het onderschrift geeft ook geen handje te zien, maar een tekst-cursor (rechtopstaand streepje).
  • En ... een klik op het onderschrift doet het wel! :shocked:

De html-validator geeft het groene veilig-signaal af, en in de html is er dan ook niets te zien dat er op wijst dat IE het fout zou kunnen doen ...
... in de css ook niet ...
... dan blijft over: de scripts.

Eens in FF gekeken naar de "generated source code", en daar komt de aap uit de mouw! :d
Bij het vlinder-plaatje staat nu in plaats van:
HTML:
<div class="art-article">
   <a href="/index.php?option=com_content&amp;view=article&amp;id=47&amp;Itemid=28"><img 
   style="border-width: 0px; border-style: none; float: right;" 
   src="/images/stories/rechtsboven/vlinder.png" alt="Foto's Wereldvlinders" 
   title="Foto's Wereldvlinders" class="caption" /></a>
<h1>Vlindertekeningen</h1>
enz.
opeens:
HTML:
<div class="art-article">
   <a href="/index.php?option=com_content&amp;view=article&amp;id=47&amp;Itemid=28">
      <div style="float: right; width: 160px;" class="img_caption right">
         <img style="border-style: none; border-width: 0px; float: right;" 
         src="/images/stories/rechtsboven/vlinder.png" alt="Foto's Wereldvlinders" 
         title="Foto's Wereldvlinders" class="caption">
         <p class="img_caption">Foto's Wereldvlinders</p>
      </div>
   </a>
<h1>Vlindertekeningen</h1>
enz.
Er is hier automatisch een onderschrift ("caption") aan toegevoegd met het Joomla-javascript caption.js.
Maar ... dit heeft om het img heen een <div> gedrapeerd, zodat ook de <p> regel met de tekst van het onderschrift in het vakje past. Daarbij hebben ze er geen rekening mee gehouden dat een image-met-caption ook wel eens een link kan zijn, dus in de vorm van:
HTML:
<a href="...">
   <img src="..." enz.>
</a>
Als je hier een <div> om de img gaat zetten, wordt het:
HTML:
<a href="...">
   <div>
      <img src="..." enz.>
      <p>...</p>
   </div>
</a>
... en dan zit een block-element <div> binnen een inline-element <a>: mag niet!

Wat nu? Als er een fout in de code zit, gaat een browser eerst kijken of de zaak gered kan worden met de ingebouwde foutafhandeling van die browser. - Nu zijn er wel html-voorschriften over hoe valid code hoort te zijn, maar geen gedetailleerde voorschriften hoe foutafhandeling er uit moet zien. Dat kan ook moeilijk, want je weet van tevoren niet wat voor fouten er allemaal in gestopt zouden kunnen worden: tig mogelijkheden! Vandaar verschilt de foutafhandeling per browser, en kan het kloppen dat Firefox het in dit geval goed oppakt, en IE niet.

De oplossing is hier: in het script het aanmaken van een <div> vervangen door het laten aanmaken van een <span>, want een span mag wel binnen een <a>. Nu blijft er nog een <p> binnen de <a> over, wat ook niet hoort. Maar dat blijkt voor IE (IE7 getest) geen struikelblok te zijn. Aldus het script veranderd.

  1. Gebruik voor deze pagina niet het script caption.js maar het script caption-new.js (http://developerscorner.nl/csshunter/tests/scripts/caption-new.js).
  2. D.w.z. de caption-new.js naar je mapje "/media/system/js/" uploaden, en in de <head> van deze pagina de link ernaartoe aanpassen.
  3. Verander verder de html als volgt:
HTML:
<div class="art-article">
	<a style="margin-left: 20px; float: right;" 
		href="/index.php?option=com_content&amp;view=article&amp;id=47&amp;Itemid=28"><img 
		src="/images/stories/rechtsboven/vlinder.png" width="160" height="120"
		class="caption" style="border: 0;" title="Foto's Wereldvlinders" 
		alt="Foto's Wereldvlinders" />
	</a>
<h1>Vlindertekeningen</h1>
enz.
Nu gaat het goed, ook in IE:
  • Testpagina Wereldvlinders:
    http://www.developerscorner.nl/csshunter/tests/wereldvlinders.htm. :)

  • Nu is ook in IE de handjes-cursor te zien, zowel als je over het plaatje als over het onderschrift muist.
  • Of het script ook voor andere pagina's nodig is, c.q. of het daarin ook werkt, heb ik niet nagegaan. Het oude bestand caption.js blijft er dus gewoon naast bestaan: niet hernoemen!
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
ie en jce

hallo css hunter, bedankt voor je antwoord. ik kon je heel ver volgen, heb gedaan wat je zei,
maar bij

'in de <head> van deze pagina de link ernaartoe aanpassen.' haakte ik af.
waar precies is dat?

nb: wat bedoel je precies met : in de <head> van deze pagina?
misschien een uitgelezen moment om eens te vragen wat ik vermoed, want van die head in joomla heb ik nooit veel begrepen: er is maar 1 head, die in de indexpagina van joomla. die head komt in elke pagina terug die op de server html-gegenereerd wordt zal ik maar zeggen. zit het zo? de rest van de info is body bestaande uit diverse modules. zoiets.
 
Laatst bewerkt:
Ai, dat zou betekenen dat we alleen maar voor alle pagina's tegelijk dat caption.js zouden kunnen vervangen, maar ik weet niet wat daar de gevolgen van kunnen zijn.
Dus moeten we het anders gaan aanpakken.

Nieuwe oplossing
  • Als op een pagina het caption.js script niet goed werkt ... dan gebruiken we het script niet. :p
  • Dat kan door bij het img de class="caption" er uit te halen.
  • Gevolg: nu is het onderschrift weg.
  • Maar dat hoeft er helemaal niet automatisch bijgezet te worden via een script!
    Dat kunnen we ook met de hand doen. :d
En dat kan eigenlijk heel simpel.
Je maakt van de passage:
HTML:
<div class="art-article">
	<a id="newscript" 
		style="margin: -60px 0 30px 20px; float: right; text-align: center;" 
		href="/index.php?option=com_content&amp;view=article&amp;id=47&amp;Itemid=28">
		<img src="/images/stories/rechtsboven/vlinder.png" width="160" height="120"
		style="border: 0;" title="Foto's Wereldvlinders" 
		alt="Foto's Wereldvlinders" /><br />
		Foto's Wereldvlinders
	</a>
<h1>Vlindertekeningen</h1>
enz.
De oorspronkelijke verwijzing naar het caption.js blijft dus gewoon bestaan, en caption-new.js kan je vergeten.
Da's wel zo makkelijk, toch?

Met vriendelijke groet,
CSShunter
 
link

hallo csshunter,
wederom dank.
echter, vanochtend heb ik gewoon het hele plaatje verwijderd en opnieuw de link aangemaakt.
nu zonder onderschrift. toen ineens werkte het wel in IE.
ik vermoed dat de JCE editor met zichzelf overhoop ligt.
er is een mogelijkheid om het plaatje + link aan te passen (1)
en eentje om alleen de link aan te passen (2)
zie image
daar struikelde IE over denk ik, daar ik met beide was bezig geweest

ps hoor ik net van de opdrachtgever dat ie de oude site terugwilt...
2 dagen voor jan met de korte achtenaam zitten werken.
hopelijk kan ik de joomla index gewoon vervangen door de oude index
 

Bijlagen

  • jce.jpg
    jce.jpg
    70,8 KB · Weergaven: 61
Laatst bewerkt:
echter, vanochtend heb ik gewoon het hele plaatje verwijderd en opnieuw de link aangemaakt.
nu zonder onderschrift. toen ineens werkte het wel in IE.
Ja, dat klopt, dat is het derde stipje onder Nieuwe oplossing in m'n vorige post.

Maar de echte fout zit is het captions.js script, dat bij elke pagina automatisch alle images aframmelt (of ze nu links hebben of niet), en er een onderschrift onderzet als het img de class="caption" heeft gekregen. Daarbij wordt dus een <div> geplaatst die er helemaal niet hoort.
Deze keer treft IE geen blaam: uitzondering! ;)

Behoorlijk jammer van die "nieuwe opdracht", maar je moet maar denken: al bezig zijnde weer wat geleerd.

Met vriendelijke groet,
CSShunter
 
Als ik online de #apDiv1 uitschakel door er even #aapDiv1 van te maken, komt de scrollbar meteen tevoorschijn.
Dat kan kloppen, want de #apDiv1 waar alles in zit heeft een vastgeprikte breedte èn hoogte van 100%.
  • Kan die hele <div> niet gemist worden?
  • Anders is het waarschijnlijk op te lossen door er #apDiv1 {overflow: auto;} bij te zetten.
 
div

hallo csshunter
het is hier een grote soepzooi aan het worden.
heb de joomlasite weer maar teruggezet.

het geklooi met die divs begon omdat de client een oprekbaar achtergrond image wilde.
de moest meerekken m et de grootte van het scherm v/e gebruiker.

dus heb ik 2 divs gemaakt.
1 met de achtergrondfoto (de 'V', die grijze)
en daarop een div met content.

maar blijkbaar is er iets helemaal misgelopen.

moet me echt gaan verdiepen in css.

nog iets: is die joomla - site , die nu online is, www.vlinderkas.com, bij jouw langzaam?
bij mij helemaal niet. volgens mij klets ie een beetje uit zn nek.
maar goed, de klant is koning.
 
Laatst bewerkt:
het geklooi met die divs begon omdat de client een oprekbaar achtergrond image wilde,
de moest meerekken m et de grootte van het scherm v/e gebruiker.
Zeg maar namens mij, dat een oprekbaar achtergrond-image bij de huidige stand van zaken van de verschillende browsers bijkans schier onmogelijk is! ;)
 
is die joomla - site , die nu online is, www.vlinderkas.com, bij jouw langzaam?
bij mij helemaal niet. volgens mij kletst ie een beetje uit zn nek.
Nou, je moet in FF (met Webdeveloper toolbar) de cache eens uitzetten, want jij hebt natuurlijk de site zo vaak bekeken, dat alles al lokaal in je Tmp Internet mapje zit.
De Homepage viel me tegen: daar zitten maar liefst 36 http-requests in, en vreselijk veel te preloaden images (250kB aan images).
Het Page Speed Report van websiteoptimization.com zegt o.a.:
Code:
Connection Rate		Download Time
56K  			84.59 seconds
ISDN 128K 		30.90 seconds
T1 1.44Mbps 		9.26 seconds
Als je de bestandsgrootte van de plaatjes kan verkleinen, zou dat mooi meegenomen zijn.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
css

heb je het nu over de site de joomlasite die er NU opstaat of die oude htmlsite?
 
site

je hebt helemaal gelijk.
ben helemaal opnieuw begonnen met die site, t was een ware puinhoop.
ben nu met Artisteer bezig de zaak op te zetten, maar ik heb het altijd het idee dat Artisteer ook niet zo bevorderlijk is voor de snelheid.

had ik maar doorgeleerd.
 
Tja, wat mij ontzettend veel tijd heeft gescheeld denk ik, is dat ik (na mijn eerste wederwaardigheden met een oude FrontPage) nooit zo'n "geavanceerd/alleskunnend" webbouwprogramma als Dreamweaver heb aangeschaft, en ook niet zo wows ben van al die javascript-bibliotheken en (spry-menu e.d.). Ook CMS-systemen hebben zo hun eigen hebbelijkheden en onhebbelijkheden. Er zitten op zich best hele leuke dingen in, maar het moet wel werken!
Ik doe het op z'n Spartaans met een Kladblok met kleurtjes en nog wat handigheidjes (Notepad++).
Want:
Als je een programma (met toebehoren) gebruikt, moet je:
  • leren hoe het programma & de toebehoren precies werken om ze vlekkeloos te kunnen gebruiken,
  • en óók html, php, css en javascript leren om die programma's en toebehoren zo nodig te kunnen corrigeren.
Ik hoef alleen maar html, css, php en javascript te leren! ;)
En als er iets fout gaat, weet ik zeker dat ik dat zelf gedaan heb, en hoef me niet óók nog eens af te vragen (met uitgebreide analyse, en/of bijkomende naspeuringen op Google en forums) of het gebruikte programma soms wat raars heeft gedaan (zoals een caption.js met een foute div er in).
Terzijde: tot dusverre werk ik niet met loeigrote sites die een uitgebreid CMS nodig hebben; met wat php kan ik me prima redden.

- Als het aan mij zou liggen, zou ik een supersimpele homepage voor de Vlinderkas maken, die er precies uitziet als de huidige, en die precies doet wat verlangd wordt zonder toeters en bellen.
Ter vergelijk:
Code:
			[U]origineel[/U]	[U]nieuwe versie[/U]

Op scherm bij modem:	84sec		17sec
Download-tijd:				20% van orig.
Aantal http-requests:	36		5
Aantal images:		27		3
Omvang images:		   245kB	   78kB
Aantal scripts:		3		0
Aantal css-imports:	5		1
Regels html:		126		37
Omvang html:		     6kB	    2kB
Omvang totaal:		   388kB	   81kB
Die is 5x zo snel dus. Maar ik vrees dat je zo'n eigen baksel niet zonder halsbrekende toeren als index.html in Joomla of een ander systeem kan zetten...

Succes in ieder geval met de nieuwe bouw!
CSShunter
 
Laatst bewerkt:
sites

hallo css hunter,
je hebt wederom helemaal gelijk: zelf leren was het beste geweest.html is niet zo'n probleem, css kan ik wel enigszins, maar als ik sommige javascript code zie of php zakt de moed me in de schoenen. code die voor mij haast complete adacadabra is. ik ontbeer de tijd en de zin dit te gaan leren. ik vind mezelf dan ook meer een 'toepasser' van applicaties en code dan een webdeveloper en programmeur. en zoiets als artisteer en/of joomloa maakt het leven wel zo gemakkelijk op dit gebied. als ik al een webdeveloper ben, dan wel een hele luie.
maar zoals je zegt: gaat het mis, dan moet je gaan zoeken. in alle hoeken en gaten. boeken, forums etc.

joomla is een cms dat ik een beetje ken. maar het is vaak nogal groot voor een kleine site.
echter, de vele componenten en plugins vind ik wel zo gemakkelijk. maar ook hier: gaat het fout, dan heb je een probleem.

hoe dan ook: ik wacht eigenlijk op html5 en probeer de energie te vinden om dat onder de knie te krijgen.
hopelijk cover ik met html5 zaken als javascript en misschien php.

in ieder geval bedankt en de groeten. die test van vlinderkas ziet er heel overzichtelijk uit, het moet gezegd.

ik ben sinds gisteren maar weer bezig de oude site op te zetten, dat vroeg ie immers.
mn paginas baseer ik op de site van www.naturama.nl die ik ook voor hem maakte. (incl appdivs).
deze site legt het kwa kwaliteit van de code wel af tegen jouw testsite.
kwa kwantiteit helaas niet ben ik bang.

ps hoe zie je dat zo snel, hoe lang een site laadt, zoals het kadertje in je antwoord hierboven?
en is het zo dat een site alles begint te laden als je de eerste pag opent, of alleen nog maar wat ie voor die bewuste pag nodig heeft?
 
Laatst bewerkt:
Hoi Jeel,
ps hoe zie je dat zo snel, hoe lang een site laadt, zoals het kadertje in je antwoord hierboven?
  • Via het linkje naar websiteoptimization.com van nr. #12 hierboven: http://websiteoptimization.com/services/analyze/.
  • Als je de Webdevelopers Toolbar voor Firefox aan hebt staan, dan zit een directe link opgenomen in het menu "Tools > View Speed Report".
  • Webdevelopers Toolbar? Absolute Aanrader! - Ik heb gruwelijk de pest aan extra toolbars, maar voor deze FF add-on maak ik een grote uitzondering. Voor wie 'm nog niet heeft, meteen binnenhalen: http://chrispederick.com/work/web-developer/.
is het zo dat een site alles begint te laden als je de eerste pag opent, of alleen nog maar wat ie voor die bewuste pag nodig heeft?
  • Dat hangt van die eerste pagina af: in principe alleen wat voor die pagina nodig is, tenzij opdracht gegeven wordt zaken te preloaden (die nog niet voor die pagina nodig zijn, maar later wel).
  • Maar meestal zit in de homepage de nodige overhead: bv. in het algemene stylesheet zullen dingen staan die voor deze pagina nog niet nodig zijn (o.a. style-regels voor <div>'s die helemaal niet in deze pagina zitten, en background-images die later een rol gaan spelen). Ook verderop te gebruiken scripts kunnen alvast aangeroepen worden: dan zijn ze er vast.
Toen ik eens ging rondneuzen op www.naturama.nl, viel het me (via het Web Speed Report) op, dat er een hele serie bg-images in het stylesheet zitten die ik op de hele site niet tegenkom (bv. borderTopRight.png). Maar misschien heb ik niet alles geraakt om 'm tegen te komen.

Wat ik ook zag, hoera!, is dat de Wereldvlinders-fotopagina daar (http://www.naturama.nl/fotos_wereldvlinders.php) wel snel is: en daar is het preloaden uitgezet. :)

Tot slot: ik zou geen intro-pagina meer maken ("Dit is onze website - klik om binnen te komen"). Vroeger was dat vrij gangbaar, maar de tegenwoordige bezoeker is ongeduldig, en wil meteen iets zien. Ook is zo'n lege intro-pagina niet zo zoekmachine-vriendelijk (of: te vriendelijk!), want omdat er geen content met mooie trefwoorden op staat, komt de pagina lager in de ranking (of helemaal niet in de resultaten) dan andere pagina's van de site die wel content hebben.
Nog 2 tipjes:
  • De Algemeen-pagina van hierboven heeft als browserbalk-titel "Naturama", als menu-link de naam "Algemeen", en als paginakop "Het Idee". Voor mens en zoekmachine nogal verwarrend: beter is om één trefwoord voor alles te gebruiken, dan zie je meteen waar je zit (uitzondering: de homepage mag in het menu de naam "Home" krijgen). Voor deze pagina bijvoorbeeld als <title> en als kop: "Naturama: kunst, cultuur en ecologie in Nijmegen" of zoiets.
  • Zet de belangrijkste kop er niet als een gewone (gestylde) <p> in, maar als een (gestylde) <h1>. Dat geeft een betere paginastructuur, en zoekmachines zijn er dol op.
Met vriendelijke groet,
CSShunter
 
balk

hallo csshunter,
ik heb de balk geinstalleerd, altijd handig, bedankt voor de tip.

die intropagina wilde de client zelf. t is een kunstenaar. ditjes en datjes.
zelf opteer ik er ook niet voor, maar ja.
als ik naturama vandaag heb afgemaakt, zal ik er volgende week, na mn vakantie, eens met de bezem doorheen gaan, want een van mn sterke punten is er een ongelooflijke puinhoop van maken op de server, net zoals op mn pc trouwens.
dan ga ik ook de vlinderkasversie van jou bekijken. die oogt lichter en luchtiger.

ik kom ongetwijfeld weer met vragen op dit forum, maar voor nu bedankt voor de vele raadgevingen.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan