Kecacatan Tampilan Website di Internet Explorer


Anda, para pejuang HTML, mungkin pernah atau bahkan sering menemui keanehan-keanehan tampilan web di browser Internet Explorer (IE), sedangkan di browser lain tampak baik-baik aja. Saya tidak terlalu perhatian dengan hal ini walaupun dulu pernah beberapa kali menemuinya. Habis, lebih sering pakai Mozilla sih. Biasanya diasumsikan best viewed in untuk menghindari protes user😀 Cuma, bulan lalu saya terpaksa harus mencari tahu sebab dan solusinya. Seperti biasa mbah Google adalah teman setia saya dan ternyata tiap kali mencari informasi, banyak ketemu kasus yang sama. Ah, dasar Microsoft Mikocok…browser aja rewel😛

Inilah beberapa persoalan yang terjadi di tampilan antarmuka web jika dibuka menggunakan IE, terutama versi 6 ke atas…



#1: Tag div berantakan

Masalah yang mungkin terjadi adalah munculnya gap antargambar (spasi atau enter yang tidak diinginkan). Bisa juga muncul pada item-item di list, cell pada tabel, form, dan sebagainya. Cara mengakalinya dengan menghapus gap di antara tag div tersebut. Contoh:

<div id="board_left">
<img src="images/header.png" alt="" />
</div>

menjadi
<div id="board_left"><img src="images/header.png" alt="" /></div>

<div>
</div>

menjadi
<div></div>

Jika cara di atas tidak berhasil, ubah ukuran lebar atau tinggi div menjadi 100%, tergantung gap muncul di arah vertikal atau horizontal. Kalo gagal juga, kecilkan saja ukuran gambar, div, atau span-nya. IE memang agak nakal. Interpretasinya tentang CSS tidak mengikuti kaidah standar yang digunakan secara luas. Pada IE, padding dan border dianggap termasuk dalam ukuran width.

#2: Blue background image

Yang cacat juga di IE adalah gambar-gambar format PNG berlatar transparan ada kalanya berubah menjadi berlatar biru (lihat gambar). Konon katanya IE tidak mendukung PNG dengan transparansi jenis 24-bit, jadi simpanlah gambar-gambar yang Anda gunakan di web sebagai PNG tanpa alpha tranparency atau jenis 8-bit.

#3: Tidak mau ke tengah

Cacat yang satu ini cukup mengganggu karena jika ukuran web kita tidak penuh (selebar jendela web browser), kita pasti ingin web berada di tengah. Unfortunately, IE nggak selalu mau nurut! Dengan margin: 0 auto di CSS saja ternyata tidak cukup membuatnya mau menengahkan halaman, padahal di web browser lain it’s always works! Saya sudah coba menambahkan tag <center> setelah <body> tapi tidak bekerja juga. Baru setelah ditambahkan text-align: center pada CSS, dia mau ke tengah. Cara tersebut sepertinya salah sih karena jadi repot mengatur text-align di div-div di dalam <body> itu sendiri.

#4: Footer tidak mau ke bawah area isi

Ketika Anda membuat isi web menjadi dua bagian dengan div dan float didalamnya, Anda mungkin akan menemui footer atau sesuatu yang berada di bawah isi utama web, tidak mau bertahan di bawah (lihat gambar). Untuk masalah yang satu ini, saya pastikan urusan div seperti pada poin #1 di atas sudah lulus. Sebagian tips menyarankan untuk menambahkan satu baris kosong sebelum div footer, atau membuat kelas <margin1em{margin-top: 1em;}> di CSS. Namun, tiga hal tersebut tidak berhasil dalam kasus saya. Baru setelah saya menambahkan <clear:both> pada div footer saya, footer itu mau bertahan di bawah.

#5: Pewarnaan pada list tidak seperti yang diharapkan

Dalam IE, interpretasi tag <li> sepertinya berbeda. Jika Anda memiliki kelas di CSS untuk memberi style berbeda pada <li> dengan uraiannya, maka jangan biarkan kodenya seperti ini pada IE:

<ul class=”focus”>
<li>Aman dan Terpercaya</li>
Pembelian pulsa dapat dilakukan lewat transfer ATM maupun PayPal (kartu kredit)
</ul>

Baris uraian Pembelian pulsa dapat dilakukan lewat transfer ATM maupun PayPal (kartu kredit) akan dianggap oleh IE sebagai bagian dari tag <li> sehingga style-nya akan mengikuti style <li>. Pada gambar contoh saya, seluruh uraian menjadi oranye karena saya mengeset tag <li> pada class focus berwarna oranye. Untuk menangani hal ini, bagian uraian dari sebuah list juga harus didefinisikan dalam kelas lain yang berbeda style dari <li>. Contoh:

<ul class=”focus”>
<li>Aman dan Terpercaya</li>
<p>Pembelian pulsa dapat dilakukan lewat transfer ATM maupun PayPal (kartu kredit)</p>
</ul>

Selamat mencoba!

Leave a comment

7 Comments

  1. Hihi, ini browser yg paling dibenci sama para developer web! Tapi malangnya masih banyak dipakai di Kantor2 dan Perusahaan2.. T.T

    Pernah saya ngalamin di IE 8, bikin button keluarnya cuman se encrit (kecil pokoknya). Haha.. ternyata setelah diselidiki, itu akibat dari style effectnya si IE. Menjengkelakan memang..

    Tapi, kita tunggu nih IE9.

    Reply
    • iya, masih banyak yang make, market share-nya juga masih dominan >.<
      soalnya segmen masyarakat awam itu emang masih banyak banget sih, jadi mereka pakenya PC yang isinya bundel program Windows, bawaan pas instalasi OS-nya…ya di tempat2 kaya yang Irfan bilang itu, kan kebanyakan bapak2 ibu2 yang tinggal make aja, adminnya tuh harusnya yang inisiatif instalin browser lain…hehe

      Reply
      • pengalaman ttg browser lain, pernah saya mw presentasi webapps ke salah satu kantor trus saya suruh, “Pak, bukanya pakai Mozilla firefox ya?” trus si Bapak2 itu jawab, “Mozilla itu apaan ya?”.

        hahahaha… *frustasi sambil jedot2in kepala. T.T

        Reply
  2. Kalo saya punya masalah pada background image. Di mozila bcgrnd muncl,tp di ie gak muncl

    Reply
  3. ini dia. akhirnya ketemu. terima kasih.

    Reply

Wait! Don't forget to leave a reply here.. :D

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: