[Alku]
Testaa CSS-oppaan navigoinnin toimivuutta!
 
 Etsi sivuiltani: [Apua]

Erityisongelmia

Aiheet

Lohko- ja rivinsisäiselementit

CSS2 tarjoaa sangen monimutkaiset säännöt erilaisten elementtityyppien käsittelylle, mistä johtuu monia ongelmia.

Tavanomaiset ei-korvattavat rivinsisäiselementit (esim. STRONG) ei tulisi ottaa width jaheight ominaisuuksia. Sen sijaan korvattavat elementit (replaced elements) , esim.IMG, voivat ne saada. Ei-korvattavat tekstielementit voivat saada line-height ominaisuuden ja ne voivat vaikuttaa rivikorkeuteen myös font-size ominaisuuden avulla, koska pystytason margin ja padding-arvojen ei tule vaikuttaa rivikorkeuteen siten, että elementit aina mahtuisivat riville. Asemoinnin ja rivikorkeuden suhteen korvattavien rivinsisäiselementtien tulee käyttäytyä kuten ei-korvattavien elementtien.

Mahdolliset border ja background ominaisuudet voivat aiheuttaa sen, että ei-korvattavat rivinsisäiselementit menevät osittain päällekkäin. Korvattavilla elementeillä positiiviset margin, padding jaborder arvojen tulee kasvattaa rivikorkeuksia niin, että elementit aina mahtuvat riville.

Pystytason marginaalit menevät normaalisti kasaan (käsittelen poikkeuksia myöhemmin), jolloin esim. kahdelle perättäisille lohkoelementeille annetut samat ylä-ja alamarginaalit tuottavat yksinkertaisen, ei kaksinkertaista marginaalia.

W3C: CSS1 Test Suite: sec42.htm and sec44.htm; CSS2: 8.3.1 Collapsing margins.

HTML 3.2-koodauksessa rivinsisäis- ja lohkoelementtien asemoinnit on määritelty puutteellisesti align ja valign attribuuttien avulla. Ne määrittävät toisinaan lohkoelementtien sisällä olevien rivinsisäiselementtien ja muun sisällön asemointia. Toisinaan ne määrittävät lohkojen itsensä asemointia suhteessa ympäröivään emoelementtiin.

Vaaka-asemoinnin kohdalla nämä kaksi asiaa on täysin erotettu toisistaan. Ominaisuus text-align koskee kaikkea lohkoelementin sisällä olevaa rivinsisäistason sisältöä. Täten text-align:center keskittää rivinsisäiselementin ja muun rivinsisäistason sisällön. Ominaisuus ei saisi vaikuttaa millään tavoin lohkoelementin itsensä asemointiin eikä sillä ole mitään vaikutusta rivinsisäiselementteihin.

Määrittelyn margin:auto pitää aiheuttaa lohkoelementtien (tai lohkoelementeiksi määriteltyjen elementtien) vaakakeskityksen mutta ei pystykeskitystä.

