PNG-taustakuva ja IE 6?

[OPJ]

Päivää taas,

Nyt olisi uuden haasteen aika: Olen epätoivoiseseti yrittänyt keksiä, miten jonkin elementin (div) taustakuvana olisi läpinäkyvä png-kuva. Olen löytänyt netistä useita png fix for ie-javascript-pätkiä, mutta kaikissa näyttää olevan ongelmana se, että ne eivät toimi taustakuvissa. Kuvaan pitää siis laittaa leveys- ja korkeusdimensiot pikseleinä, ennen kuin toimii. Muutoin IE laittaa sitä kuuluisaa harmaata laatikkoa läpinäkyvyyden tilalle.

Jollakin varmaan parempaa tietoa, hakkaanko turhaan päätäni seinään? Aiemmin olen välttänyt png-kuvien käyttöä kuin ruttoa nettisovelluksissa, mutta nyt olen vähän pakon edessä.

Onko taustakuvalle mahdollista määrittää jollain keinolla pikselidimensiot -Silloin periaatteessa pitäisi toimia? Dreamveawerista(kaan) en moista featurea löytänyt.

Kiitos, jos ja kun viitsitte avittaa vanhaa ja väsynyttä.

EDIT: niin, ja tarkennuksena siis, että testaan luonnollisesti Win + IE 6-yhdistelmällä, joka lienee varsin hyvä mittari näissä hommissa. Toistaiseksi en ole saanut asennettua Parallersiin Win + IE 7-yhdistelmää, mutta IE:n seiskaversiossa kaiketi PNG-tuki pitäisi olla parempi?

[Virgo]

Itse olen käyttänyt tätä: http://www.twinhelix.com/css/iepngfix/

Fix toimii myös css taustakuvissa, mutta pitää muistaa, että siinä on rajoituksensa: background-position ja background-repeat eivät toimi. Mikään ratkaisu ei ole vielä noihin onnistunut tuomaan korjausta, koska IE6:n filtteri, joka tuon läpinäkyvyyden tekee, ei yksinkertaisesti sitä osaa. Myöskään linkit eivät aina toimi tällaisen taustakuvan päällä (tähänkin löytyy kiertokonsteja). Jos on pakko saada transparent background ja repeat arvo, ainoa mahdollisuus on käyttää gif-formaattia, tai tylysti hylätä IE6 (mikä ei kyllä vielä nykyisin ole vaihtoehto.. ). Joskus olen myös käyttänyt png:tä ja tehnyt ie:tä varten gif versiot, sekä oman css tyylitiedoston.

Eli perus background toimii, eikä muistaakseni vaadi korkeus/leveys attribuutteja, vaikkakin toimii luotettavammin, mikäli ne voidaan antaa.

esim.

#taustakuva {
background : url(images/taustakuva.png) no-repeat;
behavior : url(iepngfix.htc);
}

[OPJ]

Itse olen käyttänyt tätä: http://www.twinhelix.com/css/iepngfix/

Kiitos, tuo oli parempi kuin aiemmin löytämäni. Testailtu siis Win ja Mac ympäristössä.

Homma siis kaikin puolin kondiksessa, leiska pelittää hienosti. Sitä harmillista IE:llä tapahtuvaa kuvan uudelleen ja uudelleen latautumista / välkkymistä ei liene voi estää, vaan on selaimen "ominaisuus"? Tämä siis silloin, kun klikataan esimerkiksi valikossa sivulta toiselle. FF ei luonnollisesti tätä tee.

[OskariB]

Itse olen käyttänyt tätä: http://www.twinhelix.com/css/iepngfix/

Fix toimii myös css taustakuvissa, mutta pitää muistaa, että siinä on rajoituksensa: background-position ja background-repeat eivät toimi. Mikään ratkaisu ei ole vielä noihin onnistunut tuomaan korjausta, koska IE6:n filtteri, joka tuon läpinäkyvyyden tekee, ei yksinkertaisesti sitä osaa.

Background-repeatin voi tietysti kiertää äärimmäisellä purkkavirityksellä, eli tekemällä aivan järkyttävän kokoisen taustakuvan. Esimerkiksi itse tein erään projektin sisältöalueen osittain läpinäkyvää varjostusta varten 400px leveän ja 3000px korkean taustakuvan. Samaa purkkaahan ei tarvitse jokaiselle selaimelle tarjota, kun sijoittaa header-tagin sisälle seuraavan pätkän.

Koodi: Valitse kaikki

<!--[if lt IE 7.]>
<link rel="stylesheet" type="text/css" href="iepngfix.css" />
<![endif]-->

