Tabel:"valign=middle" is niet in alle browsers hetzelfde

janyep · 7 jan 2012

Hallo
een voorbeeldje staat hier = ...
In FireFox en IE wordt dit prima weergegeven,
in Google Chrome en Opera worden de twee onderste cellen rechts naar boven gedrukt

Code:

<table width="600" cellpadding="5" cellspacing="0" border="1" bgcolor="yellow">
	<tr valign="top"><td rowspan="3">linkerkolom</td>
		         <td>rechtsboven</td>
	</tr>
	<tr valign="middle"><td>rechtsmidden</td></tr>
	<tr valign="bottom"><td>rechtsonder</td></tr>
</table>

Weet iemand raad? Zou er heel blij mee zijn!
groeten janyep

That Guy · 7 jan 2012

Ik zou je tabellen stylen met CSS, niet met (obsolete) HTML. Hieronder een stukje voorbeeld pagina. Werkt overal hetzelfde.

HTML:

<!doctype html>

<html>

   <head>

      <style>

         table
         {
            border: 1px solid #f0f;
            width: 600px;
            height: 300px;
         }

         table td
         {
            border: 1px solid #aaa;
         }




         .rb
         {
            vertical-align: top;
         }

         .rm
         {
            vertical-align: middle;
         }

         .ro
         {
            vertical-align: bottom;
         }


      </style>

   </head>

   <body>

      <table>

         <tr>

            <td rowspan='3'>
               linkerkolom
            </td>

            <td class='rb'>
               rechtsboven
            </td>

         </tr>

         <tr class='rm'>

            <td>
               rechtsmidden
            </td>

         </tr>

         <tr class='ro'>

            <td>
               rechtsonder
            </td>

         </tr>

      </table>

   </body>

</html>

janyep · 8 jan 2012

Super That Guy, bedankt voor de tijd die je hier in hebt gestoken.

... Maar het werkt nog niet helemaal. Het gaat fout op het moment dat de hoogte van de linkercel hoger wordt (oftewel: als de tekst veel langer wordt).
.... En het kwartje wil maar niet vallen ...

Heb je chrome of opera? Zou je daarmee nog eens willen kijken naar de volgende pag.'s?
Andere suggesties zijn ook welkom!

...

...

tjonge jonge. nu zie ik gelijk / nu zie ik pas dat (alleen in chrome) het interne anker #Hordaland uitkomt op #Rogaland.
oplossing wellicht: ...www.webklik.nl/forum/...

Nogmaals dank,
groeten janyep

csshunter · 13 jan 2012

Hoi janyep,
Sinds een grijs verleden heb ik me nooit meer zo met tabellen beziggehouden, dus ik heb m'n css-huisbijbel er maar eens op nageslagen: de css-specificatie.
En daar zit de nattigheid: deze geeft bij overbloezende tabel-hoogtes geen uitsluitsel!

"CSS 2.1 does not define how extra space is distributed when the 'height' property causes the table to be taller than it otherwise would be."
http://www.w3.org/TR/CSS2/tables.html#height-layout

Dat betekent: browsers mogen zelf zien hoe ze dat aanpakken. Dat kan op verschillende manieren, en dat doen ze dan ook...
Daarom kan je kwartje niet vallen: er valt met css niets aan te doen.

Als je bv. de linkercel geen hoogte geeft, en de rechtercellen allemaal een vaste hoogte van 100px, dan zijn er ook verschillen.

Zie deze: bliksekaters.nl/tests/tabel-test-R100px.htm
Firefox heeft bedacht dat het teveel aan hoogte aan de linkerkant naar verhouding uitgesmeerd moet worden over de cellen aan de rechterkant.
Chrome doet het anders. Die zet de eerste vier rechtercellen op de opgegeven hoogte, merkt dan dat er hoogte over is, en stopt het overschot integraal in de vijfde rechtercel.

Ook met {min-height} valt in tabellen weinig te bereiken.
Maar als het niet goedschiks gaat, dan kwaadschiks: we roepen javascript te hulp!

Je kunt met javascript de echte uiteindelijke hoogte van de linkerkolom opmeten, dat delen door het aantal 5 van de rechtercellen, en dat is dan de hoogte die aan de rechtercellen wordt toegediend.
Zo moeten ze wel, de onwillige browsers!

