Mikä vikana kun seuraava koodi ei toimi IE:ssä ongelmitta, mutta kylläkin Firefoxissa ja Netscapessa??
Siis kun solujen väliin jää tyhjä tilat IE:ssä. Siis kun yritän tehdä taulukossa navigointipalkkia, kuvat eivät mene kiinni toisiinsa.
Olen yrittänyt selvittää ongelmaa eri sivujen koodia tutkimalla, mutta en ole onnistunut. Joskus olen saanut IE:ssäkin toimimaan, mutta en nyt muista miten.
Koodi:
pieni taulukko-onkelma
17
568
Vastaukset
- Hmmnn
Toimisikohan näin.
- foxytin
Jos halutaan noudattaa standardeja ja semantiikallisia ohjeita, ei taulukkotaittoa käytetä mihinkään muuhun, kuin taulukkomuotoisen datan esittämiseen. Joten tehkäämme navigaatio lista-elementillä.
- -Ridge-
Laita td-tagin lopetus samalle riville kuvan kanssa..
...height="16">- foxytin
Sillä ei ole mitään väliä millä rivillä lopettaa solun. TD-aloitustagin ja /TD-lopetustagin välissä voi olla vaikka 100 tyhjää riviä.
IMG-tagia ei myöskään lopeteta /img-päätöstagilla. Jos merkataan html:llä, niin sitä ei tarvitse lopettaa ollenkaan. Jos taas merkataan xhtml:llä, niin img-tagi lopetetaan laittamalla / merkki loppuun: - -Ridge-
foxytin kirjoitti:
Sillä ei ole mitään väliä millä rivillä lopettaa solun. TD-aloitustagin ja /TD-lopetustagin välissä voi olla vaikka 100 tyhjää riviä.
IMG-tagia ei myöskään lopeteta /img-päätöstagilla. Jos merkataan html:llä, niin sitä ei tarvitse lopettaa ollenkaan. Jos taas merkataan xhtml:llä, niin img-tagi lopetetaan laittamalla / merkki loppuun:Eli kokeilit kun noinkin varmasti vastasit..?
Siinä koodi, 100px kanttiiltaan ja samankokoinen kuva, kas kummaa mikähän väli siellä kuvan alla on, häipyy kun heittää kuvan perään..!! - foxytin
-Ridge- kirjoitti:
Eli kokeilit kun noinkin varmasti vastasit..?
Siinä koodi, 100px kanttiiltaan ja samankokoinen kuva, kas kummaa mikähän väli siellä kuvan alla on, häipyy kun heittää kuvan perään..!!Vika ei ole siinä, millä rivillä td lopetetaan.
Tässä tapauksessa vika on puhtaasti siinä, että taulukolle (table) on annettu attribuutti "width" ja sille arvo "100px". Ottamalla sen pois ei väliä pitäisi olla. En ainakaan itse IE:llä, tai Firefoxilal sitä nähnyt.
Samalla kannattaa unohtaa kaikki muutkin vanha merkkaus ja siirtyä css-taittoon.
Mutta kuten aikaisemmin sanoin, linkkejä ei tule laittaa taulukkoon, vaan lista-elementtiin. - -Ridge-
foxytin kirjoitti:
Vika ei ole siinä, millä rivillä td lopetetaan.
Tässä tapauksessa vika on puhtaasti siinä, että taulukolle (table) on annettu attribuutti "width" ja sille arvo "100px". Ottamalla sen pois ei väliä pitäisi olla. En ainakaan itse IE:llä, tai Firefoxilal sitä nähnyt.
Samalla kannattaa unohtaa kaikki muutkin vanha merkkaus ja siirtyä css-taittoon.
Mutta kuten aikaisemmin sanoin, linkkejä ei tule laittaa taulukkoon, vaan lista-elementtiin.Eli et edes kokeillut, mutta koetetaan nyt vielä kerran jos vaikka tajuaisit, laitan oikein taustavärillä ja tuolla css:llä kun sitä niin yrität tyrkyttää, mutta ei sun mulle sitä tarvitse opettaa..
Alkuperäinen kysyjä valitti kun IE ei toimi oikein, keino joka tepsii on tuossa lopetuksessa, se onko koodi uutta vai vanhaa, se ei kiinnosta mua pätkääkään kun siitä ei ollut kyse.. - foxytin
-Ridge- kirjoitti:
Eli et edes kokeillut, mutta koetetaan nyt vielä kerran jos vaikka tajuaisit, laitan oikein taustavärillä ja tuolla css:llä kun sitä niin yrität tyrkyttää, mutta ei sun mulle sitä tarvitse opettaa..
Alkuperäinen kysyjä valitti kun IE ei toimi oikein, keino joka tepsii on tuossa lopetuksessa, se onko koodi uutta vai vanhaa, se ei kiinnosta mua pätkääkään kun siitä ei ollut kyse..Mitä jos unohdetaan koko img-tagi ja isketään kuva css:llä soluun?
IE:llä on ilmeisesti joku pakottava tarve lisätä img-tagiin oikealle ja alas tyhjää tilaa.
Kaikkein helpoin, paras ja oikeellisin tapa on kuitenkin se lista-elementti. En näe syytä, miksei sitä voisi siis käyttää. Ja kyllä, tiedän kyllä, että ketjun aloittaja taisteli taulukon kanssa, mutta tokihan saa opastaa parempien tapojen käyttöön?
Tein nyt esimerkkisivunkin samalla.
http://www.zoorweb.net/foxytin/solusta_listaan.html
Kolme esimerkkiä, kussakin kaksi kuvaa selventämässä asiaa. Ensimmäisessä esimerkissä kuva on laitettu taustakuvaksi ja td-tagi on lopetettu seuraavalla rivillä.
Toisessa esimerkissä kuva on laitettu td-tagiin img-tagilla ja solu on päätetty samalla rivillä.
Kolmas esimerkki on toteutettu listalla ja kuva on laitettu taustakuvaksi.
Sitten voidaan alkaa käymään läpi. IE:llä (itsellä edelleen 6.0) Ensimmäinen ja toinen esimerkki näyttävät samalta. Lista-elementillä toteutettu esimerkki ei tulosta mitään muuta kuin kuvat, joten siinä ei ole ollenkaan mitään välejä, vaan kuvat ovat toisissaan täysin kiinni (tarvittaessa välit tietysti saa tehtyä padding-attribuutilla).
Firefoxilla (itsellä 2.0) ensimmäinen esimerkki ei tulosta välejä, mutta toinen (img-tagilla tehty) tulostaa (vaikka se td on samalla rivillä). Listalla toteutettu näyttää samalta kuin IE:llä
Eli tästä voidaan tulla siihen tulokseen, että laittamalla solun taustakuvaksi halutun kuvan, saadaan välit pois sekä IE:llä, että Firefoxilla.
Koska kyseessähän on navigaatio (ainakin ketjun aloittajan mukaan), niin oletan, että kuvia pitäisi voida klikata. Tällöin järkevintä on tehdä lista ja määrittää linkeille kuvat. Näin saadaan myös tyhjät välit pois ja kuvia voi klikata.
Toki voi olla, että kuvia ei ole tarkoitettu klikattavaksi, vaan pikemminkin taustakuvaksi, jonka päälle tulee tekstilinkki. Tällöin tulisi ainakin laittaa taustakuvaksi, ei img-tagilla, sillä img-tagin päälle ei voida kirjoittaa. Tai voidaan, kun säädetään (absoluuttisella paikalla, tai esim z-indexillä). - -Ridge-
foxytin kirjoitti:
Mitä jos unohdetaan koko img-tagi ja isketään kuva css:llä soluun?
IE:llä on ilmeisesti joku pakottava tarve lisätä img-tagiin oikealle ja alas tyhjää tilaa.
Kaikkein helpoin, paras ja oikeellisin tapa on kuitenkin se lista-elementti. En näe syytä, miksei sitä voisi siis käyttää. Ja kyllä, tiedän kyllä, että ketjun aloittaja taisteli taulukon kanssa, mutta tokihan saa opastaa parempien tapojen käyttöön?
Tein nyt esimerkkisivunkin samalla.
http://www.zoorweb.net/foxytin/solusta_listaan.html
Kolme esimerkkiä, kussakin kaksi kuvaa selventämässä asiaa. Ensimmäisessä esimerkissä kuva on laitettu taustakuvaksi ja td-tagi on lopetettu seuraavalla rivillä.
Toisessa esimerkissä kuva on laitettu td-tagiin img-tagilla ja solu on päätetty samalla rivillä.
Kolmas esimerkki on toteutettu listalla ja kuva on laitettu taustakuvaksi.
Sitten voidaan alkaa käymään läpi. IE:llä (itsellä edelleen 6.0) Ensimmäinen ja toinen esimerkki näyttävät samalta. Lista-elementillä toteutettu esimerkki ei tulosta mitään muuta kuin kuvat, joten siinä ei ole ollenkaan mitään välejä, vaan kuvat ovat toisissaan täysin kiinni (tarvittaessa välit tietysti saa tehtyä padding-attribuutilla).
Firefoxilla (itsellä 2.0) ensimmäinen esimerkki ei tulosta välejä, mutta toinen (img-tagilla tehty) tulostaa (vaikka se td on samalla rivillä). Listalla toteutettu näyttää samalta kuin IE:llä
Eli tästä voidaan tulla siihen tulokseen, että laittamalla solun taustakuvaksi halutun kuvan, saadaan välit pois sekä IE:llä, että Firefoxilla.
Koska kyseessähän on navigaatio (ainakin ketjun aloittajan mukaan), niin oletan, että kuvia pitäisi voida klikata. Tällöin järkevintä on tehdä lista ja määrittää linkeille kuvat. Näin saadaan myös tyhjät välit pois ja kuvia voi klikata.
Toki voi olla, että kuvia ei ole tarkoitettu klikattavaksi, vaan pikemminkin taustakuvaksi, jonka päälle tulee tekstilinkki. Tällöin tulisi ainakin laittaa taustakuvaksi, ei img-tagilla, sillä img-tagin päälle ei voida kirjoittaa. Tai voidaan, kun säädetään (absoluuttisella paikalla, tai esim z-indexillä)."isketään kuva css:llä soluun?"
Mihin soluun, lista esimerkissäsi ei ollut tablea, miksi..? Olisko ehkä siksi et homma kusee ja miten kusee, minäpä kerron..!!
Laitappa se lista soluun ja tuolla Strictin doctypellä, huomaatko miten käyttäytyy..?
Kokeile sitten HTML 4.01 Transitional, homma toimii eikä tarvi td:lle määritellä mitään juttuja.
Mutta kuten itsekin mainitsit niin aina ei ole kyse navigaatiokuvista, ne voi olla pelkkiä layoutin kuvia, mikä sitten on yksinkertaisin tapa kenelläkin niin käyttäköön sitä..
Tässä vielä koodi joka näyttää väärin:
Tämä oikein:
Tai sitten yksinkertaisesti: - foxytin
-Ridge- kirjoitti:
"isketään kuva css:llä soluun?"
Mihin soluun, lista esimerkissäsi ei ollut tablea, miksi..? Olisko ehkä siksi et homma kusee ja miten kusee, minäpä kerron..!!
Laitappa se lista soluun ja tuolla Strictin doctypellä, huomaatko miten käyttäytyy..?
Kokeile sitten HTML 4.01 Transitional, homma toimii eikä tarvi td:lle määritellä mitään juttuja.
Mutta kuten itsekin mainitsit niin aina ei ole kyse navigaatiokuvista, ne voi olla pelkkiä layoutin kuvia, mikä sitten on yksinkertaisin tapa kenelläkin niin käyttäköön sitä..
Tässä vielä koodi joka näyttää väärin:
Tämä oikein:
Tai sitten yksinkertaisesti:"Mihin soluun, lista esimerkissäsi ei ollut tablea, miksi..? Olisko ehkä siksi et homma kusee ja miten kusee, minäpä kerron..!!"
Eihän siinä ollut tablea, koska on väärin (tai siis semantiikaltaan väärin) käyttää taulukkotaittoa sivuston ulkoasun tekemiseen. Tarkoitin siis, että, jos välttämättä halutaan käyttää taulukkoa, niin sitten siihen taulukon soluun :]
"Laitappa se lista soluun ja tuolla Strictin doctypellä, huomaatko miten käyttäytyy..?"
Totta. Xhtml strict on tarkka pienestäkin asiasta, koska se ei sisällä lainkaan vanhoja ja ulkoasullisia tageja.
"Kokeile sitten HTML 4.01 Transitional, homma toimii eikä tarvi td:lle määritellä mitään juttuja."
Html transitional taas sisältää kaikki (ainakin lähes) vanhatkin tagit, joten homam toimii sillä.
"Mutta kuten itsekin mainitsit niin aina ei ole kyse navigaatiokuvista, ne voi olla pelkkiä layoutin kuvia, mikä sitten on yksinkertaisin tapa kenelläkin niin käyttäköön sitä.. "
Totta. Jokainen tietenkin saa tehdä ja tuleekin tehdä niin, kun itsestä tuntuu. Itse käytän css-taittoa ja rakenteellista merkkausta, pyrin pitämään merkkauksen oikeellisena, sekä semantiikaltaan oikeaoppiselta. Ihan vain sentakia, että sivut toimisivat mahdollisimman monella.
Ei tarkoitukseni ole haukkua ketään, tai pakottaa merkkaamaan w3c:n laatimien standardien perusteella, vaan tuoda esille erilaisia mahdollisuuksia toteuttaa jokin asia. - foxytin
-Ridge- kirjoitti:
"isketään kuva css:llä soluun?"
Mihin soluun, lista esimerkissäsi ei ollut tablea, miksi..? Olisko ehkä siksi et homma kusee ja miten kusee, minäpä kerron..!!
Laitappa se lista soluun ja tuolla Strictin doctypellä, huomaatko miten käyttäytyy..?
Kokeile sitten HTML 4.01 Transitional, homma toimii eikä tarvi td:lle määritellä mitään juttuja.
Mutta kuten itsekin mainitsit niin aina ei ole kyse navigaatiokuvista, ne voi olla pelkkiä layoutin kuvia, mikä sitten on yksinkertaisin tapa kenelläkin niin käyttäköön sitä..
Tässä vielä koodi joka näyttää väärin:
Tämä oikein:
Tai sitten yksinkertaisesti:Ahaa. Selvisipäs sekin. Kyllä se toimii aivan normaalisti xhtml strictissä (tottakait, ku nvalidia on).
Sinulla oli vain sattunut pieni virhe, eli puolipiste doctype-elementin jälkeen:
;
Otappas puolipiste pois, niin pitäisi toimia :] - -Ridge-
foxytin kirjoitti:
Mitä jos unohdetaan koko img-tagi ja isketään kuva css:llä soluun?
IE:llä on ilmeisesti joku pakottava tarve lisätä img-tagiin oikealle ja alas tyhjää tilaa.
Kaikkein helpoin, paras ja oikeellisin tapa on kuitenkin se lista-elementti. En näe syytä, miksei sitä voisi siis käyttää. Ja kyllä, tiedän kyllä, että ketjun aloittaja taisteli taulukon kanssa, mutta tokihan saa opastaa parempien tapojen käyttöön?
Tein nyt esimerkkisivunkin samalla.
http://www.zoorweb.net/foxytin/solusta_listaan.html
Kolme esimerkkiä, kussakin kaksi kuvaa selventämässä asiaa. Ensimmäisessä esimerkissä kuva on laitettu taustakuvaksi ja td-tagi on lopetettu seuraavalla rivillä.
Toisessa esimerkissä kuva on laitettu td-tagiin img-tagilla ja solu on päätetty samalla rivillä.
Kolmas esimerkki on toteutettu listalla ja kuva on laitettu taustakuvaksi.
Sitten voidaan alkaa käymään läpi. IE:llä (itsellä edelleen 6.0) Ensimmäinen ja toinen esimerkki näyttävät samalta. Lista-elementillä toteutettu esimerkki ei tulosta mitään muuta kuin kuvat, joten siinä ei ole ollenkaan mitään välejä, vaan kuvat ovat toisissaan täysin kiinni (tarvittaessa välit tietysti saa tehtyä padding-attribuutilla).
Firefoxilla (itsellä 2.0) ensimmäinen esimerkki ei tulosta välejä, mutta toinen (img-tagilla tehty) tulostaa (vaikka se td on samalla rivillä). Listalla toteutettu näyttää samalta kuin IE:llä
Eli tästä voidaan tulla siihen tulokseen, että laittamalla solun taustakuvaksi halutun kuvan, saadaan välit pois sekä IE:llä, että Firefoxilla.
Koska kyseessähän on navigaatio (ainakin ketjun aloittajan mukaan), niin oletan, että kuvia pitäisi voida klikata. Tällöin järkevintä on tehdä lista ja määrittää linkeille kuvat. Näin saadaan myös tyhjät välit pois ja kuvia voi klikata.
Toki voi olla, että kuvia ei ole tarkoitettu klikattavaksi, vaan pikemminkin taustakuvaksi, jonka päälle tulee tekstilinkki. Tällöin tulisi ainakin laittaa taustakuvaksi, ei img-tagilla, sillä img-tagin päälle ei voida kirjoittaa. Tai voidaan, kun säädetään (absoluuttisella paikalla, tai esim z-indexillä).Miksi laitoit kuviin/soluihin 1px borderit, laittaisit myös listaukseen niin oltaisin samalla viivalla, you know..?
Lisäämällä table-tagiin määritykset ja poistamalla nuo borderit kaikki pelaa kunnolla, siis nuo muut, listaus kusee jos strictin sinne jättää ja ne soluun laittaa: - -Ridge-
foxytin kirjoitti:
Ahaa. Selvisipäs sekin. Kyllä se toimii aivan normaalisti xhtml strictissä (tottakait, ku nvalidia on).
Sinulla oli vain sattunut pieni virhe, eli puolipiste doctype-elementin jälkeen:
;
Otappas puolipiste pois, niin pitäisi toimia :]Molemmat doctypelliset koodit oli validaattorin kautta vedettyjä ja täysin ilman virheitä, en voi sille mitään jos foorumin softa niitä puolipisteitä heittää minne sattuu, luulin sun sen tietävän..=)
- foxytin
-Ridge- kirjoitti:
Miksi laitoit kuviin/soluihin 1px borderit, laittaisit myös listaukseen niin oltaisin samalla viivalla, you know..?
Lisäämällä table-tagiin määritykset ja poistamalla nuo borderit kaikki pelaa kunnolla, siis nuo muut, listaus kusee jos strictin sinne jättää ja ne soluun laittaa:Voihan ne reunukset laittaa, jos haluaa. Itsellä taisi unohtua kiireessä :)
Jos merkataan strictillä (varsinkin xhtml, html strictistä en muista mitä se sallii), niin ei voida laittaa taulukkoon cellpadding, ja cellspacing-attribuutteja, koska xhtml strict ei niitä tunne (eikä myöskään border-attribuuttia saa käyttää). Toki jotkut selaimet sen näyttävät oikein, mutta kun viilataan pilkkua, niin niitä ei laiteta :) - -Ridge-
foxytin kirjoitti:
Voihan ne reunukset laittaa, jos haluaa. Itsellä taisi unohtua kiireessä :)
Jos merkataan strictillä (varsinkin xhtml, html strictistä en muista mitä se sallii), niin ei voida laittaa taulukkoon cellpadding, ja cellspacing-attribuutteja, koska xhtml strict ei niitä tunne (eikä myöskään border-attribuuttia saa käyttää). Toki jotkut selaimet sen näyttävät oikein, mutta kun viilataan pilkkua, niin niitä ei laiteta :)Kyllä tuo strict koodi menee läpi myös noilla antamillani table määrityksillä, kannattaisi kokeilla ennen kuin sanoo mitään, on parempi ja varsinkin helpompi puolustella kantaansa kun tietää asioista eikä luule, mut niihän sä profiilissasi jo kerroit..=)
En mä tässä pahuuttani kättä väännä, ihan vaan piruuttani..=) - Pölhögustaf
foxytin kirjoitti:
Sillä ei ole mitään väliä millä rivillä lopettaa solun. TD-aloitustagin ja /TD-lopetustagin välissä voi olla vaikka 100 tyhjää riviä.
IMG-tagia ei myöskään lopeteta /img-päätöstagilla. Jos merkataan html:llä, niin sitä ei tarvitse lopettaa ollenkaan. Jos taas merkataan xhtml:llä, niin img-tagi lopetetaan laittamalla / merkki loppuun:"Perfektionisti"
ja
"Uskoo osaavansa lähes kaiken mikä liittyy (x)html:ään/css:ään"
Todella harvahan osaa kaiken. Että siinä mielessä ei ole ihme, jos näin harvinaista asiaa kuin rivinvaihdon merkitystä ei tiedä. Siis sitä kuinka html-parserit tulkitsee html-koodissa olevan rivinvaihdon.
Mutta pikkusen nöyryyttä kyllä peräänkuuluttaisin. Ei pidä esittää suureen ääneen 'totuuksia', jos ei osaa asiaa.
- Tuulimyllyjä päin
Tuulimyllyjä päin taistelija kiittää muitakin taistelijoita. On totta että CSS:ään kaikin puolin varmasti siirrytään vähitellen, eli tulevaisuudessa varmaankin XML ja CSS jylläävät ja HTML on historiaa.
Mutta ainakin Ridgen apu kumma kyllä auttoi. Eli kun tagin laittaa loppuun niin IE:ssä ei soluvälejä taulukossa näy!
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Hoitajalakko peruuntuu, tilalle joukkoirtisanoutumiset
"Tehyn ja Superin hallitukset kokoontuivat tänään toteamaan, että tilanne edellyttää järeämpiä työtaistelutoimia." https://www.hs.fi/politiikka/art-27399140Johan tuli oikea aivopieru Britti Lordilta
Emeritusprofessori Lordi Robert Skidelsky sanoi Suomen rikkovan YYA sopimusta joka on tehty Neuvostoliiton kanssaa 1948. Mitä pir3737873Tehyn Rytkösellä tallessa tekstiviestit A-studiokohussa
https://www.mtvuutiset.fi/artikkeli/a-studiosta-kohu-tehyn-rytkosen-mukaan-ministeri-linden-sai-paattaa-osallistujat-ohjelma-kiistaa-vaitteen/84070681605547William ja Sonja Aiello ERO
Hyvä Sonja! Nyt etsit uudet kaverit ja jätät nuo huume- ja rahanpesu porukat haisemaan taaksesi!542334Oho! Seurapiirikaunotar, ex-missi Sabina Särkkä yllättää tällä harvinaisella kyvyllä: "Mulla on..."
Sabina Särkkä on nähty monissa tv-reality-sarjoissa. Mutta tiesitkö, että Särkällä on valokuvamuisti? https://www.suomi24.fi/viihde/oho-seurapiirikaun62079Se siitä sitten
Kirjoitan tänne kun en sulle voi. En vaivaa sua enää koskaan. En ikinä tarkoittanut olla ahdistava tai takertuva. Tunteet heräsi enkä osannut olla tyy821729Ohhoh! Rita Niemi-Manninen otti ison tatuoinnin - Herätti somekansan: "Täydellinen paikka!"
Rita Niemi-Mannisen suuri, uusi tatuointi on saanut somekansan heräämään talvihorroksesta. Niemi-Manninen otti tatskan rakkauslomalla Aki-miehensä kan191664Ihastumisesta kertominen
Olen päättänyt kertoa tunteistani ihastukseni kohteelle. Erityisen vaikeaksi tilanteeni tekee se, että kyseessä on ns. kielletty rakkaus. Olen jo toi921413Taas Venäjän tiedoittaja akka Varoitti Suomea ja Ruotsia liittymästä Natoon
Juuri sopivasti julkaistu varoitus, kun Suomen eduskunta alkaa klo 13:50 käsitellä asiaa suorassa TV 1:n lähetyksessä. ILtasanomat.4381348Harvoin julkisuudessa nähty Jari Sillanpää, 56, julkaisi uusia kuvia - Karisti Suomen pölyt jaloista
Huumekohun jälkeen matalaa profiilia pitänyt Jari "Siltsu" Sillanpää on ollut vaitonainen elämästään. Tänä keväänä miehen some on ollut hiljainen. Nyt61206