[OPJ]

Itse olen käyttänyt tätä: http://www.twinhelix.com/css/iepngfix/

Fix toimii myös css taustakuvissa, mutta pitää muistaa, että siinä on rajoituksensa: background-position ja background-repeat eivät toimi. Mikään ratkaisu ei ole vielä noihin onnistunut tuomaan korjausta, koska IE6:n filtteri, joka tuon läpinäkyvyyden tekee, ei yksinkertaisesti sitä osaa. Myöskään linkit eivät aina toimi tällaisen taustakuvan päällä (tähänkin löytyy kiertokonsteja).

Palatakseni aiheeseen, niin juuri tuo linkitysongelma on nyt mulla edessä (toinen proggis kuin edellinen). Osaatko sinä (tai kenties joku muu) antaa ohjeet purkkaviritykselle, jotta noi linkit tuossa png-taustan päällä saadaan skulaamaan IE:ssä? Taas on sellainen rojekti, missä toi läpinäkyvyys on vähintäänkin suotavaa, koska sen alle tuleviin kuviin ei voi laittaa ko efektiä kiinteästi.

Kiitos jälleen.

EDIT: Löysin googlamalla juttuja, joiden mukaan seuraavan "pitäisi" toimia: muutin linkkien (.class a) määrityksiin position:relative ja vielä z-indexin määritin sikakorkeaksi luvuksi. Eivät auttaneet. Leiskan olen rakentanut diveillä, vaikuttanee asiaan? Yksinkertaisimmissa leiskoissa useammankin foorumin mukaan edellä mainitut kuulemmma auttavat.

P... rkatlalal ...leen IE.

[Virgo]

Palatakseni aiheeseen, niin juuri tuo linkitysongelma on nyt mulla edessä (toinen proggis kuin edellinen). Osaatko sinä (tai kenties joku muu) antaa ohjeet purkkaviritykselle, jotta noi linkit tuossa png-taustan päällä saadaan skulaamaan IE:ssä? Taas on sellainen rojekti, missä toi läpinäkyvyys on vähintäänkin suotavaa, koska sen alle tuleviin kuviin ei voi laittaa ko efektiä kiinteästi.

Kiitos jälleen.

EDIT: Löysin googlamalla juttuja, joiden mukaan seuraavan "pitäisi" toimia: muutin linkkien (.class a) määrityksiin position:relative ja vielä z-indexin määritin sikakorkeaksi luvuksi. Eivät auttaneet. Leiskan olen rakentanut diveillä, vaikuttanee asiaan? Yksinkertaisimmissa leiskoissa useammankin foorumin mukaan edellä mainitut kuulemmma auttavat.

P... rkatlalal ...leen IE.

Itse ratkaisin ainakin kerran ongelman niin, että pistin linkit erikseen omaan div alueeseen heti transparent alueen jälkeen. Sitten siirsin sen divin oikealle paikalle negatiivisellä marginaalilla tai position:relative ja top/left määreillä. Lisäksi pitää pistää position:relative, ja z-indexiä kasvattaa suuremmaksi kuin sillä taustalle jäävällä alueella on. Tämä on todellakin hirveä purkkaratkaisu, mutta ainakin omassa tapauksessa toimiva kaikilla yleisimmillä selaimilla. Tämän jälkeen myös linkit toimivat IE6:ssa. En osaa sanoa, onnistuuko tällä tavalla sinun tilanteessasi.
Toivottavasti IE6 häviää pikaisesti maailmankartalta, nopeuttaisi hommia varmaan 50%

Huomasin muuten tällaisen seikan IE7:ssa: tein 1x1 pikselin transparent png:n, jonka pistin div taustakuvaksi repeat-x/repeat-y käyttäen. Muuten kaikki hyvin, mutta IE7 alkoi viemään 100% prosessoritehoa tällä sivulla (en tiedä onko bugi? korjattu jo). Että näin..

[OPJ]

Itse ratkaisin ainakin kerran ongelman niin, että pistin linkit erikseen omaan div alueeseen heti transparent alueen jälkeen. Sitten siirsin sen divin oikealle paikalle negatiivisellä marginaalilla tai position:relative ja top/left määreillä. Lisäksi pitää pistää position:relative, ja z-indexiä kasvattaa suuremmaksi kuin sillä taustalle jäävällä alueella on. Tämä on todellakin hirveä purkkaratkaisu, mutta ainakin omassa tapauksessa toimiva kaikilla yleisimmillä selaimilla. Tämän jälkeen myös linkit toimivat IE6:ssa. En osaa sanoa, onnistuuko tällä tavalla sinun tilanteessasi.
Toivottavasti IE6 häviää pikaisesti maailmankartalta, nopeuttaisi hommia varmaan 50%

