Przeźroczyste PNG w IE6 - problem z błedną obsługą linków.
Ostatnio przypadło mi w firmie robić projekt, który nie dość, że jako tło strony wykorzystuje animowany Flash, to całość strony znajduje się na przeźroczystej warstwie (spod której widać w/w Flasha), a na niej jest jeszcze menu na przeźroczystej warstwie.
Oczywiście w dobie nowoczesnych przeglądarek wykorzystujących silniki Mozilli, Webkit czy Opery nie jest to duży problem, o tyle z IE nie jest już tak różowo. Jasne - można odpowiedni efekt uzyskać używając filtrów dzięki czemu jako tło można poprawnie wyświetlić PNG, jednak ma to swoje minusy.
Najpoważniejszym z nich jest niewątpliwie problem z linkami znajdującymi się na owej warstwie - często zdarza się, że stają się one nie klikalne - powszechnym jest uważanie, że podczas nakładania filtru zmienia się z-index warstwy i fizycznie przesłania ona tekst (nie działają linki, nie da się zaznaczać tekstu etc.).
Oczywiście jest to wersja nie do zaakceptowania jako iż dużo osób, w tym klient, używa jeszcze Internet Explorer 6. Na szczęście projekt jest w miarę nie skomplikowany, więc można było zastosować inną technikę.
Zamiast jednej warstwy z tekstem i przeźroczystym tle zastosowałem dwa DIV-y - jeden zawiera tekst i ogólnie treść strony, drugi zaś przeźroczyste tło i dzięki zastosowaniu position: absolute i z-index ustawiony jest tak, by znajdował się pod DIV-em zawierającym treść strony.
Dodatkowo dodałem jeszcze kawałek kodu Java Script który ustawia wymiary obu DIV-ów na jednakowe.
document.getElementById('bgOverlay').style.height = document.getElementById('content').scrollHeight + 'px';
document.getElementById('bgOverlay').style.width = document.getElementById('content').scrollWidth + 'px';
Zobacz przykład - oczywiście głównie chodzi o użytkowników IE6, pozostałe przeglądarki poprawnie wyświetlają PNG i takie zabiegi są niepotrzebne.
Komentarze
1
Komentarz użytkownika Sigvatr
18 08 2009W Internecie panoszy się akcja zachęcania do porzucenia IE6. Może warto o niej też wspomnieć tym klientom?
Wiem, wiem, ale pomarzyć można.
2
Komentarz użytkownika sh
18 08 2009To tylko w Polsce taka zaściankowość. Ostatnio zlecenia dla firmy w USA ktore robie to sam klient mowi mi, ze mam olewać IE6 (mimo, iż dopasowanie do tej przegladarki jest w cenie). W polsce natomiast wszystkie te pirackie windowsy bez aktualizacji automatycznych niestety mają IE6 ciagle :)
Komentarz użytkownika Bartosz "BTM" Szczeciński
18 08 2009@sh: niektórzy niestety są przykuci do IE6 albo przez politykę firmy, która nie pozwala na ingerowanie w oprogramowanie zainstalowane na stacjach roboczych i słabą świadomość administratorów w kwestii korzyści z instalcji nowszej wersji albo też z uwagi na jakieś archaiczne aplikacje, które do poprawnej pracy niestety wymagają tego ustrojstwa.
4
Komentarz użytkownika D4rky
18 08 2009DD_belatedPNG i masz jednego diva i wszystko działające.
Komentarz użytkownika Bartosz "BTM" Szczeciński
18 08 2009Tak, szczególnie patrząc na ich "Known Issues". Nie, poważnie - sprawdziłem wiele fixów - od czysto JSowych na HTC kończąc - niestety, ze wzg. na ułożenie elementów na DIV-ie (większość miała position: relative) nie zdawały egzaminów. Moje rozwiązanie (dla tego konkretnego przypadku) działa idealnie.
Komentarz użytkownika lukasz
18 08 2009Kiedyś była paczka jakoś o nazwie "iecss, cssie, iejscss" coś w tym stylu, w każdym bądź razie, "naprawiała" większość spotykanych "błędów" IE6, wysatrczyło dopisać atrybut dla niewygodnych elementów i wszytko działało jak należy.
A tak w ogóle, flash i przeźroczysty div na nim? :D Zakladam że dostałeś wszystkie części na maila i "weź mi to Pan poskładaj" ? :D Współczuję.
Komentarz użytkownika Bartosz "BTM" Szczeciński
18 08 2009@lukasz: wiem że było (jest) coś takiego jak IE7.JS które poprawia większość rzeczy, ale o rozwiązaniu w CSS nie słyszałem.
Jeżeli chodzi o projekt, to nie - trzech grafików siedzi przede mną i mogę ich mordować ;-)
Komentarz użytkownika Szymon
18 08 2009zagadnienia związane z lepieniem stronek mnie przerażają.
Btw1, ciekawi mnie że na studiach informatycznych (zaocznych)
w ogóle nie zauważa się że istnieje coś takiego jak css, javascript,
etc. To niby zbyt błahe tematy na studia, tyle że towarzysze niedoli
nie mają o tym najmniejszego pojęcia, co jest o tyle dziwne że teraz
zdaje się w szkołach uczą o robieniu stronek... btw, ci towarzysze
niedoli (współstudiujący) którzy robią strony zawodowo też owego
pojęcia nie mają, co jest dla mnie wielką zagadką bo imho dawno
powinni umrzeć z głodu.
Btw2, imho nieskomplikowany piszesierazem.
9
Komentarz użytkownika Sigvatr
18 08 2009Szymon: informatyka to coś więcej niż robienie stronek internetowych, nie wiem jaki miałeś program co prawda, ale u nas też nikt HTMLa, CSS itp, itd nie wykładał - na mojej specjalności.
Komentarz użytkownika Szymon
18 08 2009o! no nie wiedziałem...
żeby nie było całkiem offtopicznie to podzielę się informacją którą niedawno wyczytałem na sieci -- zabawa z IE 6 skończy się już za 5 lat (koniec wsparcia). Niby dobra wiadomość, tyle że do niedawna koniec był planowany na 2010 ale Microsoft przedłużył. Jeśli Ballmer ma wyrafinowane poczucie humoru, to mogą przedłuż jeszcze raz i może się okazać że będziecie robić stronki które mają banglać w IE 6 i firefoksie 6 ;)
wracając do offtopu, Sigvatr ja bym się bardzo chętnie nauczył czegoś o robieniu stronek. Stary jestem, kontuzja mi się odnowiła i mam przymusowe wakacje od taczki. Marzy mi się praca umysłowa, ale to co mam na studiach (4 semestry javy) mnie przerasta włącznie z ide, do lipca przez te dwa lata do javy praktycznie nie zajrzałem, a to prawie jedyna praktyczna rzecz którą się zajmujemy ;f
Komentarz użytkownika lukasz
18 08 2009To że wsparcie IE6 jest przedłużone o ileś tam lat, nie znaczy że samo robienie stron musi być wspierane. Oczywiście zaraz wyjdzie gadka "weź to powiedz pracodawcy" trudno, racz czy dwa można zrezygnować z projektu w imię ideii a nie zadowolenia imbecyla.
Komentarz użytkownika pecet
18 08 2009Mam Windows 98 z IE4, strony mi nie chodzą :(
13
Komentarz użytkownika Chris Bujok
18 08 2009http://www.twinhelix.com/css/iepngfix/ - kiedyś korzystałem z tego (do czasu kiedy postanowiłem nie optymalizować stron pod IE6), ale nie wiem, czy to zadziała też z "półprzezroczystością". No i z tego co mi się wydaje, to ten skrypcik wypełnia "przezroczyste" miejsce w PNG'ku przezroczystym GIF'em 1x1 px, wiec to chyba odpada...
Komentarz użytkownika BTM
18 08 2009@Chris: testowałem też i ten skrypt. Niestety, w moim specyficznym wypadku (png na png i png-iem pogania) nie zdało egzaminu i dla tego taki "workaround".
Sam w swoich prywatnych projektach olewam IE6 totalnie :)
