RSS

IE6 ve PNG Sorunu

Bu yazı 11 Ağu 2008 tarihinde yazılmıştır

Bildiğiniz üzere IE (Internet Explorer) 6 ve alt sürümlerinde PNG sorunları yaşanmaktadır. Kullandığınız transparan GIF ve PNG imajlar bu sürümdeki tarayıcılarda arka kısımları koyu bir renk veya resmin boyutu kadar koyu bir alan ile gözükmektedir. İşte bu sorunu çözmek için bir kaç yöntem var. Size en kolay olan iki yöntemi anlatacağım.

1) Behavior Yöntemi

Behavior yöntemi stil dosyanızda kullandığınız “img” ve “<div>” elementleri için kullanılır. Öncelikle buradan iepngfix ve buradan blank.gif dosyasını indirin. Daha sonra ise stil dosyanıza veya stil dosyası kullanmıyorsanız sayfanızın içindeki stil bölümü içindeki yere şunları yazın;

img { behavior: url(iepngfix.htc) }

bu kodda iepngfix.htc dosyasını oluşturduğunuz sayfa ile aynı yere attığınızı düşünerek yazdım. Eğer indirdiğiniz dosyaları oluşturduğunuz dosya haricinde bir dizine atacaksanız yolunu göstermelisiniz. Bu kod sadece “img” tagları içindir. Arkaplan olarak kullandığınız png uzantılı dosyalar için, kullandığınız elemente behavior değeri atamalısınız. Örnek;

<div id=”ornek”>Bu bir denemedir</div>
#ornek {
background: url(resmim.png) no-repeat;
width:100px;
height:50px;
}

Yukarıda bir div oluşturduk ve ID’ sine ornek dedik. Daha sonra genişlik ve uzunluk değerlerini verdik ve bir arkaplan atadık. Fakat bu arkaplan bir png dosyası. Dolayısıyla bu divin arkaplanı IE6 ve daha alt sürümlerde yukarıda anlattığım gibi olacaktır. Bunu engellemek içinse;

#ornek {
background: url(resmim.png) no-repeat;
width:100px;
height:50px;
behavior: url(iepngfix.htc);
}

şeklinde yapıyoruz.

2) jQuery ifixpng

Bu benim daha çok sevdiğim bir yöntem :) ne de olsa jQuery var.  Bunun için yine bazı dosyalara ihtiyacımız var. Öncelikle jQuery kütüphanesi buradan indirebilirsiniz ve daha sonra ifixpng.js dosyası onu da buradan indirebilirsiniz ve tabi ki 1×1 px boyutlarında pixel.gif dosyamız o da burada :)

Kaydetmiş olduğunuz jQuery ve ifixpng.js dosyalarınızı oluşturduğunuz html dosyası içinde <head></head> tagları arasına yollarını belirterek ekleyin. Ve son olarak aşağıdaki kodları html dosyanıza “javascript” betiği ekler gibi ekleyin.

// tüm png uzantılı imajlar için

$(‘img[@src$=.png]‘).ifixpng();

// tüm png uzantılı imajlar ve ID’si logo olan div için

$(‘img[@src$=.png], div#logo’).ifixpng();

Siz kendinize göre hangi seçeneği kullanmak isterseniz onu ekleyebilirsiniz :)

, , , , , , , , ,
CSS, XHTML, jQuery


“IE6 ve PNG Sorunu” yazı için 8 Yorum yapılmış.

  1. Sedat Kumcu 15 Ağu 2009 | Cevapla

    Teşekkürler makale için elinize sağlık.


  2. oztecnic 02 Nis 2009 | Cevapla

    Merhaba Kadir,

    Tam da konuyla ilgili bir yazı hazırlıyordum, senin siteye de uğradım :) Recep’in yazdığı gibi background-position, background-repeat ve :hover olmadan geliştirilen çözüm de tam çözüm olamıyor.

    Yalnız yazıyı hazırlarken, bu iepngfix.htc geliştiricisinin sitesine baktım, 2.0 sürümünde :hover hariç diğer sorunları çözüldüğünü söylüyor. Yalnız hala Alpha…


  3. Kadir GÜNAY 19 Oca 2009 | Cevapla

    Normal png imajları MS’ in Alpha Transparency yöntemi ile de çözebiliyoruz. Fakat arka plan olarak eklenen png dosyaları jquery tekniği ile çözmek mümkün.


  4. soner 19 Oca 2009 | Cevapla

    Kadirin anlatmak istediği firefox ve ie7de transparan pngler sorunsuz görünmekte ama ie6 ve öncesinde bunlar sorunlu şöyle de çözebiliriz;

    http://homepage.ntlworld.com/bobosola/pngfix.js

    bu JS dosyasını sitenizin ana klasorune koyun

    bu koduda head bölümüne yerleştirin bu kadar.

    fakat css ile yerleştirilen imajlar şeffaf olmuyor


  5. Kadir GÜNAY 20 Kas 2008 | Cevapla

    @Recep Kütük,
    Yorumuna katılmadan edemiyorum fakat burada anlatmak istediğim saydamlık sorunuydu. Bir imajı zaten png olarak bg şeklinde kullanırsan bir sorun çıkaracağını düşünmüyorum. Ya da ben tam olarak anlayamadım anlatmak istediğini :)


  6. Recep Kütük 20 Kas 2008 | Cevapla

    Zamanında ben de bu konuda bayağı bir mesai harcayıp başımı ağrıtmıştım.. Ancak sizin bulduklarınızdan daha farklı bir çözüm bulamadım. Aslında, bu yazıya konu edilen çözümler de tam manasıyla “çözüm” değil, “çözüm”ün bir parçası. Zira, arkaplan resmi olarak bir png dosyası, “no-repeat” haliyle yeterince “etkileyici” olamıyor.. Oysa ki “repeat”, “repeat-x” ya da “repeat-y” özelliklerini de kullanabilseydik, gerçekten daha “etkileyici” ziyaretçi deneyimleri elde edebilirdik diye düşünüyorum.. Maalesef, yazıdaki yöntemlerin ikisi de bu ihtiyacı karşılayamıyor…

    Ancak elbet birgün bu ie6 çilesi sona erecek :)


  7. Kadir GÜNAY 28 Eki 2008 | Cevapla

    Yahya kusura bakma geç cevap veriyorum ama özel bir sebep nedeni ile şehir dışındaydım. Senin tam olarak sormak istediğin nedir? Nerede hata aldın ya da takıldın?


  8. yahya 23 Eki 2008 | Cevapla

    kardeş benim bu konu hakkında bi sorunum var her iki şeklide denedim olmadı biraz daha açıklayıcı olabilir misin tam olarak anlayamadım galiba.


Yorum Yap!