Latasin vähän aikaa sitten Mozilla Firefoxin koneellemme ja harmikseni huomasin, että sivujeni tyylitiedostot eivät toimi tällä selaimella

Linkkien mouse over -tyylit toimivat jotenkuten, mutta eivät samoin kuin Explorerilla. Värilliset vierityspalkit ei toimi eikö myöskään etusivun päivityslaatikko (scrollbox). Mikä avuksi? Vai eikö css vain yksinkertaisesti toimi Firefoxilla?

Kyllä ongelmat ovat ihan muualla kuin Firefoxissa.

Ensiksi CSS ei tunne sellaista valitsinta (property) kuin scrollbar, joten selain joka tukee CSS standardia ei voi sitä oikein esittää, koska sellaista ei ole olemassa. Se, että Microsoft on sellaisen lisännyt IE:n ja omilla sivuillaa selittää, miten se toimii ei tee siitä standardia CSS:ää. Microsoft on itse mukana W3C:n työryhmissä, jotka kehittävät standardien määrittelyjä, joten olisi toivottavaa, että se itse myös niitä jotenkin noudattaisi, eikä jatkuvasti yritä käyttää omaa määräävää markkinaosuutta kaapatakseen koko internetin omakseen. Nettiä selataan nykyään - ja tulevaisuudessa yhä enemmän - laitteilla, joilla ei ole mitään tekemistä tietokoneiden kanssa. Olisi toivottavaa, että netin selaaminen onnistuu myös näillä muilla laitteilla ja silloin ei voida tehdä IE:n standardin mukaisia sivuja, vaan sivuja, jotka noudattavat yleistä standardia ja joka siis mahdollistaa useiden erilaisten laitteiden käytön sivujen lukemiseen.

Toisaalta, jos käyttää Microsoftin ohjelmia sivujen tuottamiseen lienee mahdotonta saada aikaan sivuja, jotka toimivat oikein muilla selaimilla, jos ei itse tarkista ja korjaa sivujensa lähdekoodia. Microsoft on selvästi osoittanut esim. omilla sivuillaan, että se ei halua muiden selaimien toimivan kunnolla, vaan on lisännyt joillekin sivuilleen selaimen tunnistavan JavaScriptin, joka sitten valikoi kyseiselle selaimelle sellaisen CSS-tiedoston, joka ei toimi kunnolla. Myös sinun sivuillasi on selaimen tunnistava JavaScript, jonka FronPage on sinne tunkenut...

Navigointilinkkisi on tehty JavaScriptillä, mikä sinällään on harmillista, sillä samanlaiset, mutta varmemmin toimivat ja paljon kevyemmät olisit saanut aikaan CSS:llä. Tekstin sisällä olevat linkit toimivat Safarilla, Firefoxilla ja IE:llä ihan niin kuin CSS-tiedostoon olet kirjoittanut. Mainittakoon, että bold ei ole font-style, vaan font-weight ominaisuus.

En jaksa uskoa, että .srollbox-luokka toimii kunnolla, jos annat sen kappaleen (<p>) luokaksi. Lähemmäs oikeaa tulosta pääsisit, jos käytät sitä <div> -tagin luokkana, mutta se voi lisätä jo monta muuta mutkaa. Tai voisit ehkä kokeilla sitä taulokon soulun luokkana. Sivusi on kyllä varsin massiivisesti täytetty taulukon-taulukon-taulukoilla, miten enää itse pysyt perässä noissa?

Sitten huomautettava on, että sivuiltasi puuttuu <!DOCTYPE ...>, joten selaimet voivat vain arvailla, miten haluat sivusi tulkittavan.

CSS-tiedostosi on sellainen sillisalaatti, että on kiitettävää, miten hyvin selaimet selviävät sen lukemisesta. On varsin ihmeellistä sulkea lähes kaikki tyylimäärittelyt html kommenttien sisään.

