Salah satu masalah yang sering ditemui ketika kita mendesain satu layout adalah cross-bowser check, terutama untuk “browser kesayangan” para desainer yakni Internet Explorer 5, dan 6. IE memang kini sudah merilis versi 8 dan relatif lebih “bersahabat” ketimbang para pendahulunya. Namun, kita tidak bisa menafikan begitu saja para pengunjung yang masih menggunakan versi 5.5 dan 6.
Salah satu “kemahiwalan” IE 5.5 dan 6 adalah dalam hal me-render file .PNG transparan. File tersebut latarnya akan terlihat berwarna abu-abu. Tentu ini terasa sangat annoying mengingat transparansi file .PNG begitu smooth dan mendukung opacity transparency.
Tapi jangan kuatir, sekarang ini sudah banyak beberapa trik/hack yang dapat digunakan untuk mensiasati hal tersebut. Salah satunya adalah dengan menggunakan jquery.pngFix.js. Berikut contoh penggunaan jquery.pngFix.js untuk mengatasi masalah transparansi file .PNG di IE 5.5 dan 6 (saya menggunakan jQuery versi 1.3.2 untuk blog ini):
PNG Transparan
<img src="contohpng.png" alt="Contoh PNG" width="128" height="128">
PNG Transparan Dengan Style
<img style="border:1.0em dashed #090;padding:10px;margin:10px;" src="contohpng.png" width="128" height="128" alt="Contoh PNG" />
DIV dengan Background PNG
<div><div style="float:left;width:128px;height:128px; background: url(contohpng.png);">Ini adalah div-container dengan menggunakan background PNG...</div><div style="float:right;width:346px;height:150px; background: white url(contohpng.png);">Ini adalah div-container dengan menggunakan background PNG...</div><div style="clear:both;"></div></div>
Khusus untuk implementasi pada DIV, width dan height image akan mengikuti width dan height yang di-state di style yang kita gunakan. Jadi, sebaiknya gunakan width dan height yang sesuai dengan dimensi image-nya.
Bagaimana Menggunakannya?
- Download jQuery
Download pngFix.zip atau lihat source. - Tambahkan tag untuk memanggil jQuery and pngFix pada bagian HEAD di dokumen HTML anda…
<head> ... <script type="text/javascript" src="jquery-latest.pack.js"></script> <script type="text/javascript" src="jquery.pngFix.js"></script> ... </head>
Sesuaikan path tempat file .js tadi diunggah.
- Aktifkan pngFix dengan menambahkan tag berikut:
<head> ... ... </head>
Selamat mencoba…
Hi! My name is hmmmm... just call me Aban Nesta. I am currently working as a web designer and an adventurer by state of mind. I am quite involved with 
Warning: call_user_func(twentyten_comment) [function.call-user-func]: First argument is expected to be a valid callback in /home/aban/public_html/wp-includes/comment-template.php on line 1335
Warning: call_user_func(twentyten_comment) [function.call-user-func]: First argument is expected to be a valid callback in /home/aban/public_html/wp-includes/comment-template.php on line 1335
Warning: call_user_func(twentyten_comment) [function.call-user-func]: First argument is expected to be a valid callback in /home/aban/public_html/wp-includes/comment-template.php on line 1335
Warning: call_user_func(twentyten_comment) [function.call-user-func]: First argument is expected to be a valid callback in /home/aban/public_html/wp-includes/comment-template.php on line 1335