Öncelikle bu ilk etkileşimim MMIstanbul’la :) Hayırlı olsun diyerekten RIATalks’ta da gelen bir soru -Microsoft’tan konuşan arkadaşa gelmişti gerçi- üzerine, website ile haşır neşir olanların yakındığı PNG sorununun CSS çözümünü yazayım.. Hem ısınma turu olmuş olur dedim..

Css ile deneme diye bir class oluşturarak, ve test.png’miz olduğunu varsayarak alttaki CSS koduyla olayı çözüyoruz..

.deneme {
    width: 100px; height: 50px;
    background-image: url(img/test.png) !important;
    background-image: none;
    filter: none !important;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/test.png', sizingMethod='scale');
}

Burdaki filter metodu, Microsoft’un kendi standardı(!) olan AlphaImageLoader tanımlamamızla IE6’da da sorunsuz çalışıyor.. Transparan veya gölgeli png’lerde de bir sorun yaşamıyoruz.. Tabii HTML’de de alttakini yapmamız yetiyor..

<div class="deneme"></div>

Bir de linklerde bu yöntemi kullanırken alttaki CSS kodlarını da eklemekte fayda var..

display:block; cursor:pointer;

Bunun da nedeni "a" tag’ı inline bir obje olduğundan, width ve height property’lerini almayabiliyor, özellikle IE6’da.. "cursor:pointer" eklememizin nedeni de, yine IE6’da imleç saçmalayabiliyor..

Tabii HTML kısmı da tahmin edebileceğiniz gibi:

<a href="#" class="deneme"></a>

İyi IE6 düzeltmeler..