[JS]function verdeel(){
cellH=document.getElementById('leftcol').offsetHeight/5;
var rightCells=document.getElementById('myTable').getElementsByTagName('td');
for (var i=1; i<rightCells.length; i++){
rightCells.style.height=cellH+'px';
}
}

window.onload=function(){
verdeel();
}
[/JS]
Er wordt zo iets teveel hoogte voor de rechterkant berekend, want de borders en de marges tussen de cellen komen er nog bij. Dat kan eventueel ook nog uitgezuiverd worden, maar beter iets teveel hoogte in de linkerkolom dat ongelijke hoogtes van de rechtercellen.

Test: bliksekaters.nl/tests/tabel-test-javascript.htm.

Alle browsers komen nu met hetzelfde uit de bus: FF, Chrome, IE, Opera en Safari.

Met vriendelijke groet,
CSShunter
_______
PS: Als je in de test herhaald op "verdeel" klikt, worden de rechtercellen steeds iets groter: omdat de linkerkolom iets was toegenomen.
Maar in het echt gebeurt het natuurlijk maar één keer, bij de start.

PS-2: Misschien is er nog een oplossing: binnen de tabel twee tabellen maken, één i.p.v. de linkerkolom, en één met alles van de rechterkolom. Maar dat heb ik niet geprobeerd: van tabellen in tabellen krijg ik een beetje de bibbers.

PS-3: En misschien nog een derde oplossing: de tabellen vergeten, en er <div>'s met een {display:table}, {display:table-cell}, enz. van maken. Maar of dat kan, hangt van de toepassing / opmaak af die je voor ogen hebt.

janyep · 13 jan 2012

Oh man, je weet niet hoe blij ik hier al mee ben!

Hallo csshunter

Wat gaaf zeg, dit lijkt heel mooi te werken.
Oh man, je weet niet hoe blij ik hier al mee ben!

...

Alleen nog een "kleinigheidje" ...
... Laat ik nou ooit in een ver verleden de website hebben opgebouwd uit één hoofdtabel met daarin <tr>'s met niet evenveel rowspan's ...

Optie 1 Wellicht zouden er dus verschillende "myTable"'s moeten komen met ieder hun eigen javascript

