Mengatasi masalah PNG di IE

Fery Putra Tarigan — Wed, 17 Dec 2008 07:46:56 +0000

Sering kali sebagai web developer kita harus membuat suatu desain website itu harus tampil bagus dan semenarik mungkin. Terkadang perangkat-perangkat lunak yang kita gunakan mempengaruhi kecepatan kerja kita. Saya sendiri memilih broweser Firefox atau dikenal juga dengan FF dikarenakan banyaknya addon untuk web developer. Namun terkadang kita dalam hasil akhir dari desain itu harus terlihat sama untuk semua browser, dan yang sering bermasalah dengan desain tampilan adalah di IE atau Internet Explorer, apalagi versi 6 sangat membuat stress.

Dulu saya pernah bermasalah dengan transparansi pada file gambar berekstensi PNG. Setelah desain jadi dan terlihat ok di FF ternyata tidak sama dengan yang terlihat di IE. Setelah beberapa waktu mencoba – coba dan sembari membaca artikel di website resminya microsoft di tambah bantuan google akhirnya ketemu juga caranya dengan penambahan filter lewat cssnya.

Misalkan nama file gambar kita “logo.png” dan ukuran gambar tersebut 100 x 25 pixel maka dengan penambahan filter di script cssnya akan seperti berikut

#logo{
background:url(images/logo.png) transparent;
*background:none;
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=’images/logo.png’);
height:25px;
width:100px;
}

baris yang bertanda * di atas dikususkan untuk IE, karena FF tidak akan membacanya. Tapi ingat cara ini bukanlah cara yang tepat karena skrip di atas tidak valid CSS 2.0.

Untuk penggunaan skrip di atas agar valid CSS 2.0 bisa dengan bantuan IE comment condition. Tentang IE comment akan saya jelaskan lagi di postingan yang lain.

semoga bermanfaat

kutanari.com » javascript

Mengatasi masalah PNG di IE