Huomasin muuten tällaisen seikan IE7:ssa: tein 1x1 pikselin transparent png:n, jonka pistin div taustakuvaksi repeat-x/repeat-y käyttäen. Muuten kaikki hyvin, mutta IE7 alkoi viemään 100% prosessoritehoa tällä sivulla (en tiedä onko bugi? korjattu jo). Että näin..

Toi IE6:n häviäminen nopeuttaisi hommia varmaan enemmänkin, joskus tuntuu, että FF + muiden selainten taittoon menee päivä ja IE:n kanssa tapellaan kolme viikkoa jonkin typerän ja pikkumaisen ongelman kanssa. Mutta elämä on ja asiakas nauttii maksun suuruudesta.

Mulla itse asiassa noi jutut onkin oikein: Divin, jonka taustakuvan on siis tämä png, sisällä on kaksi muuta diviä, joissa siis linkit. toisessa kuvana ja toisessa tekstilinkkinä. Z-index on suurempi, ja position on relatiivinen. MUTTA koodissa ne on määritetty tuon container-divin sisään. Kokeilenpa ja raportoin, miten käy.

EDIT: Perk!!! Sehän toimii.. ei ihan antamiesi ohjeiden mukaan, mutta kuitenkin: mun ei tarvinnut laittaa negatiivista marginaalia, riitti kun otin nämä menu-divit pois niitä ympäröivän footer-containerin sisältä, positioin ne uudestaan sivun containerin sisään, määritin diveille position:relative ja z-indexiä reilusti. Kiitos!

[shovi]

Heitä ihan suosiolla IE:lle oma tyylitiedosto jossa on tökerön näköinen, läpinäkyvä GIF-kuva ja muille tarjoilet nättiä PNG:tä.

[OPJ]

Heitä ihan suosiolla IE:lle oma tyylitiedosto jossa on tökerön näköinen, läpinäkyvä GIF-kuva ja muille tarjoilet nättiä PNG:tä.

En. Jos palvelua ei saa toimimaan IE:llä, kuten muilla selaimilla, sitä ei sitten käytetä: Keksitään jotain muuta. Aina kannattaa yrittää, ja kuten yllä oleva osoitti, tässäkin tapauksessa ratkaisu löytyi ja nyt sivusto näytetään samanlaisena noin 95% kaikista webin käyttäjistä, mikä on tarkoitus ja tavoite. Onhan kyse kuitenkin palvelusta meiltä asiakkaalle ja asiakkaaltamme omille asiakkailleen.

Vaikka työmäärä lisääntyi ja asiakas maksoi kenties vähän extraa (tai sitten itse annat alennusta ylimenevän työn verran), oppiitaas jotain uutta ja jatkossa voi vastaavaa ratkaisua käyttää muuallakin.

Vastasinpa kuitenkin, vaikka allekirjoituksessasi löytyvän linkin kautta päädyin blogisivuillesi ja oletan, että vastauksesi todellakin on provo tai trolli. Kirjoitustasi lainaten: "Web-sivut ovat markkinointia! Ne ovat internetmarkkinoinnin kulmakivi, perusta ja pohja". Joten et kai kuvittele, että tyytyisin ryömimään sieltä, mistä aita on matalin?

[shovi]

Heitä ihan suosiolla IE:lle oma tyylitiedosto jossa on tökerön näköinen, läpinäkyvä GIF-kuva ja muille tarjoilet nättiä PNG:tä.

En. Jos palvelua ei saa toimimaan IE:llä, kuten muilla selaimilla, sitä ei sitten käytetä: Keksitään jotain muuta. Aina kannattaa yrittää, ja kuten yllä oleva osoitti, tässäkin tapauksessa ratkaisu löytyi ja nyt sivusto näytetään samanlaisena noin 95% kaikista webin käyttäjistä, mikä on tarkoitus ja tavoite. Onhan kyse kuitenkin palvelusta meiltä asiakkaalle ja asiakkaaltamme omille asiakkailleen.

Vaikka työmäärä lisääntyi ja asiakas maksoi kenties vähän extraa (tai sitten itse annat alennusta ylimenevän työn verran), niin oppiihan taas jotain uutta ja jatkossa voi vastaavaa ratkaisua käyttää muuallakin.

Ihan sivuhuomautuksena, otin kommenttisi aluksi ihan trollina. Mutta jotenkin sittenkin kuvittelin, että oletkin ihan tosissasi, siksi vastasin.