function verdeel5(){
cellH=document.getElementById('leftcol').offsetHeight/5;
var rightCells=document.getElementById('myTable5').getElementsByTagName('td');

function verdeel20(){
cellH=document.getElementById('leftcol').offsetHeight/20;
var rightCells=document.getElementById('myTable20').getElementsByTagName('td');

Optie 2 Maar natuurlijk zou ik veel liever de hoofdtabel intact laten en alleen verschillende "leftcol"'s aan het script toevoegen.

Code:

<table id="myTable" class="helpmij"> 
	<tr>
		<td id="leftcol" rowspan='5' valign="top">

Misschien vraag ik nu iets wat helemaal niet kan: dat komt dan doordat ik helemaal niets weet van javascript ...
(body onload="verdeel()" = in elkaar geknutseld vlgns. een al werkend script op m'n siteje ...)

Ben benieuwd of je nog met iets komt! Maar nogmaals: dit is al helemaal geweldig en als het niet anders kan dan wordt het Optie 1

bedankt, gr janyep

That Guy · 14 jan 2012

Eh, ohja, dat wou ik nog even melden. Misschien is het een idee om je website met verschillende pagina's op te bouwen. Dat scheelt in dingen als laadtijd en de grootte van de scrollbar

Over de verdeel functie: hier is een generieke versie (met wat updates) met als uitgangspunt de code van css hunter die als parameters de tabelnaam en hoeveelheid rows eet. Oh, en je kan natuurlijk ook altijd nog de 'leftcol' id als parameter maken.

[JS]function verdeel(tabelID, aantal)
{
var i,
cellH = document.getElementById('leftcol').offsetHeight / aantal,
rightCells = document.getElementById(tabelID).getElementsByTagName('td'),
len = rightCells.length;

for(i = 1; i < len; i++)
{
rightCells.style.height = cellH + 'px';
}
}[/JS]

dus:

[JS]verdeel('myTable', 5); // voor 5 dingetjes en tabel myTable
verdeel('myTableMoar', 20); // voor 20 stuksin een andere tabel[/JS]

etc. M'n toetsenbord hapert een beetje dus er kunnen wat typefouten inzitten.

:thumb:

csshunter · 14 jan 2012

Ha, er is nog een optie 3! :d
Dat is:

géén verschillende myTables's,
een intacte hoofdtabel,
ook géén verschillende "leftcol"'s aan het script toevoegen,
je niet moe maken,
javascript alles lekker automatisch laten uitzoeken.

Via het DOM (Document Object Model), dat beter SLIM had kunnen heten, zijn namelijk alle afzonderlijke elementen op een webpagina traceerbaar, en ze kunnen met javascript opgevraagd en/of aangepast worden.

Als je precies vertelt wat je wilt, dan gebeurt het gewoon!
Aldus uit de automatenfabriek een zelfdenkend robotje:
[JS]// <![CDATA[

function verdeel(){
var myTable=document.getElementById('myTable'); // zoek de hoofdtabel "myTable" op
var allCells=myTable.getElementsByTagName('td'); // verzamel alle td's in myTable
var zoveel=allCells.length; // bepaal hoeveel er in de verzameling zitten

for (var i=0; i<zoveel; i++){ // loop alle td's van de tabel langs
if (allCells.getAttribute('rowspan')){ // als er een td is met een rowspan
var aantal=allCells.getAttribute('rowspan'); // noteer aantal overspannen rows
aantal=parseInt(aantal); // maak van string een getal

var spanH=allCells.offsetHeight; // meet hoogte van deze linkerkolom op
var cellH=spanH/aantal; // celhoogte is dan linkerkolom gedeeld door aantal rechts
var laatste=i+aantal; // laatste rechtercel van deze serie
for (var j=i+1; j<=laatste; j++){ // loop nu van eerstvolgende rechtercel tot laatste rechtercel
allCells[j].style.height=cellH+'px'; // en geef die cellen hun goede hoogte
}
}
// ga dan naar de volgende td met een rowspan, en doe daar hetzelfde tot er geen rowspan meer gevonden wordt
}
// nu zijn alle td's met een rowspan geweest: de cellen ernaast hebben hun hoogte, en de functie is klaar
}

// ]]>
[/JS]
De eerste en laatste regel, met die CDATA-dingen (="character-data") horen erbij als het script op de pagina zelf staat (stond nog niet in de vorige versie).
Als het een los .js bestandje wordt, hoeft het daar niet bij.

Reden: dit is geen normale html-code die op de pagina staat, maar javascript; de code daarvan moet dan niet als html geïnterpreteerd worden, maar als domme lettertekens (characters) zonder betekenis (voor de html dan).

Omdat er de <script type="text/javascript"></script> tag omheen zit, weet de browser wat ermee moet gebeuren: doen wat er staat!

Maar niet langer de spanning opgebouwd , kijk:

bliksekaters.nl/tests/tabel-test-javascript-2.htm

Met vriendelijke groet,
CSShunter
__________
PS: Ik kan er zelf ook bijna geen genoeg van krijgen om 'm steeds aan te klikken en telkens opnieuw te constateren dat ie echt-waar-helemaal-vanzelf-blijft werken.
Dat het allemaal maar kan! :d

<edit>
Ha, een duidelijk geval van kruispost weer!
Omdat het hier gaat om 1 tabel met gelijkvormige "subtabellen" (gelukkig geen tabellen in tabellen), hoef je met een nog iets generiekere functie helemaal niets meer in te vullen. Iets meer script (kan ook nog gecomprimeerder), maar als het er in zit kan je er zelf geen fouten meer bij maken.
</edit>

csshunter · 14 jan 2012

... en de #Hordaland bladwijzer die in Chrome naar #Rogaland springt: dat gebeurt niet alleen met Hordaland, maar ook met de andere bladwijzers naar provincies.

Hoe kom je er aan?

De bladwijzers zitten allemaal onderin de linkerkolom-cel van de provincie erboven (daarna komen de rechtercellen met de prov.namen nog voordat de volgende provincie begint).

HTML:

...
      <BR><!-- hier eindigt de tekst van rogaland --><A NAME="Hordaland"></A><BR>
      <DIV CLASS="print"><CENTER><DIV CLASS="provbalk"></DIV></CENTER></DIV>
   </TD>
   <TD CLASS="provr" VALIGN="top"><DIV CLASS="provrbalkje no-print"></DIV>
   </TD>
</TR>
<TR>
   <TD CLASS="provr" VALIGN="top"><SPAN CLASS="no-print">
      <BR>R<BR>O<BR>G<BR>A<BR>L<BR>A<BR>N<BR>D</SPAN>
   </TD>
</TR>
... enz.

De bladwijzers zitten dus tussen twee <br>'s, en het zijn alleen lege links <br><a name="Hordaland"></a><br>.
Daarmee nemen ze geen hoogte in, en Chrome heeft kennelijk de neiging om alle onbekende dingen in tabellen naar boven te zetten (zoals ook bij de rechtercellen die allemaal bovenin komen te hangen).
In Chrome gaat het aangrijpingspunt van de bladwijzer naar zo hoog mogelijk in de linkerkolom-cel: en dat is precies het begin van de vorige provincie!

Hoe kom je er af?

De ene manier: een loze spatie zetten tussen de <a> van de bladwijzer en de <br> er voor of erna:
<br> <a name="Hordaland"></a><br>
Dan is er een regelhoogte, en de bladwijzer sprin(g)t dan naar die regel.
De andere manier: de bladwijzer niet onderaan in de vorige provincie zetten, maar bovenaan in de echte provincie waar het om gaat. Dat is ook veel duidelijker!

Dan haal je de bladwijzers weg waar ze nu staan, en je monteert ze in als ID in de eerste cel van de nieuwe provincie:

HTML:

<!-- nieuwe prov hordaland --><!--  --><!--  --><!--  --><!--  --><!--  --><!--  --><!--  -->
<TR><TD id="Hordaland" ROWSPAN="26" VALIGN="top"><!-- hier komt de tekst van hordaland -->
...

Nu kan ook Chrome er niet onderuit.

Met vriendelijke groet,
CSSHunter
____________
PS-1: Hm, die "Stone's WebWriter 3.5" maakt er niet al te beste code van. Lijkt erg op de FrontPage-code, waar hier in het forum al jaren over gemekkerd wordt: volstrekt verouderde codes, verboden waar qua webstandaarden, onhandige constructies, enz. ... Je zou het eens kunnen proberen met KompoZer (wel even een backup maken voor je weet maar nooit). Is ook gratis, maar is moderner en volgt vrijwel alle huidige webstandaarden.

PS-2: Inderdaad zijn de pagina's aan de lange kant, zacht gezegd. Het zit bomvol waardevolle info en links, en het zou jammer zijn als de bezoeker door de bomen het bos niet meer ziet. De structuur is heel consequent (alle dingen worden ook steeds op dezelfde manier gepresenteerd), maar het is de vraag of de argeloze bezoeker dat allemaal kan bevatten.

Opsplitsen in meer hapklare brokken zou helemaal niet zo gek zijn (wel een werkje waarvoor "even" tijd gevonden moet worden, zou mooi gecombineerd kunnen worden met het uit het window werpen van de tables...). Daardoor zal ook de pagina-snelheid met sprongen omhoog gaan, want de deel-1 pagina is nu met alle afbeeldingen, stylesheets en scripts mee ... ruim 2,5MB, en dat is nogal wat.

janyep · 14 jan 2012

Het is BIJNA echt helemaal geweldig

... durf het bijna niet te zeggen, maar: in de linkerkolom staan dus wel geneste tabels ...
... en dan KLIKt er dus niets meer ...

1. Alle cellen rechts hebben reeds class='provr'
deze class staat bij mij in <td
deze class staat bij jou op de plaats van <tr class='rm'>

Code:

	[COLOR="royalblue"]<tr class='rm'>[/COLOR]
		[COLOR="red"]<td class='provr'>[/COLOR]
			rechtsmidden
		</td>
	</tr>

2. Als de linkerkolom nou (ook) eens zou krijgen class='provl'

Code:

	<tr>
		[COLOR="red"]<td class='provl'[/COLOR] rowspan='7' valign="top">
			01<br />..<br />40<br />eindregel linkercel
		</td>
		<td class='provr rb'>
			rechtsboven
		</td>
	</tr>

3. En als die beiden ( 'provr' en 'provl' ) dan konden worden meegenomen in het .js ?

i.p.v.
var allCells=myTable.getElementsByTagName('td'); // verzamel alle td's in myTable
dan probeer ik iets als:
var allCells=myTable.getElementsByClass('provr'); // verzamel alle td's met .provr in myTable
of:
var allCells=myTable.getElementByClass('provr'); // verzamel alle td's met .provr in myTable

maar dat zijn ze dus niet ( blijkbaar te simpel: natuurlijk is dit iets voor de grote expert :thumb: )
... het schijnt dat get elementByClass niet bestaat | echter ik heb wel een functie voor je gevonden die dat wel doet.
= vlgns. http://www.html-site.nl/forum/9_14169_0.html
+ http://www.sitepoint.com/rotate-content-with-dhtml/

Het kan niet anders als dat ik je nu barstens nieuwsgierig hebt gemaakt: kan het wel of kan het niet

Oh man, wat zou het mooi zijn als je dit ook nog in elkaar kon knutselen. Echt waar: ik kan een eeuwigheid wachten, haast is er niet bij maar als je nog eens de flow hebt: heel graag!

Uiteindelijk zou ik nog

de geneste tabellen kunnen vergeten, en er <div>'s met een {display:table}, {display:table-cell}, enz
van maken.

Maar een optie 4 zou toch wel echt helemaal ideaal zijn.

In ieder geval: onwijs bedankt al.
prettig weekend + groeten, janyep

janyep · 14 jan 2012

Hm, zacht gezegd ...

Hallo CSSHunter,

PS-1: Hm, die "Stone's WebWriter 3.5" maakt er niet al te beste code van:

ik vrees dat de grootste boosdoener daarvan aan deze kant zit ...

maar heb het altijd prettig gevonden dat 'ie automatisch de datum van de laatste bewerking kon weergeven op de website.
Voor html5 moet ik tzt echter / toch op zoek naar een andere editor

PS-2: ... zacht gezegd

zeg je iets waar je helemaal gelijk in hebt.
De pag's zijn hier en daar bijzonder lang.
Toekomstmuziek (dan ga ik m'n leven beteren

=
.../TEST.html

Dank voor de suggesties!
janyep

janyep · 14 jan 2012

Bladwijzers ..

Hallo CSSHunter,
tjonge, dat je dat van die interne ankers hebt gevonden.
Heb er verder nog niet naar gekeken maar ook dit lijkt logisch en de oplossing te zijn.

de ankers zijn ooit tussen <br> en <br> geplaatst omdat dit een mooie witregel gaf:
in de browsers die het snapten ...

Helemaal top en bedankt weer!
janyep

csshunter · 15 jan 2012

Hoi janyep,

in de linkerkolom staan dus wel geneste tabels ...

Aha, dat stond niet in je aanvraag tabeltest_csshunter.htm

, en omdat je zei "... Laat ik nou ooit in een ver verleden de website hebben opgebouwd uit één hoofdtabel met daarin <tr>'s met niet evenveel rowspan's ..." was ik niet verder op de pagina gaan neuzen of er soms ook nog andere tabellen in stonden.
En ik dacht nog wel "Omdat het hier gaat om 1 tabel met gelijkvormige "subtabellen" (gelukkig geen tabellen in tabellen), ..."

Maar hier komt dus toch het aapje uit de mouw!

Wat je zou kunnen doen
Je zou inderdaad extra classes in de html kunnen zetten, en die in het script verwerken. Maar dat is een heel gedoe (en je moet het onthouden als je nog eens iets met de tabellen in de pagina gaat veranderen).

Terzijde: getElementsByClass('...') bestaat niet, maar er bestaat wel getElementsByClassName('...'), dat echter niet door IE t/m IE8 wordt ondersteund (zie hier op quirksmode.org; voor als je ooit in het scriptwerk duikt). Om IE-problemen te omzeilen werden daarvoor extra scripts bedacht zoals in je link.
Maar dat is eigenlijk een omweg: het kan directer met getAttribute('class'), dat de class-name teruggeeft zodat er verdere bewerkingen kunnen plaatsvinden (als classname is 'pietje', doe dit, en anders ... enz.).

Wat je ook zou kunnen doen: de tabellen-in-de-tabel er uit slopen, en daar nette <div>'s van maken. Maar ook dat vraagt html-code behandeling en is niet 1-2-3 klaar (meer iets voor de Toekomstmuziek-plannen).

Edoch!
Wat er aan de hand is, is dat de cellen in die binnen-tabellen meegerekend worden bij het verdelen van de hoogte van de rowspan-cel. Dat aantal wordt eerst op hoogte gebracht, en dan pas de cellen aan de rechterkant: minus het aantal cellen in de binnentabel. Daardoor schuift alles op en klopt het niet meer.
Maar dat is te regelen: die cellen moeten gewoon niet meegeteld worden, en dat moet aan het script worden toegevoegd.

En zo mag ik u plechtig op de hoogte stellen van de geboorte van:

optie 4
Omdat in het DOM-systeem alles genummerd is, gaat dat heel simpel door er een extra voorwaarde tussen te zetten:
[JS]...
// als binnen een cel "i" nog (een table met) andere cellen bestaan:
if (allCells.getElementsByTagName('td')){

// bepaal dan het aantal cellen-in-de-cel die overgeslagen moeten worden:
var overslaan=allCells.getElementsByTagName('td').length;

i=i+overslaan; // die cellen niet gebruiken en daarna verder gaan
}
var laatste=i+aantal; // laatste rechtercel van deze serie
...
enz.[/JS]
Hoppa!

Test: bliksekaters.nl/tests/noorwegen.htm *)

Geluk!
CSShunter
________
*) De Google-ads heb ik er uit gehaald, en de bladwijzer-correctie zit er nog niet in. Zie verder de broncode voor het complete javascript op het eind.

janyep · 15 jan 2012

Helemaal geweldig en zo prachtig simpel!

Van zoveel hulp werd ik wel heel erg stil CSSHunter ... Onwijs dank!

Uiteindelijk ben ik het natuurlijk ook gaan uitproberen en het werkt geweldig !
Ga z.s.m. aan de slag, en zeker ook met die bladwijzers want dat is toch wel heel erg ! ... dom en slordig ?

"Voor al diegenen die na mij komen" en die ook al het hele w.w.w. zijn afgeweest op zoek naar "table AND valign middle AND Chrome Opera":

ga vooral niet net als mij 4,5 uur op zoek naar waarom deze optie 4 niet zou werken in Chrome (Opera gaat vanzelf).
... want dan kom je er eindelijk achter dat het lijkt te liggen aan een conflict met de Google Adsense-javascripten (er zijn op mijn site twee window.onload's maar dat was het niet).
... en dan ga je om toch weer een hulplijn in te roepen 2 .html's uploaden
... 1 met Adsense-reclame en 1 zonder
... en dan blijkt dat er online helemaal geen conflict is.

Wie het weet mag het zeggen!

... maar uiteindelijk is optie 4 helemaal geweldig, zo prachtig compact en simpel in het gebruik!

Jongens, deze dag kan niet meer stuk.
Heel veel dank, gr janyep

csshunter · 15 jan 2012

Die Adsense toch!

Ik had die Adsense-code er uit gehaald omdat het lokaal bij mij ook troubles gaf. Ik doe zelf nooit iets met Adsense, en dacht dat het kwam omdat het Adsense-account niet geldig was op een andere dan de originele site.
Er blijkt dus ook een verschil lokaal/server te zijn: weer een weetje erbij!

De tweede onload had ik er wel in gestopt, bang als ik was dat dat script het zou kunnen verstieren; maar gelukkig / logischerwijs niet (het andere script kon er nooit een id="myTable" op na houden dat de sleutel is voor het verdeel-en-heers script, en de verdeel()-trigger stond na de andere onload).

Alle glade! :d *)
CSShunter
______
Google Translate zegt dat dat Noors is voor "Everybody happy!".

O ja, voor de Toekomstmuziek: ik zou maar helemaal geen moeite meer doen om IE6 van dienst te zijn. Dat is waarschijnlijk veel werk, en bijna niemand gebruikt nog IE6 (< 0,94%; zie ook hier).

janyep · 16 jan 2012

IE en FF hebben script niet nodig

(ongeacht hun versie). En dat is 75% van de bezoekers ...

zou het mogelijk zijn om ook dat nog eens in het script mee te nemen?
Zoiets als: als de browser IE of FF is, dan dit script niet laden / stoppen?

Alleen kom ik zelf niet verder als
if ........... :thumb:

Of hoort dat dan thuis bij de <body onload=> ?

Adsense levert een paar honderd euro per jaar op, vandaar.

O ja, voor de Toekomstmuziek: ik zou maar helemaal geen moeite meer doen om IE6 van dienst te zijn

Helemaal gelijk: en duurt nog wel een paar maandjes. Tegen die tijd is 6 helemaal ter ziele.

Takk for hjelpen igjen (lijkt wel wat op 'again' , nietwaar?)
vriendelijke groet, janyep

csshunter · 16 jan 2012

Inderdaad hebben alleen Chrome en Safari dit script nodig.
Maar om die er uit te pikken zou je een "browser-sniffer" moeten inbouwen, en:

browser-sniffers zijn hoogst onbetrouwbaar, omdat ze bij elke nieuwe browserversie (van alle nu bekende en nog te verschijnen browsers!) gecheckt en zo nodig aangepast moeten worden,
die dingen werken op javascript of met een php-script, en vragen dus extra script! (en de tijd die nodig is om dat uit te voeren).

Wat nog wel zou kunnen, is om alleen voor IE het script buiten werking stellen, via een "Conditional Comment" " en een omgekeerd Conditional Comment". Die CC's zijn door IE bedacht, en werken prima (ook in de toekomst, naar we mogen aannemen).
Dan moet er voor de <body onload="verdeel()"> een uitsplitsing komen, met een gewoon CC voor IE (waar de onload niet bij staat) plus een inverse CC voor de rest (waar de onload wel bij staat).

Wat levert dat op? Het enige nut zou zijn, dat er wat tijdwinst behaald wordt voor de IE's, omdat het script dan niet uitgevoerd hoeft te worden. Maar:

Het script zelf is razendsnel en het niet uitvoeren zal geen waarneembaar verschil opleveren (zeker niet t.o.v. de tijd die het inladen van de pagina duurt).

Als je ook voor het niet inladen van het script voor IE zou zorgen, door er (binnen een inverse CC bij de script-regels) een verwijzing naar een extern .js bestandje van te maken, zou dat (gecomprimeerd, en commentaarloos) zo'n 0.5Kb groot zijn (deze), wat voor het inladen van de in totaal 1.816KB (pagina+images+scripts) voor de IE's een formidabele snelheidswinst van < 0,03% zou opleveren.

Daartegenover staat dat de andere browsers dan een extra http-request nodig hebben (verzoek browser aan server om 'm te downloaden, wat traag gaat omdat zo'n verzoek uploaden van pc naar server is), en het per saldo eerder vertraging dan versnelling zal opleveren voor de andere browsers.

Oftewel: het loont de moeite niet, lijkt me, en baat het niet dan schaadt het niet.

Takk for takk! Was leuk karweitje.

Met vriendelijke groet,
CSShunter

janyep · 16 jan 2012

Hallo CSShunter
Dank voor de prima uitleg wederom.
Ben helemaal overtuigd en ontzettend tevreden met het resultaat.

Gelukkig dat je niet hebt geleden van deze klus

- helemaal top :thumb:

vriendelijke groeten janyep

Tabel:"valign=middle" is niet in alle browsers hetzelfde

janyep

Gebruiker

That Guy

Meubilair

janyep

Gebruiker

csshunter

Meubilair

janyep

Gebruiker

That Guy

Meubilair

csshunter

Meubilair

csshunter

Meubilair

janyep

Gebruiker

janyep

Gebruiker

janyep

Gebruiker

csshunter

Meubilair

janyep

Gebruiker

csshunter

Meubilair

janyep

Gebruiker

csshunter

Meubilair

janyep

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy