[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]
AihepiiriluetteloCSS-oppaan etusivuOpassivut > 10. Miten CSS annetaan taulukkoelementeille > Sisällön dimensioihin liittyviä ongelmia (jakso 4/4)

Sisällön dimensioihin liittyviä ongelmia

CSS2 on jättänyt avoimeksi, miten ominaisuus height tulisi tulkita taulukoissa, joten selaimet voivat tulkita sen haluamallaan tavalla. Mielestäni se merkitsee taulukoissakin sisällön korkeutta (se on myös Opera Softwaren tulkinta).

Periaatteessa omainaisuus width tarkoittaa myös taulukoissa sisällön leveyttä (content width; width-ominaisuus on leveys, joka tulee varata konkreettiselle sisällölle, esim. tietyn levyiselle kuvalle). Koska elementillä TABLE ei ole välitöntä asiasisältöä (varsinaisen asiasisällön välissä on vähintään elementti TR), normaalisti vain mahdolliset reunukset kasvattavat taulukon muodostaman lohkolaatikon kokonaisleveyttä.

Ongelmia tuottaa kuitenkin se tosiasia, että elementin TABLE HTML-attribuutin width arvon laskemisessa ei noudateta samaa laskentakaavaa kuin CSS-ominaisuuden width laskennassa. HTML 4.01 spesifikaatiossa sanotaan attribuutista width seuraavaa:

This attribute specifies the desired width of the entire table...

Tuon pohjalta siihen lasketaan reunukset eikä kyse ole sisältöleveydestä kuten CSS:ssä.

Suorittaessaan taulukoiden dimensioiden laskentaa selainten on otettava huomioon seuraavat seikat:

  1. Koska sekä HTML:n border-attribuutti että CSS:n border-omaisuudet vaikuttavat taulukon sisältö- ja kokonaisleveyteen, selaimen joka ymmärtää CSS:ää, tulee huomioda molemmat reunusten määrittelytavat sekä kaikki mahdolliset täytteet, jotta width attribuutti tai ominaisuus voitaisiin laskea oikein. Tämän asian ei pitäisi olla ongelma moderneille selaimille, sillä niiden tulisi pystyä käsittelemään border-attribuuttia ikään kuin joukkona esimääriteltyjä CSS-ominaisuuksia.
  2. Selaimen tulee huomioida HTML:n ja CSS:n erilaiset leveyden laskentakaavat ja pyrkiä toteuttamaan laskentakaavat sen mukaan kuin spesifikaatiot edellyttävät.
  3. Koska CSS pitää pystyä määrittelemään muualta käsin, CSS-omainaisuuksille ja CSS:n mukaiselle laskentakaavoille pitää olla etusija. Jos sekä width-attribuutti että width-ominaisuus on määritelty, seurataan width-ominaisuuden antamia arvoja ja laskentatapaa.