Mä en ymmärrä, miksi sä nyt lähdit tälle vittuilulinjalle. Nyt minä otan sut trollina. GIF-kuvalla saa ihan samalla tavalla läpinäkyvyydet hoidettua, mutta esim. varjot kannattaa suosiolla unohtaa. Jos sun asiakkaasi bisnes on taustakuvan drop shadowsta kiinni, niin pistä pikaviestinä nimi, niin tiedän välttää moista asiakasta.

Kerrohan mulle vielä, että millä ratkaisulla (oletan, ettet tehnyt mitään serveripuolen ratkaisuilla ja ActiveX:llä) sait läpinäkyvän PNG-kuvan futaamaan repeattina divin backgroundina?

[OPJ]

Heitä ihan suosiolla IE:lle oma tyylitiedosto jossa on tökerön näköinen, läpinäkyvä GIF-kuva ja muille tarjoilet nättiä PNG:tä.

En. Jos palvelua ei saa toimimaan IE:llä, kuten muilla selaimilla, sitä ei sitten käytetä: Keksitään jotain muuta. Aina kannattaa yrittää, ja kuten yllä oleva osoitti, tässäkin tapauksessa ratkaisu löytyi ja nyt sivusto näytetään samanlaisena noin 95% kaikista webin käyttäjistä, mikä on tarkoitus ja tavoite. Onhan kyse kuitenkin palvelusta meiltä asiakkaalle ja asiakkaaltamme omille asiakkailleen.

Vaikka työmäärä lisääntyi ja asiakas maksoi kenties vähän extraa (tai sitten itse annat alennusta ylimenevän työn verran), niin oppiihan taas jotain uutta ja jatkossa voi vastaavaa ratkaisua käyttää muuallakin.

Ihan sivuhuomautuksena, otin kommenttisi aluksi ihan trollina. Mutta jotenkin sittenkin kuvittelin, että oletkin ihan tosissasi, siksi vastasin.

Mä en ymmärrä, miksi sä nyt lähdit tälle vittuilulinjalle. Nyt minä otan sut trollina. GIF-kuvalla saa ihan samalla tavalla läpinäkyvyydet hoidettua, mutta esim. varjot kannattaa suosiolla unohtaa. Jos sun asiakkaasi bisnes on taustakuvan drop shadowsta kiinni, niin pistä pikaviestinä nimi, niin tiedän välttää moista asiakasta.

Kerrohan mulle vielä, että millä ratkaisulla (oletan, ettet tehnyt mitään serveripuolen ratkaisuilla ja ActiveX:llä) sait läpinäkyvän PNG-kuvan futaamaan repeattina divin backgroundina?

Alkuperäinen idea ei onneksi vaatinut taustakuvan toistamista (tiedän kyllä, että kyseiset jutut eivät png:nä toimi), vaan kyseessä on ihan vakiokokoinen elementti, joka piti saada läpinäkyväksi. Tämä siksi, että elementin alapuolelle piti saada näkymään iso kuvituskuva, jonka päällä osin tämä läpinäkyvä elementti lepää. Lisäksi tämän läpinäkyvän elementin päälle piti laittaa teksti- ja kuvalinkkejä - ja linkithän eivät IE:ssä png-taustakuvan päällä toimi ihan heittämällä.

Sain apua ja nyt homma toimii pienen kokeilun kautta. Kiitos siis avuista vaan kaikille! Syy png:n käyttöön on hyvä visuaalinen ulkonäkö ja kuvaelementtien mahdollisimman hyvä laatu, joka tässä tapauksessa on oleellisen tärkeä juttu. Kuten myös se, että tyyli on täysin vastaava tuotekatalogien ja esitteiden kanssa, joissa näitä läpinäkyvyyksiä on käytetty samalla tavalla.

Toinen syy on www-sivuston jatkokehitys. Olisihan ollut mahdollista tuottaa jokaiseen pääkuvituskuvaan Photarilla tuo läpinäkyvyys staattisesti, mutta jatkossa sivusto tulee toimimaan dynaamisena/päivityksen hoitaa asiakas itse, joten yksittäisten kuvien manipuolointi ei tule kyseeseen. Liian monimutkaista siis asiakasta ajatellen. Nyt löytynyt ratkaisu mahdollistaa sen, että asiakas käyttöliittymän avulla lisää vain pääkuvan tietyn kokoisena ja päivittää sivupohjat/sivut itse.

Ja en mielestäni vittuillut, eikä se ollut tarkoitus. Jos semmoisen kuvan annoin, niin pyydän anteeksi.