Jos koneellasi on esim. IE 6, Opera 6 ja Netscape 6, voisitko auttaa? Olen tässä pari päivää väsänny kotisivua ja tihrustanut koodia pää halkeamispisteeseen saakka, mutten löydä virhettä! Validatoritkaan ei mitään suuremmin herjaillu...
Siis ongelmia on parikin:
table.kuva on keskellä, ja sille olen määrittänyt taustakuvan. IE näyttää (yllätys, yllätys) oikein, Opera heittää koko taulukon väärään laitaan ja Netscape, Mozilla ja K-meleon ei näytä taustakuvaa lainkaan.
Lisäksi linkeiksi olisi tulossa kuva, jonka olisi tarkoitus olla kiinni seuraavassa taulukossa, mutta ainakin Mozilla ja K-meleon jättää näiden väliin parin pikselin raon...ei hyvä.
Netscapen nelosversiosta on ihan turha puhuakaan, se ei näytä juuri mitään oikein...
No enivei, jos jollakin on aikaa ja mielenkiintoa katsastaa, laitoinn sivun väliaikaiseen osoitteeseen:
http://www.condens.fi/annika/index.htm
Ja tyylitiedosto
http://www.condens.fi/annika/annika.css
Sivut noin muutenkin ovat keskeneräiset, älkää välittäkö. Mutta kun ei vaan pieni ihminen taas keksi...
Siis ongelmia on parikin:
table.kuva on keskellä, ja sille olen määrittänyt taustakuvan. IE näyttää (yllätys, yllätys) oikein, Opera heittää koko taulukon väärään laitaan ja Netscape, Mozilla ja K-meleon ei näytä taustakuvaa lainkaan.
Lisäksi linkeiksi olisi tulossa kuva, jonka olisi tarkoitus olla kiinni seuraavassa taulukossa, mutta ainakin Mozilla ja K-meleon jättää näiden väliin parin pikselin raon...ei hyvä.
Netscapen nelosversiosta on ihan turha puhuakaan, se ei näytä juuri mitään oikein...
No enivei, jos jollakin on aikaa ja mielenkiintoa katsastaa, laitoinn sivun väliaikaiseen osoitteeseen:
http://www.condens.fi/annika/index.htm
Ja tyylitiedosto
http://www.condens.fi/annika/annika.css
Sivut noin muutenkin ovat keskeneräiset, älkää välittäkö. Mutta kun ei vaan pieni ihminen taas keksi...
Vastaukset 9
Vanhimmat
Sivut ovat nätit... Phoenix (/mozilla) näyttää sivut muuten samalla tavoin, kuin IE , mutta se hassu kuva, joka on portfolio tekstin alla, renderöityy sivujen yläreunasta saakka (tosin ainoa osa mikä siitä näkyy, on porfolionapin alapuoleinen pikku pätkä)...
Kiitos. Aika outoa, sen pitäisi olla yhtenäinen kuva koko yläpalkissa...muutenkin on outoa, kun selaimet tulkitsee niin eri tavoilla. Ehkäpä pitäisi koittaa karsia css:ää...ja hankkia myös tuo Phoenix!
Joo siis sain sen yhden kuvan näkyviin, kun vaihdoin sen taulukon taustakuvasta solun taustakuvaksi ;) Edelleen hämää ne raot kuvien välissä, mutta enköhän mä joskus senkin keksi...
Ehdit jo korjata kuvajutun ennen kuin ehdin vastata. Ongelma ei kylläkään johtunut siitä, että kuva oli taulukon taustakuvana, vaan siitä, että siinä oli background-attachment: fixed. Nythän siinä on scroll, jota ei välttämättä edes tarvita, koska se on oletusarvo.
Se että kuva näkyi tuon fixed-arvon kanssa Internet Explorerissa, johtuu siitä, että Internet Explorer on toteuttanut ominaisuuden CSS-standardin vastaisesti. Jos background-attachment on fixed, taustakuva pysyy paikallaan, kun selainikkunaa vieritetään. Lisäksi koordinaatit viittaavat aina selainikkunaan eikä siihen elementtiin, jolle taustakuva on määritelty. Eli koska olit laittanut koordinaateiksi top left, taustakuva asettui esim. Mozillassa (aivan oikein) selainikkunan vasempaan yläkulmaan. Kuten jo tuossa mainittiinkin, kuvasta näkyy vain se osa, joka osuu päällekkäin taulukkoelementin kanssa. Huomaa, että jos ikkunaa pienentää tarpeeksi ja taulukon vierittää vasempaan yläkulmaan, kuva tulee näkyviin.
Taisi olla aika epäselvä selostus :-) Eric Meyerin kotisivulla on esimerkki, jossa fixed-ominaisuutta hyödynnetään aika näppärästi.
http://www.meyerweb.com/eric/css/edge/complexspiral/demo.html
Esimerkki toimii ainakin Mozilla 1.x-, Netscape 7.x- ja Opera 7 -selaimilla. Internet Explorer näyttää sen väärin.
En saa taustakuvaa edelleenkään näkyviin Opera 7 -selaimella. Jotenkin tuntuu, että Opera on allerginen itse gif-tiedostolle, koska jos vaihdan sen johonkin toiseen samannimiseen kuvaan, kuva tulee näkyviin. Mysteeristä.
Tuo taulukkosysteemi (taitaa olla kolme sisäkkäin) on aivan turha noinkin yksinkertaiselle layoutille. (Se on turha melkein aina.) Myös läpinäkyvän gif-tiedoston käyttö kauhistuttaa, kun saman saisi aikaan vain hieman paddingia lisäämällä.
Kokeilepa seuraavaa (testattu Mozilla 1.2, Opera 7, IE 6):
Annika - etusivu
Tälle sivulle olisi tarkoitus luoda jonkinlainen lyhyehkö mainos/
markkinointipuhe. Kerrotaan myös miksi nämä sivut ovat täällä, ketä ne
palvelevat, mitä ne sisältävät ja kuka on tekijä.
Portfolio-sivuille yritetään koota kaikenlaisia työnäytteitä,
joista voisi kuvitella olevan jonkinlaista konkreettista hyötyä.
Montakaan työnäytettä ei ainakaan laiteta teknisen piirtämisen saralta,
sitä nyt ei välttämättä haluta markkinoida niin kovasti. Näytteiden
pitäisi kuitenkin olla monipuolisia.
CV:ssä kerrotaan sitten tietysti ne normaalit jutut, mutta tiivistetysti.
Siis jotain itsestä ja aiemmasta työkokemuksesta.
Kontaktisivuille voisi laittaa paitsi yhteystiedot, myös jonkinlaisen palaute-
tai kyselylomakkeen.
© 2002 Annika Mäkinen
Ja tyylitiedosto (hieman karsittu)
body
{
background: maroon;
color: #000000;
margin : 168px 0px 0px 0px;
padding: 0px;
font-family: Verdana, sans-serif;
font-size: 11px;
}
#linkit
{
text-align: center;
height: 32px;
}
#reunus
{
background: black;
}
#teksti
{
background: white url(kuvat/annika5.gif) no-repeat top left;
color: maroon;
width: 390px;
margin: auto;
padding: 10px 10px 10px 200px;
text-align: right;
}
#copyright
{
background: white;
width: 600px;
color: maroon;
text-align: center;
font-size: 9px;
margin: auto;
padding-bottom: 10px;
}
#alaosa
{
background: transparent url(kuvat/ala.gif) no-repeat top center;
height: 32px;
}
Tämä ei toimi oikein Internet Explorer 5.5 -selaimella (ja vanhemmilla versioilla). Kyseessä on selaimen virhe, jonka voi kiertää, mutta tyylitiedostosta tulee suttuisempi. Jos kiinnostaa, voin kyllä selittää.
Kiitoksia sinulle. Kylläpäs tulikin huomattavasti yksinkertaisemman näköstä...noitten taulukoiden kanssa kun säätää, ei tahdo edes itse aina pysyä perässä :(. En ole koskaan käyttänyt div-elementtiä ja sen tarkoitus on jäänyt vähän epäselväksi. En ehtinyt tuohon vielä oikein paneutua, mutta saakos tuon myös keskitettyä vaakasuunnassa näytön koosta riippumatta? No se on silti pientä...
Netscape Navigator 4.08 ei osannut tuota myöskään, IE:stä mulla on vaan 6-versio ja se jätti linkki-kuvan ja mustan taustan väliin raon. Muut selaimet (Mozilla 1.0, Opera 6.01, K-meleon 0.6(?), Netscape 6.02)näyttivät sivun mallikkaasti. Täytyypi paneutua noihin juttuihin vähän lisää ja miettiä tota yksinkertaisempaa vaihtoehtoa. Niin ja totta kai kiinnostaa jos vielä viitsit jelppiä eteenpäin!
Nyt just kyllä pää jumittaa niin pahasti et en viitsi ruveta esittämään lisää tyhmiä kysymyksiä...
-elementin tärkein käyttö lienee juuri tuo, että sen avulla pystyy erottamaan dokumentista lohkoja/osia, jotka voi nimetä id/class-attribuuteilla ja joihin voi sitten soveltaa CSS-määrittelyjä. yksinään tuottaa vain rivinvaihdon ennen ja jälkeen.
Keskittäminen vaakasuunnassa? Ainakin IE6, Mozilla 1.2, Netscape 7 ja Opera 7 keskittävät ihan oikein. Keskittämisen pitäisi saada aikaan tyylimäärittely margin: auto, joka asettaa vasemman ja oikean marginaalin samanlevyisiksi. Tämä edellyttää, että elementin leveys on määritelty, kuten tässä on tehty. Ja sitten ikävä puoli: IE 5.5 ja vanhemmat eivät tunnista margin: auto -määrettä, joten niissä tämä ei onnistu.
Mielestäni Netscape Navigator 4.xx-selaimet voi jättää kokonaan huomiotta, kun tekee tyylimäärityksiä. Riittää, kun pitää huolen, että tekstit ovat luettavissa ja linkit toimivat. Ne ovat täysin toivottomia tapauksia, ja niiden käyttäjät voisivat jo hyvin siirtyä Netscape 7:ään tai Operaan.
IE 6:n rako selviää seuraavalla muutoksella:
#linkit
{
width: 600px;
margin: auto;
height: 32px;
}
#linkit img
{
display: block;
}
Tätä on hieman hankala selittää. Normaalisti kuvat ovat inline-elementtejä, ja esimerkiksi tekstin seassa niitä käsitellään periaatteessa kirjaimina. Ilmeisesti tässä IE jättää kuvan alle sen saman raon, mikä jätetään tekstikappaleessa tekstirivien väliin. Ajattelin, että koska lohkon korkeudeksi oli määritelty kuvan korkeus 32px, tälle raolle ei olisi tilaa, mutta näemmä on sittenkin. Tuo display: block aiheuttaa sen, että kuvaa käsitellään lohkoelementtinä eli se ei ole enää "kirjain" vaan esim. tekstikappaleeseen verrattavissa oleva elementti. (Huomaa, että jos jokainen linkeistäsi olisi eri kuvassa ja ne olisi aseteltu vierekkäin, display: block aiheuttaisi sen, että kuvat asettuisivat allekkain, koska lohkoelementtiä ennen ja sen jälkeen tulee aina rivinvaihto.) No, tämä toimii IE:ssä, mutta koska text-align: center ei vaikuta lohkoelementteihin, muut selaimet viskaavat kuvan vasempaan laitaan. Sen vuoksi muutin sitten tuon #linkit-lohkon määrittelynkin.
Muuten, jotkin selaimet jättivät tuon raon table-layoutissasikin? Kokeilepa tuota samaa konstia (laita esim. img-tagiin attribuutti style="display: block") ja kerro, auttoiko. Voi olla kyse samasta ilmiöstä.
Lisäsin tuon määrittelyn (style="display: block") sivuun, ja luulen että se teki juuri sen mitä pitikin! En muuttanut nyt vielä muuta tällä kertaa...
Siksi vain LUULEN, että se auttoi, koska olin niin hämmästynyt kun Netscape 4 näytti sivun juuri siten kun pitääkin, että päivitin muutoksen heti nettiin, mutta nyt en saa sitä Netscapea enkä Mozillaa pystyyn joten en usko ennen kuin näen uudestaan...
Niin että kiitoskiitoskiitos! Mitäs sanot siihen, kun olen miettinyt noiden linkkien kanssa jotain tällaista;
- linkkialue määritellään kuvakartalla
- Javascriptillä vaihdetaan linkkikuvia niin että tekstin väri vaihtuu kun osoitin viedään tekstin päälle, ja kyseisellä sivulla oltaessa linkki pysyy eri värisenä. Siis näitä OnMouseOver jne. toimintoja. En ole mikään taituri tuon Javascriptinkään kanssa, joten teenkö turhaa työtä jos alan tollaista virittelemään? Vai olisiko taas joku helpompi/toimivampi ratkaisu parempi?
Juu, taisi olla joku häriö koneellani...niinkuin on todettu, Netscape 4.xx kannattaa kaiketi unohtaa. Mozilla ei mulla nyt suostu näyttämään muuta kuin tekstin, hämärää. Täytyy paneutua tähän kunnolla :>/