Png dosyaları hepimizin bildiÄŸi gibi bir resmi en kaliteli biçimde saklayıp kullanmamıza yarıyor. Ancak sanırım en kötü özelliÄŸide saydam bir png nin ya da geçiÅŸ efektli bir png nin ie6 üzerinde bozuk görünüyor olması. Aslında buna png nin özelliÄŸi deÄŸilde ie’nin özelliksizliÄŸi desek daha doÄŸru olcak. Malum ff de hiç bir problem yaÅŸamıyoruz bu konuda.

Daha çok gif ve gif’e eklenebilen matte özelliÄŸiyle png yi çok sık kullanmamıştım ÅŸimdiye kadar. Ancak bugün lazım oldu ve uzun uÄŸraÅŸlar sonucunda saydam, yarı saydam veya geçiÅŸli bir png yi ie6 da en düzgün nasıl gösterebilirim bir çözüm buldum.

#logo{
        width: 145px;
	height: 55px;
	background: url(images/logo.png) no-repeat;
}

biçiminde bir kullanım ff ve ie7 için geçerli olsada halen kullanılmakta olan ie6 için yeterli değildi ve aşşağıdaki gibi bozuk bir görüntü veriyordu.

Araştırmalar sonucu filter özelliği ile bunu yapabildiğimizi öğrendim.

#logo{
        width: 145px;
	height: 55px;
	background: url(images/logo.png) no-repeat;
        _background-image: none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/logo.png,sizingMethod='scale');
}

biçiminde bir kullanım veya head tagı içinde

<!--[if IE 6]>
<style type="text/css">
#logo{
background-image: none;    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/logo.png,sizingMethod='scale');
}
<! [endif]-->

biçiminde bir kullanımla bunu çözebiliyoruz.

Bu işlemleri yaptıktan sonra bu sefer de bu png arkaplanı kullandığımız katman içindeki tıklanabilen yerler(linkler, butonlar) tıklanılamıyor. Bununla ilgili arama yaparkende arkaplanda kullanılan png nin boyutlarını değiştirerek bir çözüme ulaşılabildiğini gördüm ancak bu boyutları rastgele denemelerle bulmak gerektiği için fazla uğraşmadan başka çözümler aradım. Aramalarım sonucunda bu katman içindeki linkler için position: relative kullanımının bu soruna çözüm olduğunu gördüm. Yani örnek olarak

#logo a, #logo a:active, #logo a:visited, #logo a:hover{
	position: relative;
}

biçiminde bir kullanımın bana yettiğini gördüm ve orada bıraktım . Butonlar içinde aynı kullanım geçerlimi denemedim henüz. Bunların sonucunda logomuzun yeni görüntüsü aşşağıdaki gibiydi:

Bu yazı toplamda 372, bugün ise 1 kez görüntülenmiş