IE6 transparan PNG probleminin çözümü

Nisan 19, 2008 Hakan Yamanoğlu

Nedir bizim bu IE6 dan çektiğimiz bilmiyorum. WordPress tema işleriyle uğraşırken başıma öyle işler açtıki bu IE6 en sonunda pes ettirdi beni. Bu problemlerden birisi de Transparan PNG resim dosyalarının görüntülenmesiyle ilgili. IE6, ne yaparsanız yapın transparan PNG dosyalarının arka planını gri renkle dolduruyor ve bir türlü şeffaf arka plan kullanamıyorsunuz. Bu problem için internette bir sürü CSS Hack tekniği mevcut ancak benim de kullandığım ve en kullanışlısı olan JavaScript yöntemini anlatacağım size.

Öncelikle pngfix.js dosyasını indirin ve blogunuzun kök dizinine koyun.

Örnek: Blogunuz www.teknolojiherseyim.com/benimblogum gibi bir alt dizinde ise bile bu dosyayı mutlaka kök dizine koyun, “benimblogum” klasörüne değil.

Daha sonra bu scripti transparan png kullanacağınız sayfa içerisinden çağırmanız gerekiyor. Eğer WordPress kullanıyorsanız, header.php dosyanızı açın ve </head> etiketinin hemen üzerine şu kodları yerleştirin;

<!–[if lt IE 7.]>

<script defer type=”text/javascript” src=”pngfix.js”></script>

<![endif]–>

ie6 png hack

Artık kullandığınız bütün transparan png dosyaları IE6 ile sorunsuz bir şekilde görüntülenecek. Hatırlatmak istediğim bir nokta daha var. WordPress tekil yazılarınızda sabit transparan png dosyaları kullanıyorsanız, yukarıdaki scripti single.php içerisinden de çağırmanız gerekiyor. Ancak single.php içerisinden bu scripti çağırıken scripti koyduğunuz ana dizinin tam yolunu belirtmeniz gerekiyor. Yoksa script çalışmaz. Şu şekilde;

<!–[if lt IE 7.]>

<script defer type=”text/javascript” src=”http://www.blogunuz.com/uploads/pngfix.js”></script>

<![endif]–>

Bu yöntemi denedim ve kullanıyorum. Yani %100 bir şekilde transparan png problemini çözüyor. Bu scriptin tek bir problemi var; o da CSS dosyanız içerisinde “background url” şeklinde tanımladığınız transparan png dosyalarına çözüm bulamaması. Ne yazık ki bu probleme ben de bir çözüm bulamadım henüz.

Digg This
Reddit This
Stumble Now!
Buzz This
Vote on DZone
Share on Facebook
Bookmark this on Delicious
Kick It on DotNetKicks.com
Shout it
Share on LinkedIn
Bookmark this on Technorati
Post on Twitter
Google Buzz (aka. Google Reader)
Etiketler:css hack teknikleri, IE6, ie6 png, ie6 transparan png, png, png hack, transparan png problemi, Wordpress, wordpress transparan png

Bunlara da bakmakta fayda var

RSS ÜyeliğiŞu an tam 2243 kişi yazıları RSS ile takip ediyor. Üye olmak ister misin?


Yorumlar

“IE6 transparan PNG probleminin çözümü” yazısına 9 Yorum
  1. eylultoprak diyor ki:

    Günlüğünüzü gezerken gördüm. Yorum yapmadan çekilmek istemedim. :)
    Bu verdiğiniz js dosyası malesef başka js ile çakışma yaptığında ikisinden biri etkisiz kalıyor mesela benim için yorum bölümündeki ifadeler çalışmamıştı.

    Wordpress için ayrıca birde eklentisi var bunun.
    http://www.tahapaksu.com/wordpress/pngfix-wordpress-plugin

    Onun dışında ikisi de uygun yöntemler ama ie6 ‘da bazen kasılmalarada sebep oluyor bu tarayıcı..

  2. Hakan Yamanoğlu diyor ki:

    Bende blogumda birden fazla js kullanıyorum ama herhangi bir problem çıkmadı henüz. Bir de eklentisini denemek lazım. Zaten deveye sormuşlar neren eğri diye, o da demiş; nerem doğru ki? IE’nin ki de o hesap :)

  3. çalışmıyo diyor ki:

    çalışmıyo birader … senn

  4. Nazım diyor ki:

    Merhaba arkadaşlar, bu sorunu ben şu şekilde çözüyorum.Resim kodunun içine

    class=”correct-png”

    class kodunu ekliyorum.yani örnegin şöyle :

    Bu şekilde ie6′da bir sorun yaşamıyorum ben. Eğer ” Eee class kodunun karşılığında style dosyasına birşeyler eklememiz gerek” diye bir soru takılırsa aklınıza, buna gerek kalmıyo. ie6 otomatik tanıyo bu kodu.

  5. mustafa diyor ki:

    kardeş tam aradığım sorunun çözümünden bahsetmişşin ama yine pas geçmişsin:D

    senden ricam css içinden url yoluyla çağırdığımız png resimlerini nasıl çözüleceğizmizi bulduğunda bana bi mail atman.. ben su an arıyorum ama ınsallah bulabılırım kıl oldum cunku… thank you sımdıden..

Bu yazıdan bahsedenler

  1. oyyla.com diyor ki:

    IE6 transparan PNG probleminin çözümü…

    Nedir bizim bu IE6 dan çektiğimiz bilmiyorum. WordPress tema işleriyle uğraşırken başıma öyle işler açtıki bu IE6 en sonunda pes ettirdi beni. Bu problemlerden birisi de Transparan PNG resim dosyalarının görüntülenmesiyle ilgili….

  2. www.tusul.com diyor ki:

    IE6 transparan PNG probleminin çözümü…

    Nedir bizim bu IE6 dan çektiğimiz bilmiyorum. WordPress tema işleriyle uğraşırken başıma öyle işler açtıki bu IE6 en sonunda pes ettirdi beni. Bu problemlerden birisi de Transparan PNG resim dosyalarının görüntülenmesiyle ilgili….

  3. [...] desteği adı altında konuya bir güzel değinmiş. Onun dışında Teknoloji Herşeyim‘de IE6 transparan PNG probleminin çözümü konusu altında PNGFix yöntemine değinmiş. Eğer daha basit bir çözüm arıyorsanız Kadir [...]



Bir yorum da sen yaz!

Burada resmini afişe etmek için hemen bir gravatar hesabı al!

Additional comments powered by BackType