Selainkohtaisia huomautuksia:
  1. Opera 5.1x - ja MS IE Windows -selaimet tulkitsevat reunuksellisten taulukkoelementtien leveyden lähes aina eri lailla - jopa HTML-attribuutteja käytettäessä:

    • border="2" width="600" tai border="2" style="width:600px" tai style="border:2px solid black; width:600px;" = 604 pikseliä Operalla.
    • border="2" width="600" tai border="2" style="width:600px" tai style="border:2px solid black; width:600px;" = 600 pikseliä MS IE Windowsilla.

    Esimerkkitapauksessa Opera toimii väärin HTML:n ja MS IE CSS:n suhteen.

  2. Mozilla Gecko - sekä MS IE 6.0 Windows -selaimet seuraavat ns. standard-compliant -moodissa[S] elementin TABLE suhteen MS IE 5.x Windowsia, kun ne yleensä toimivat width-ominaisuuden suhteen samoin kuin Opera.

  3. Myös MS IE 5.0 Mac käytös on DTD-riippuvainen[S]. Toimintamuodolla on suurempi merkitys taulukkoelementtien leveysarvojen tulkintaan kuin MS IE 6.0 Windowsissa.

  1. Tein Mozilla Gecko -selainten toteutuseroja käsittelevän sivuparin, jossa on käytetty kahta eri DTD:tä (HTML 4.0 Transitional[S] ja HTML 4.01 Strict[S]). Mozilla Gecko -selainten käyttäytymisen DTD-riippuvuus vaikuttaa siinä hieman yhden taulukon leveyteen, mutta enemmän siihen, miten taustaväri näytetään. Sivupari antaa seuraavat tulokset (linkit viittaavat kuvakaappauksiin):

    • Ei DTD-ilmoitusta, HTML 4.0 Transitional[S]: cellspacing luo Mozilla 0.9:ssä BODY-elementin värisiä alueita. Vrt. Opera 5.12[S]. Huomautus. TABLE C leveys on HTML 4.01 spesifikaation pohjalta eri, mitä Opera näyttää. TABLE G on täysin oikein, sillä jos taulukko ei mahdu DIV-elementin laatikkoon, sen tulee mennä sen ylitse eikä DIV-elementin tule kasvaa taulukon leveyteen (vain elementin TABLE kohdalla sisällön leveyden tulee kasvattaa elementille annettua kokonaisleveyttä).
    • HTML 4.01 Transitional, HTML 4.0/ 4.01 Strict[S] + uudemmat spesifikaatiot: background-color tulee Mozilla 0.9:ssä koko taulukkoon aivan kuten Operalla ja MS IE:llä. Taulukoiden leveys toimii saman kaltaisesti kuin IE 6.0:sta otetussa editoidussa kuvakaappauksessa[S].
    • Netscape 4.x ei tue width-ominaisuutta taulukolle. Mikäli cellspacing attribuutin arvo on suurempi kuin 0 (oletusarvo on 2), sille saa siistin lopputuloksen vain määrittelemällä taulukon ulkopuolelle DIV or CENTER elementti, jonka reunuksella on sama väri kuin taulukon emoelementin taustalla sekä itse lohkolla on sama taustaväri kuin taulukolla. Tästä tilannetta demonstroi mallidokumentissa TABLE F.

Tein HTML 4.01 Strict dokumenttityyppiä käyttävän testisarjan[S]. Sain siihen liittyen s-postia selainten Mac-versioiden toteutuksesta. Tein taulukon, jossa [OK!] tarkoittaa oikeata toteutusta ja [EI OK!] tarkoittaa virheellistä toteutusta silloin, kun toteutuksia arvioidaan HTML 4.01 ja CSS2 spesifikaatioiden pohjalta:

Testit Windows Mac
MicrosoftNetscapeOpera MicrosoftNetscapeOpera
5.56.06.25.12, 6.x7.0 Beta15.06.05.0 Beta 4
Test 0a[S][OK!] [OK!] [OK!] [OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 0b[S][OK!] [OK!] [OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 0c[S] [OK!] [OK!] [OK!] [OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 0d[S] [OK!] [OK!] [OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [EI OK!]
Test 1[S] [EI OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 1
Fixed
[S]
[EI OK!] [OK!] [EI OK!] [OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 2[S] [EI OK!] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 3[S] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 4[S] [EI OK!] [EI OK!] [EI OK!] [OK!] [OK!] [OK!] [EI OK!] [OK!]
Test 4
Fixed
[S]
[OK!] [OK!] [OK!] [OK!] [OK!] [OK!] [OK!] [OK!]
Oikein5/106/105/106/106/106/105/ 106/10
 

Selainkohtaisia huomautuksia:

  1. MS IE 6.0 Windows-version toteutus tulisi olla DTD-riippuvainen ja annetulla DTD:llä sen tulisi esittää Test 1-4 samalla lailla kuin Mac-versio.

  2. MS IE:n Mac-versiossa annetut [OK!] / [EI OK!] kääntyvät viimeistä testiä lukuun ottamatta päinvastaisiksi, mikäli DTD poistetaan. Jos Mac-versio toteuttaisi Test 0-0d DTD-riippumattomasti, se toimisi sangen johdonmukaisesti.

  3. Käymieni keskustelujen pohjalta eräs Mozilla org. työntekijä sanoi, että Mozilla Gecko -selainten tulisi toimia annetulla DTD:llä sillä tavoin kuin olen esittänyt. Tulevissa Mozilla Gecko -selaimissa saattaa olla erilainen käytös. Periaatteessa uuden Mozillan pitäisi käyttäytyä määrittämälläni DTD:llä Test 1-4 suhteen samalla tavalla kuin MS IE 5.0 Mac.

  1. Opera 5.0:n Mac-versio toimii johdonmukaisemmin kuin 5.x-6.x Windows-versiot. Se toimii samalla lailla kuin MS IE 5.0:n Mac-versio kun käytetään testissä mainittua DTD:tä. Jos HTML width-attribuutti toimisi HTML 4.01 spesifikaation mukaisesti, selaimen käytöksessä ei olisi moitittavaa. Operan käytös ei ole DTD-riippuvainen. Mielestäni Operan Mac-versio ja Opera 7.x Windows ovat testin johdonmukaisimmin toimivia selaimia.

  2. Operan 5.x-6.x Windows-versiot toimivat kaikista epäjohdonmukaisimmin, sillä selainten käytös on riippuvainen annetusta width-attribuutin/ ominaisuuden arvosta. Opera käyttää outoa "width-kytkintä", joka on riippuvainen siitä, mikä on todellisen ja laskennallisen sisällön välinen suhde, kun noudatetaan width-attribuutin mukaista laskentakaavaa. HTML:n laskentakaava on päällä silloin, kun todellinen sisältö on suurempi kuin laskennallinen sisältö. CSS:n laskentakaava kytkeytyy tilanteessa, jossa todellinen sisältö on yhtä suuri tai pienempi kuin laskennallinen sisältö. Lopputulos on joko HTML 4.01 tai CSS2 spesifikaation mukaisesti.

  3. CSS3 antaa järkevämmän tavan muuttaa leveyden laskentakaavaa kuin "DTD-kytkimen", jota käsittelen spesifikaation ongelmissa[S].

  4. Kun määritellään leveys taulukkosoluille, saadaan helpommin sama lopputulos eri selaimilla (Test 4 Fixed[S]).

Periaatteessa dokumenttien perusrakenteita olisi helpompi luoda ilman taulukoita. Käsittelen vaihtoehtoisia sivurakennustapoja seuraavalla sivulla. Taulukoita tarvitaan kuitenkin aina sellaisen datan kanssa, jonka esittäminen vaatii taulukoita. Siksi mahdolliset ongelmatilanteet on syytä tuntea.

Sivujen tekijä voi määritellä CSS:n siten, että syntyy konfliktitilanteita, jotka selaimet selvittävät eri lailla. Sivujen tekijä on voinut vahingossa aiheuttaa konfliktitilanteen koko taulukkoleveyden ja yksittäisten solujen muodostaman kokonaisleveyden välille.

Hän on voinut myös määritellä ominaisuuksia, jotka eivät sovellu tietyille taulukkoelementeille, esim. table {padding:...} ja tr {margin:...; padding:...}.

Selaimissa on myös erinäisiä pikku virheitä, jotka aiheuttavat ongelmia. Muutamia tällaisia ongelmamahdollisuuksia on vielä syytä vielä luetella.

Selainkohtaisia huomautuksia:

  1. Opera 5.x+ ja MS IE ratkaisevat joissakin tilanteissa taulukon kokonaisleveyden ja yksittäisten solujen leveysristiriidan eri tavalla. Opera laskee taulukon kokonaisleveyden aina soluille määriteltyjen width ominaisuuksien perusteella, mutta MS IE normaalitapauksissa (table-layout:auto) elementille TABLE annetun width ominaisuuden mukaan. Esim. seuraava määrittely saattaa luoda vakavan ongelman:

    td {width:200px; border:2px solid black}
    table {width:400px; border:1px solid black}

    Eräissä internetiin tehdyissä taulukoissa oli kolme taulukkopalstaa. Opera esitti taulukon vähän yli 600 pikseliä leveänä ja MS IE noin 400 pikselin levyisenä. Mielestäni Opera toimii oikein, sillä taulukon tulee kasvaa soluille määriteltyjen leveyksien mukaisesti. Ominaisuudet width ja height luovat sisältölaatikon (content box) eli eräänlaisen kuvitteellisen lohkon tai pikemminkin varauslaatikon. Vaikka taulukolla olisi erityisen suuri prioriteetti (esim table#special {width:400px}) solujen kokonaisleveyttä ei tulisi pienentää. CSS2 spesifikaation antaa toki selaimille oikeuden näyttää taulukon sisältö parhaaksi katsomallaan tavalla kun normaali taululukonmuodostusalgoritmi on käytössä, mutta mielestäni MS IE ottaa "ylimääräisiä vapauksia". MS IE toimii kuitenkin kiinteällä taulukkoalgoritmilla (table-layout:fixed) yleensä samoin kuin Opera.

  1. Jos sivujen tekijä asettaa kiinteätä taulukkosommittelua käyttävän TABLE elementin width ominaisuuden arvon suuremmaksi kuin mitä saadaan laskemalla yhteen ensimmäisen taulukkorivin kokonaisleveyteen vaikuttavien ominaisuuksien yhteissumma, MS IE 6.0 Windows laskee parhaiten sekä koko taulukon että yksittäisten taulukkosolujen leveydet. Opera 6.04 ja Mozilla 1.1a virheistä saa käsityksen testisivulla[S], jota tulee verrata MS IE 6.0 Windows -selaimen käytökseen. Koska taulukoiden luomisessa on selainten välillä tulkintaeroja, leveysarvojen määrittelyssä kannattaa olla hyvin huolellinen ja välttää konflikteja niin paljon kuin mahdollista.

  2. Selaimet hyväksyvät vaihtelevassa määrin table {padding:...} jne. oudot määrittelyt, mutta osa tulkinnoista on todella outoja ja ne aiheuttavat ongelmia taulukoiden reunusmalleille. Kun määritellään ryhmiä, olisi oltava huolellinen ja varottava määrittelemästä edellä mainittuja sääntöjä (tämä koskee myös thead, tfoot, tbody {margin:...; padding:...}).

  1. Taulukkosolujen leveyksien laskennassa on muistettava yleiset dimensioiden määrittelyn ongelmat joita olen käsitelly sivulla 8[S]). Jotta dimensio-ongelmat vähenisivät, kannattaa noudattaa neuvoa[S], jonka olen antanut käsitellessäni yleisesti lohkojen dimensioihin liittyviä ongelmia.

  2. Havaitsin, että se ei aina toimi Opera-selaimissa (koskee ainakin versioon 6.01 asti) taulukkosoluissa. Olen siksi käyttänyt joissakin tilanteissa täytekuvia ja niille linkitettyjä leveysarvoja (Netscape 4.x -selaimet käyttäytyvät oudosti eräistä kuville annetuista CSS-ominaisuuksista). Asettamalla leveyden mille tahansa solujen sisällä olevalle elementille ajaisi saman asian.

[Alku]
   
Copyright Tapio Markula 1999-2003, Salo (kotisivu, s-posti - lisää s-postiosoiteeseen pisteellä erotettuna nimeni, Tapio Markula) (@dnainternet.net) - ei julkiskäyttöön ilman sopimusta.
Get Expression!
Editori, jolla saa luotua standardit täyttäviä HTML ja XML dokumentteja. Tämän sivuston sivut on useimmissa tapauksissa tarkastettu Dave Raggetin (W3C) tekemällä HTML-Tidy apuohjelmalla ja satunnaisesti W3C-organisaation virallisella koodintarkastusohjelmalla. Useimpien sivujen syntaksin pitäisi olla sopusoinnussa W3C:n XHTML 1.0 spesifikaation kanssa. Testaa tämä sivu!
Informaatiota selaimista, jotka näyttävät tai tulostavat tämän sivuston parhaiten.
[Hae Opera] [Hae Mozilla!]
CSS-opasta on viimeksi muutettu 20.12.2004