Mitkä ovat yleisimmät virheet xhtml ja css-kielessä, jotka aiheuttavat sen että divit ovat ie:llä ja firefoxillalla aivan eri paikassa?
Löytyykö suoralta kädeltä mitään ratkaisua?
Yleisimpiä ie-bugeja ainaki on tossa: http://www.positioniseverything.net/explorer.
Pitää tässä tarkentaa tuota kysymystä: XHTML:ssä ja CSS:ssä ei ole virheitä vaan selainten tuessa.
Yleisin virhe minkä sivujen tekijä tekee, mikä on toisaalta bugi Internet Explorerissa, on asettaa ihan mitä tahansa ennen DOCTYPEä sivun alussa. Ja siis kun Strict-sivusta puhutaan. Jos ennen <!DOCTYPE... on ihan mitä tahansa niin IE pomppaakin perinteiseen Transitional-tilaan ja käsittelee silloin mm. sisennyksiä eri tavalla.
Sitten löytyykin ihan oikea sivuntekijän virhe: unohdetaan nollata marginaalit ja sisennykset. Selaimilla on oletuksena marginaaleja ja sisennyksiä joillekin elementeille, mm. kappalejaoille, otsikoille ja listoille. Eri selaimilla on erilaisia asetuksia näille sisennyksille, mm. Opera käyttää body-elementissä paddingia (sisennystä) kun taas kaikki muut selaimet käyttävät marginaaleja.
Suoraan body-elementin ensimmäisinä lapsina absoluuttisesti sijoitellut elementit sijoittuvat eri tavoin eri selaimilla riippuen hieman miten sivu on toteutettu. Olen kiertänyt ongelmat lisäämällä yhden yleistagin, jonka sisälle sijoitan kaiken ja jolle annan tyyliksi position : relative; (tämän ansiosta absoluuttisesti asetellut elementit sijoittuvat tämän elementin mukaisesti).
Monet IE:n ongelmista on selitettävissä semmoisella IE:n sisäisellä hienoudella kuin hasLayout. Siitä ei tiedä mitään lukematta netistä artikkeleja, mutta käytännössä elementillä joko on hasLayout tai sitten sitä ei ole, ja elementin käyttäytyminen muuttuu sen mukaan onko sitä vaiko ei.
Yksi mikä voi aiheuttaa IE:ssä divien liukumisen ketuilleen on myös se, että ainakin IE6 laskee elementin leveyden (ja korkeuden) muodolla width + padding-left + padding-right, kun se standardin mukaan pitäisi laskea vain width:llä (vai oliko se juuri toisin päin, no joka tapauksessa). Tämä aiheutti ainakin itselleni päänvaivaa div-taittoa aloitellessani.
IE ei laske sisennyksiä (padding) mukaan elementin leveyteen, vaikka niin tulisi tehdä "oikean" laatikkomallin (box model) mukaan.
Agony, GoldenDragon: niin, siis DOCTYPE laitettu väärin. IE6+ osaa kyllä saman box modelin kuin muutkin selaimet.
Merri kirjoitti:
Yleisin virhe minkä sivujen tekijä tekee, mikä on toisaalta bugi Internet Explorerissa, on asettaa ihan mitä tahansa ennen DOCTYPEä sivun alussa. Ja siis kun Strict-sivusta puhutaan. Jos ennen <!DOCTYPE... on ihan mitä tahansa niin IE pomppaakin perinteiseen Transitional-tilaan ja käsittelee silloin mm. sisennyksiä eri tavalla.
Olis varmempaa tehdä xhtml-sivu transitional-tilaan
Transitional-sivumalli on tarkoitettu siirtovaiheeksi vanhoille jo olemassa oleville sivuille, ts. helpoksi hypyksi standardien maailmaan. Aiemmin kun käytettiin vaikka mitä elementtejä, joiden käytöstä voi olla vaikea luopua sivuilla jotka ovat pohjanneet toimintansa niihin. Periaatteessa kaikki uudet sivut pitäisi siis tehdä Strictinä.
Tätä ei tietenkään tarvitse noudattaa jos kokee Strictin vaikeana.
Hyvää asiaa Strictin ja Transitionalin eroista:
http://24ways.org/2005/transitional-vs-strict-markup
http://brainstormsandraves.com/archives/2003/10/
Muoks!
Oikeastaan yksinkertaistaen voisi laittaa, että Transitional on tarkoitettu taulukkotaitetuille sivuille ja Strict CSS:llä taitetuille, vaikka tietysti käytännössä kumpaakin voi käyttää toisinkin, eli tehdä taulukkotaittoa Strictillä ja hyvää semanttista taittoa Transitionalilla.
Noin opettelun kannalta Strict on järkevämpi, koska tulevat versiot HTML:stä todennäköisesti noudattavat Strict-linjaa.
Merri kirjoitti:
Periaatteessa kaikki uudet sivut pitäisi siis tehdä Strictinä.
Tätä ei tietenkään tarvitse noudattaa jos kokee Strictin vaikeana.
Hyvää asiaa Strictin ja Transitionalin eroista:
-----
Noin opettelun kannalta Strict on järkevämpi, koska tulevat versiot HTML:stä todennäköisesti noudattavat Strict-linjaa.
Suurempi haaste kuin tuon Strictin opettelu voi olla saada IE hyväksymään se?
En ole itse asiaa testannut, mutta jos on noin, että IE ei hyväksy, että ennen DOCTYPEÄ tulostetaan mitään, niin miten estää sitä "pomppaamasta transiotional-tilaan"? Xhtml-sivullahan pitää antaa sivun xml-määrite ennen doctypeä.
Merri kirjoitti:
Agony, GoldenDragon: niin, siis DOCTYPE laitettu väärin. IE6+ osaa kyllä saman box modelin kuin muutkin selaimet.
On se vain kumma, että vaikka kuinka oikein on DOCTYPE ja xml-määrite jätetty pois, niin aina ei IE sitä mox modelia oikein näytä. Lähinnä on ongelmat, joissa IE:llä on eri käyttöjärjestelmien välillä eroja (esim kahdella Win2k koneella sivu näkyy erilaisena.)
Pekka Mansikka kirjoitti:
Suurempi haaste kuin tuon Strictin opettelu voi olla saada IE hyväksymään se?
En ole itse asiaa testannut, mutta jos on noin, että IE ei hyväksy, että ennen DOCTYPEÄ tulostetaan mitään, niin miten estää sitä "pomppaamasta transiotional-tilaan"? Xhtml-sivullahan pitää antaa sivun xml-määrite ennen doctypeä.
Xml-määritteen laittaminen ei tietääkseni ole pakollista. Sen voi joko laittaa tai jättää laittamatta sivun ollessa kulloinkin aivan yhtä standardien mukainen.
GoldenDragon kirjoitti:
Xml-määritteen laittaminen ei tietääkseni ole pakollista. Sen voi joko laittaa tai jättää laittamatta sivun ollessa kulloinkin aivan yhtä standardien mukainen.
Ihan miltä kannalta asiaa tarkastellaan......
Kun otin kokeeksi tuon xml-määritteen pois, validaattori ilmoitti 33 erroria. Eli jos haluaisi tuon nollille, pitäisi tehdä sivulle 33 muutosta, jotka kaikki olisi vääriä muutoksia puhtaan xhtml-kielen kannalta. ( Tässä tarkoitan puhtaalla xml-määritteen käyttöä ).
Pekka Mansikka kirjoitti:
GoldenDragon kirjoitti:
Xml-määritteen laittaminen ei tietääkseni ole pakollista. Sen voi joko laittaa tai jättää laittamatta sivun ollessa kulloinkin aivan yhtä standardien mukainen.
Ihan miltä kannalta asiaa tarkastellaan......
Kun otin kokeeksi tuon xml-määritteen pois, validaattori ilmoitti 33 erroria. Eli jos haluaisi tuon nollille, pitäisi tehdä sivulle 33 muutosta, jotka kaikki olisi vääriä muutoksia puhtaan xhtml-kielen kannalta. ( Tässä tarkoitan puhtaalla xml-määritteen käyttöä ).
Luultavasti sivusi sisältää ominaisuuksia ja määreitä, jotka validoituakseen tarvitsevat xml-määritteen. Itselleni tällaista ei ole tullut vastaan, kun projektitkin ovat olleet sen verran pieniä, että niihin ei sen laisia ominaisuuksia tarvitse.
GoldenDragon kirjoitti:
Luultavasti sivusi sisältää ominaisuuksia ja määreitä, jotka validoituakseen tarvitsevat xml-määritteen. Itselleni tällaista ei ole tullut vastaan, kun projektitkin ovat olleet sen verran pieniä, että niihin ei sen laisia ominaisuuksia tarvitse.
Vika oli tässä:
//echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
Pitää olla:
/* echo '<?xml version="1.0" encoding="ISO-8859-1"?>'; */
En tiedä syytä, mutta tuo ylempi tulosti lopussa olevan puolipisteen ja sen jälkeen tulevan muutaman rivin php-koodin vaikuttaen samoin kuin php:n lopetustagi ?>
Olisivatkohan nämä "virheet" mahdollisesti ääkkösiä? Jos sivulla ei ole kerrottu merkistökoodausta, käyttää muistaakseni W3C:n validaattori oletuksena UTF-8:aa. Merkistökoodauksen voi kertoa metatagilla, hyvä sijoituspaikka on ensimmäisenä elementtinä headissä:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
XML-prologi on siis suositeltu (lue: ei pakollinen), mutta valitettavasti IE:n bugin takia sitä ei oikein voi käyttää. Toisaalta... IE ei myöskään sisällä todellista/täyttä tukea XHTML:lle, niinkuin ei toisaalta oikeastaan mikään muukaan selain. IE vetää aina XHTML-sivun SGML-parserin läpi, eikä XML-parserin niinkuin pitäisi. Ja samoin tekee Firefox, Opera ja Safari kun sivu on tarjoiltu text/html:nä, niinkuin on aika pakko tehdä jälleen kerran IE:n takia: se kun ei raukka ymmärrä application/xml+xhtml:ää ollenkaan (tai miten se taas menikään).
Kiitos!
Tuo meta-tagin asetus on tosiaan hyvää muistaa tapauksissa, joissa xml-määritteen joutuu ottamaan pois.
<tämä menee todennäköisesti 99% lukijoista ohitse>
Huomasin tässä että kaksi sisäkkäistä suhteellisesti aseteltua (position : relative;) elementtiä aiheuttavat mielenkiintoisia sijoitteluongelmia Internet Explorer 6:ssa ja aiemmassa. Havaintoni on se, että jos elementille laittaa suhteellisen asettelun, niin IE6- olettaa tämän suhteellisen asettelun ainakin jokaiselle sisemmälle diville. Jos sitten vielä jollekin näistä asettaa suhteellisen asettelun, niin sillä saa todella outoja sijoittamisia esim. elementtejä kellutettaessa (float) tai absoluuttisesti sijoitellessa (position : absolute;).
Ongelma ratkeaa siis yksinkertaisesti sillä, että jos todellakin tarvitsee sitä toistakin sisäkkäistä suhteellista asettelua, niin sitten vain heittää IE6:lle ja aiemmille sille sisäelementille staattisen (position : static;) sijoittelun: se käyttäytyy silti kuin se olisi suhteellinen. Jos taas tahtoisi välttää suhteellisen sijoittelun sen sisemmän elementin mukaisesti, niin se sitten taas ei taidakaan onnistua... bugi mikä bugi.
Pitäisi varmaan kokeilla tehdä käytännön testi... nyt on vaan liian väsy ja huomenna varmaan olen jo unohtanut tämän. IE7:ssä bugi on onneksi korjattu.
Operassa vastaavasti huomasin semmoottisen bugin, että jos elementti on sekä suhteellisesti aseteltu että kellutettu, niin siihen absoluuttisesti asetellut elementit sijoittuvat väärin; tämä tosin vain Opera 9:ssä. Lisäksi jos tässä suhteellisessa elementissä on myös kellutettu elementti, joka vaikuttaa samalla korkeudella kuin tämä absoluuttisesti sijoiteltu elementti, niin Opera ignooraa sen kellutuksen, toisin kuin Firefox 2 ja IE7 jotka huomioivat absoluuttisen elementin sijoittelussa myös kellutetun elementin olemassaolon (oletan tämän olevan oikea toimintatapa). Tämä menee sitten väärin kaikilla Operoilla, ei vain ysillä. Muistaakseni sijoittelu leftillä, topilla, bottomilla tai rightilla korjaa tämän ongelman; mutta pitäisi tällekin tehdä kunnon testi.
Tämän Opera-bugin voi kiertää sillä, että kelluttaa yhden elementin ilman suhteellista sijoittelua ja laittaa yhden ylimääräisen elementin jossa on sitten se suhteellinen asettelu.
</tämä menee todennäköisesti 99% lukijoista ohitse>
Tämä liittyi aika löyhälti alkuperäiseen aiheeseen, mutta mitä tuosta nyt voi ymmärtää, niin erikoisemmin sijoitellun elementin yhdistäminen erikoisemmin sijoitellun elementin kanssa voi nostattaa bugin. Pahimmillaan jokin poikkeustapauksen poikkeustapauksen poikkeustapauksen poikkeustapaus aiheuttaa jonkin selaimen renderöinti- tai toimivuusbugin. Sitten näistä kertominen on todellakin tuollaista pitkää litanjointia, koska sitä tietoa sitten riittää aika paljon kun täytyy/täytyisi kertoa yksityiskohtaisesti milloin bugi esiintyy. Siksi alkuperäiseen kysymykseen vastaaminen kattavasti on myös aikamoisen vaikeaa, koska ongelmallisia kohtia ei ole vain yhtä, vaan niitä on monta, jotka esiintyvät eri tilanteissa. Näiden "yleisyydestä" on myös todella vaikea sanoa mitään. Siten oikeastaan jääkin vain nämä "virheet", joita sivujen tekijä voi tehdä ja todennäköisesti jossain vaiheessa tekeekin.
(piti harkita hetken että lähetänkö vaiko en, mutta kai tästä joku saa iloa)
Aihe on jo aika vanha, joten et voi enää vastata siihen.