Pystykeskitykselle on ominaisuus vertical-align (mahdolliset arvot ovat: baseline, top, bottom, middle, sub, super, text-top, text-bottom + positiiviset ja negatiiviset prosentti- tai pikseliarvot (jälkimmäiset eivät kuulu CSS1:n arvoihin). Se vaikuttaa normaalisti vain lohkojen sisällä oleviin rivinsisäiselementteihin. Taulukkosoluissa sillä on sama tehtävä kuin valign attribuutilla (vain arvot top, middle jabottom ovat käytettävissä). Antamalla koko taulukolle tai yksittäiselle solulle korkeus ja yksittäisille solulle valign attribuutti tai vertical-align ominaisuus on mahdollista keskittää elementtejä pystytasossa. Jos BODY ja TABLE elementeille on määritelty korkeudeksi100% tai hieman vähemmän elementti voidaan suurin piirtein keskittää sivun keskelle. Tosine CSS2-spesifikaatio itsessäänf[S] sisältää sen ongelman, että mille tahansa lohkoelementille ei saa pystykeskitystä.

Alla on esimerkki lohkoelementistä muutamin kommentein höystettynä ([M][S][Pw]):

p.special
{border:1p solid blue;
text-indent: 3em; /* ensimmäisen rivin sisennys */
margin:10px; /* tämä suhteutetaan säilytinlohkoon (normaalisti säilytinlohko on elementin emoelementti, mutta ei tapauksissa, jossa elementti on absoluuttisesti tai kiinteaästi asemoitu (käsittelen absoluuttisesti tai kiinteästi asemoituja elementtejä sivulla 11[S])), jossa kappale on; negatiiviset arvot ovat sallittuja; muista myös marginaalien ja täytteiden pikakirjoitemäärittelyt! */
padding:10px; /* sisennys tekstille, joka on kappaleen sisällä; negatiiviset arvot eivät ole sallittuja */
text-align:justify; /* tekstin vaaka-asemointi; muut arvot ovat: left; center and right */
vertical-align: top;
/* arvo ei periydy ja se vaikuttaa lohkon sisällä olevan tekstin ja muiden elementtien keskinäiseen pystyasemointiin */
font: normal small-caps 120%/120% fantasy;

Sivujen tekijät voivat käyttää lohko- ja rivinsisäiselementtejä virheellisesti ja panna rivinsisäiselementin sisälle lohkkoelementitejä. Ole huolellinen rivinsisäiselementtien käytössä. Älä laita lohkoelementtejä rivinsisäiselementtien sisälle (käsittelen elementtien käyttöämyös erläällä the usage of elements also in lisäsivulla[S]).

Ainoat elementit, jota voi käyttää sekä rivinsisäis- että lohkoelementtinä ovat INS jaDEL. Mutta niitä ei tule käyttää samanaikaisesti sekä rivinsisäis- että lohkoelementteinä.

Selainkohtaisia huomautuksia:

  1. Jos rivinsisäiselementtejä on käytetty lohkoelementtien ulkopuolela MS IE näyttää tällaisille elementeille määritellyn CSS:n useimmissa tapauksissa kuten lohkoelementeille. But käytettäessä CSS:ää uusien Netscape/ Mozilla Gecko -selainten kanssa pitää olla tarkka. Olen huomannut, että virheellinen rivinsisäiselementtien käyttö aiheuttaa ylimääräisiä rivikatkoja eivätkä CSS-ominaisuudet toimi suunnitellulla tavalla.

  2. Ominaisuuden vertical-align toteus vaihtelee hyvin suuresti. Suosittelen testaamaan erityisesti ominaisuuden vertical-align mahdollisimman monessa selaimessa CSS1 Test Suite. Se toimii sangen hyvin ainakin Mozilla Gecko, Opera 4.x+ and MS IE 5.5+ Windows -selaimissa.

  3. En suosittele käyttämään TD elementille vertical-align:middle koska se tuottaa eräille selaimille ongelmia. Taulukkoja apuna käyttävä pystykeskitys ei toimi Opera 7.2x -selaimissa.

  1. Koska Mozilla Gecko -selaimet antavat kuville (IMG) standard -moodissa[S] CSS2-spesifikaation mukaisesti vertical-aling:baseline, yksinäiset taulukkosolujen sisällä oleville kuvien ympärille tulee tyhjää tilaa. Sen poistamiseksi täytyy määrittää joissakin tilanteissa kuville vertical-aling:bottom. Koska muut selaimet käyttävät muuta oletusarvoa niissä ei ole tätä ongelmaa.

  2. MS IE 4.x-5.0 -selaimissa on vakava toteutusvirhem sillä reunukset eivät toimi ei-korvattaville rivinsisäiselementeille. Jos sivujen tekijä on määrittänyt height -ominaisuuden, selaimet näyttävät reunukset, mutta virheellisesti (katso joitakin esimerkkejä virhesivulta[S][Pw]; voit katsoa joitakin esimerkkejä myös englanninkieliseltä sivulta, joka käsittelee virheellisiä määrtiyksiä[S][Pw] - ei paluulinkkiä tälle sivulle).

    MS IE 5.5+ toimii oikein, jos ominaisuutta height ei ole määritelty. Ominaisuus height works toimii tavanomaisille rivinsisäiselementeille standard-compliant -moodissa[S] vain jos niille on määritelty display:inline-block, jolloin selain toimii CSS3:n mukaisesti (käsittelen ominaisuutta display sivulla 11[S]).

  1. Netscape 4.x näyttää reunukset samalla lailla virheellisesti kuin MS IE ominaisuuden height kanssa..

  2. text-align vaikuttaa MS IE 4.x Windows -selaimissa taulukon itsensä asemointiin. text-indent saattaa aiheuttaa MS IE 5.0 -selaimessa ylimääräistä vasenta marginaalia. Text-align:justify toimii testaamistani selaimista oikein vain MS IE 5.x+ Windows ja uusissa Mozilla Gecko -selaimissa (Opera tekee virheitä, jos lohko sisältää rivinsisäiselementtejä, jotka eivät sovi samalle riville, mutta normaalisti selain toimii hienosti). Netscape 4.x voi näyttää vain hyvin yksinkertaisia dokumentteja.

  3. Selaimet toteuttavat kasaan menevät marginaalit vaihtelevassa määrin virheellisesti. Minulla on tähän tarkoitukseen testisivut[S].

  4. margin:auto toimii testaamissani selaimissa oikein vain Opera 4.x+, uusissa Mozilla Gecko, MS IE 6.0 Windows ja Konqueror (Linux) -selaimissa (ja erään kuvakaappauksen perusteella myös Safari-selaimissa (Mac-selain)). Jotta elementit saisi keskitetty vaakatasossa vanhemmissa MS IE -selaimissa on järkevää asettaa yksi CENTER elementti haluttujen elementtien ympärillä. Koska jotkut Opera ja Mozilla Gecko -selaimet saattavat jättää huomioimatta CENTER elementin vaikutuksen myös margin-left:auto; margin-right:auto on välttämätön.
[Alku]