Keskellä CSS-tiedostoa sinulla on muutakin html-koodia sekoitettuna, sieltä löytyy orpoja luokkia, tyylin loppumerkintöjä ilman alkumerkintää... Eli siistisin ensin tuon tiedoston ja tekisin standardien mukaisesti enkä vaatisi selaimia tulkitsemaan CSS-tyylitiedostosta sellaista, mikä ei sinne kuulu, ja vasta sitten ryhtyisin pohtimaan eikä joku selain tue CSS-tyylitiedostoja. Fakta nimittäin on, että nykyisten selainten uusimista versioista IE tukee CSS-tyylitiedostoja kaikkein heikommin, mutta mikään selain ei tue niitä sata prosenttisesti.

Sivun lähdekoodissa ja CSS-tiedostossa olisi siis paljon petraamista, mutta täällä Firefox esittää sivun oikein mallikkaasti, vaikka ei mitään scrollbareja esitäkkään, mikä minun silmissäsi on todennäköisesti vain etu sivuillesi. Minä en kahta sekuntia kauempaa katsele sivua, jolla monta scrollbaria, kullä selaimen omilla scrollbareilla täytyy selvitä.

Sen sijaan IE (!!) ja Safari molemmat hieman rikkovat navigointi palkkiasi ja syy siihen on "tyhjä.gif", joka on eksynyt viesraskirja linkkisi "viekku.gif" -kuvan jatkoksi samaan soluun. Ongelma ratkennee poistamalla tuo ylimmäräinen kuva.

Hui, tässähän tulikin jo vastausta kerrakseen

Ensimmäisenä pitää ilmeisesti tunnustaa, etten ole kovinkaan perehtynyt CSS:ään. Ja tosiaan huomasin nyt ihan itsekin, että tuonne tiedostoon on jäänyt kaikkea vähän turhaa Olen näitä joitakin muotoiluja katsonut erilaisilta sivustoilta, ehkä enimmäkseen täältä. Ei ehkä paras vaihtoehto, sillä se on ruotsiksi. Luulin kuitenkin ymmärtäneeni sitä tarpeeksi hyvin, mutta ilmeisesti en kuitenkaan. Joskus aikojen alussa muistelen ottaneeni tuon scrollbar-koodin tuolta sivustolta. Nyt kun katsoin sitä, niin siellähän tosiaan lukee, että kyseinen koodi ei toimi Firefoxilla En muista tuon varoituksen kuitenkaan olleen siellä ennen. Esitänkin sitten kysymyksen, että saako ”oikealla” CSS:llä mitenkään tehtyä värillistä vierityspalkkia? Vaikkei se nyt sinun mielestäsi ehkä olekaan tärkein asia tuossa sotkussa.

Olen miettinytkin tuon navigoinnin toteuttamista CSS:llä, mutta vielä en ole ehtinyt perehtyä siihen sen paremmin.

Kyllä tuo scrollbox näkyy minun koneellani IE:llä aivan hyvin vaikka onkin kappaleen <p> luokka. Yritin laittaa sen aluksi myös <div>-tagin luokaksi, mutta siinä tuli jotain hämminkiä. Olen itsekin kyllä joskus miettinyt tuota sivujen raskautta monien taulukkojen vuoksi. En ole kuitenkaan onnistunut sivuja saamaan haluamaani muotoon ilman niitä, joten olen antanut olla. Pysyn ihan hyvin perässä

Tuollaisesta <!DOCTYPE ...> en ole ennen kuullutkaan. Näytti olevan tuolla Webdesingskolanin sivuilla siitä jotain mainintaa, jota en ole ennen huomannut. Pitää ilmeisesti tutustua tarkemmin.

Kyllä minäkin olen suurilta osin tyytyväinen sivujen näkyvyyteen eri selaimilla, mutta nuo muutamat asiat harmittivat. Minulla IE ei riko navigointipalkkia millään tavalla. Näkyy myös aivan hyvin Firefoxilla ja Operalla. Tosin Operalla ei toimi mouse over –efekti. Tiedä sitten mistä johtuu. Jos poistan tuon tyhjä.gif –kuvan, sitten sivu vasta rikkoontuukin. Aika jännä, että sama selain näyttää kohdan eri lailla

