27 June 2007

IE Hack

Bila anda sudah pernah membaca tulisan saya sebelumnya yaitu tentang padding dan margin, pasti anda akan mudah mengerti tulisan berikut. Kali ini saya akan lebih menjelaskan tentang penggunaan padding, terutama cara 'mendamaikan' perbedaan yang ada antara Internet Explorer dengan Firefox. Seperti yang telah diketahui, IE dibuat sebagai browser yang eksklusif, karena ia tidak mengikuti aturan standar yang ditetapkan w3s. Untuk memngetahui perbedaan yang ada, coba ketikan kode berikut kemudian simpan dengan nama "file.html" dan buka file baru tadi dengan browser yang berbeda-beda.



<html>

<head>

<style>

#test {

background: #000 url(killua3.jpg) no-repeat center center;

height: 192px;

width: 115px;

padding: 10px;

}

</style>

</head>

<body>

<div id="test"></div>

</body>

</html>

Saya sengaja menempatkan gambar "killua3.jpg" sebagai latar box yang ingin dipelajari agar memudahkan melihat perbedaan antara kedua browser tadi. Bila anda tidak mempunyai filenya anda bisa menggantinya dengan file gambar lain yang memiliki warna mayoritas putih dan berukuran 115x192 piksel. Perhatikan screenshoot berikut untuk melihat perbedaannya.

Akan terlihat border hitam di sekitar box yang ada bila file tersebut dibuka menggunakan Firefox, sedangkan hal ini tidak terjadi bila menggunakan IE. Untuk mengakalinya mungkin anda mengurangi 20px dari ukuran panjang dan lebar dari box tadi, namun dengan cara ini area untuk text pada IE menjadi berkurang dan tetap saja tampilan di kedua browser tadi akan tampak berbeda, untuk itu anda perlu merubah code dari file "file.html" yang telah dibuat tadi menjadi seperti berikut.



<html>

<head>

<style>

#test {

background: #000 url(killua3.jpg) no-repeat center center;

height: 172px !important;

height: 192px;

width: 95px !important;

width: 115px;

padding: 10px;

}

</style>

</head>

<body>

<div id="test"></div>

</body>

</html>

Dengan kode yang baru ini, border yang tampil di Firefox tadi akan hilang dan tampilannya akan sama seperti di IE. Maksud kode tambahan diatas adalah, variabel yang sama tetapi ditambahkan dengan "!important" akan membuat variabel sama yang lain diacuhkan. Jadi untuk tinggi kotak yang dipakai adalah yang 172px bukan 192px. Namun tidak seperti Firefox dan Opera, ia tidak mengenal code tambahan ini, maka sesuai dengan sifat html yaitu yang terakhir ditulis adalah yang penting sebaliknya di Firefox dan Opera yang penting adalah yang ditandai code "!important".

Mungkin agak sulit dimengerti, karena memang susunan tulisan saya yang memusingkannya, jadi saya sarankan untuk membaca kodenya berulang-ulang untuk bisa lebih mengerti lagi. Intinya di Firefox dan Opera tag/variabel css yang dianggap penting adalah yang ditandai dengan code "!important" dan tag/variabel lain yang mendeskripsikan hal yang sama (ex: sama2 height atau width) akan diacuhkan atau dianggap tidak ada, sedangkan di IE tag yang penting adalah yang terakhir ditulis.

No comments:

Post a Comment