Mutta kiitoksia, sainpas kerrankin rehellistä palautetta sivuista. Luulin osaavani edes jotakin, mutta ilmeisesti en. Taidan tästä lähteä opettelemaan kotisivujen tekoa…

Tsot! Tsot! Kyllähän sinä jotakin osaat, mutta aina löytyy petrattavaa, niin kuin meillä kaikilla

Nikseli.net, joka on kohtuullisen uusi sivusto tarjoaa runsaasti linkkejä erilaisiin suomenkielisiin oppaisiin, jotka liittyvät kuvankäsittelyyn, HTML:n, CSS:n yms. Jos ruotsi sujuu paremmin kuin englanti, ei tuossa ruotsinkielisessä sivustossa varmasti ole mitään vikaa ja englanniksi tietoa löytyy pilvin pimein. Jos englanti sujuu jotenkin paras paikka aloittaa voisi olla W3C sivuilta. Sieltä löytyy myös oppaita ja ainkin nopeasti näkee mitä valitsimia (property) ja luokkia (class) ym CSS:ssä on ja mitä arvoja niissä voi käyttää.

<!DOCTYPE ...> tagista löydät lisää infoa mm. täältä. Sinällään mielenkiintoista, että et ole siitä kuullutkaan. Onko ihan oikeasti niin, että FrontPage ei sitä automaattisesti lisää dokumentin alkuun?

Suomeksi DTD:stä löytyy mm. täältä.

Toisaalta tällä foorumilla tuntuu, että kukaan nuorista, joka mainostaa itseään websivujen tekijänä, ei ole koskaan kuullutkaan DOCTYPEstä. Se on kuitenkin ensimmäinen asia, joka pitää jokaisen websivun alkuun kirjoittaa, koska sillä määritellää, millä kielellä sivu kirjoitetaan, käytetäänkö kehyksiä yms. Muistelen takavuosina täällä oli keskustelua DreamWeaverista ja minä ihmettelin, kun DW:llä tehdyillä sivuilla ei ollut DOCTYPEä ja kyse on kuitenkin varsin kalliista WYSIWYG editorista. Selvisi, että ne, jotka tekivät sivuja olivat ottaneet sen määrittelyn alusta pois, kun ajattelivat sen olevan vain turhaa höpinää

Alla kuva rikkoutuvasta navigointipalkista:


Ja näin Firefox esittää sivun


Pienensin kuvia reilusti, mutta kyllä niistä näkee, miltä sivu näyttää. Kokeilin juuri myös Operaaja se näytti sivun yhtä mallikkaasti kuin Firefox, kaikki mouseoverit toimivat moitteetta ja näytti jopa jotenkin reagoivan tuohon scrollbar määrittelyyn!! Ei ihan täydellisesti, mutta kuitenkin. Opera osaa tietyssä määrin imitoida IE:tä, joten siinä ehkä syy.

Se, että IE minulla ja sinulla toimivat erilailla, johtuu siitä, että minulla Mac IE, joka käyttää sivun esittämiseen Tasmania, kun WIN IE käyttää sivun esittämiseen Talismania. Myös saman selaimen eri versiot samassa käyttöjärjestelmäympäristössä toimivat eritavalla.

Minä en tiedä, miten CSS:llä saisi muokattua vierityspalkkia. Ylipäätään vierityspalkin värin määrittely on selaimen asetuksissa määriteltävä asia. En todellakaan pidä ajatuksesta, että joku nettisivu ryhtyy sähläämään minun selaimeni asetusten kanssa kysymättä minulta lupaa. Se, että Microsoft on tällaisen aukon tehnyt omaan selaimeensa, ei kerro kuin monista muista huomattavasti vakavammista aukoista, joita on Microsoftin ohjelmissa.

Jeps, kiitoksia näistä vinkeistä. Pitääpä ruveta tarkemmin opettelemaan noita juttuja kunhan vaan löytäis aikaa jostain

En ainakaan ole poistanut Frontpagen tekemästä koodista mitään, joten tuskin se tuota DOCTYPEä on lisännytkään siihen. Minulla tosin on tuo rupunen Frontpage Express, en sitten tiedä miten on niissä kehittyneemmissä versioissa.